ما هو تخطيط التحول التراكمي CLS ؟

يعد تغيير التخطيط التراكمي (CLS) مقياسًا أساسيًا لأهمية الويب ويحسب تحويل العناصر أثناء تنزيل الصفحة وعرضها. تكون الأحداث الأكثر شيوعًا على الصور والأزرار والعناصر التفاعلية الأخرى ولكن يمكن رصدها بسهولة على النص أيضًا.

ما مدى أهمية CLS ؟

يتسبب CLS في تجربة سيئة بشكل عام للمستخدمين ويجب تقليله قدر الإمكان. إلى جانب التجربة السيئة الواضحة ، هناك مسألة تحسين محركات البحث (SEO). نظرًا لأن Google ومعظم محركات البحث الأخرى قد اعتمدت أهلية CLS كمقياس أساسي للويب الحيوي يغذي مباشرة الخوارزمية التي تعرض نتائج البحث ، فإن هذا المقياس سيكون له رأي أساسي في مدى نجاحك في البحث.

ما هي درجة CLS الجيدة؟

درجة تحول التخطيط التراكمي الجيدة هي أي شيء أقل من 0.1 بينما أي شيء أعلى من 0.25 يعتبر ضعيفًا.

ما الذي يسبب التحول في التخطيط التراكمي؟

تحدد Google خمسة أسباب رئيسية لضعف درجة CLS:

1. ستتحرك الصور بمجرد تحميل JavaScript و CSS مما سيؤدي على الأرجح إلى تغيير حجم الصور.
2. الإعلانات والتضمينات التي ليس لها أبعاد محددة في DOM.
3. تم إنشاء المحتوى بشكل ديناميكي.
4. الخطوط التي يتم تحميلها بعد إنشاء الصفحة.
5. الجهات الخارجية التي تحتاج إلى انتظار استجابات الشبكة لتحديث DOM.

اقرء ايضا : مزود خدمات البيانات الكبيرة السحابية

استثناءات

هناك أيضًا ما يسمى بتغيير التخطيط الذي يبدأه المستخدم ولا يتم احتسابه ضمن نتيجة CLS. على سبيل المثال ، لن يؤثر شريط تمرير العنوان في CLS ولن يتأثر بأداة التحميل المسبق للصفحة الكاملة.

لا يعتبر النقر فوق الأزرار التي تؤدي إلى تشغيل رسم متحرك تغييرًا في التخطيط حتى إذا كانت النتيجة عبارة عن تنقل داخلي في الصفحة مثل التمرير إلى عنصر أسفل الصفحة. تقع هذه ضمن ما يسمى نافذة استثناء المدخلات وهي 500 مللي ثانية بعد إدخال المستخدم.

يمكن أن تكون الرسوم المتحركة مسؤولة عن بعض CLS ولكن ليس كلها. لن يتم احتساب أي رسوم متحركة للتحويل يتم إجراؤها باستخدام CSS على أنها تحول تخطيط تراكمي.

من الجدير بالذكر أن نتيجة CLS تتأثر فقط بالحركات التي تحدث في الجزء المرئي من الصفحة. إذا حدث التحول أسفل منفذ العرض ، فلن يؤثر على درجة CLS الخاصة بك.

أفضل أدوات DevOps في عام 2022

كيف يتم حساب التحول في التخطيط التراكمي؟

هناك نوعان من المقاييس المتضمنة في حساب CLS: كسر التأثير  وجزء المسافة.

كسر التأثير – Impact fraction

جزء التأثير هو قياس مقدار المساحة التي يشغلها عنصر غير مستقر في منفذ العرض. منفذ العرض هو أبعاد شاشتك الفعلية.

لنأخذ صورة 1000 بكسل كمثال. من أجل عمليات حسابية سهلة ، لنفترض أن إطار العرض الخاص بك يبلغ 2000 بكسل ، مما يجعل الصورة تشغل 50٪ من إطار العرض. بمجرد تحميل CSS ، سينخفض ​​هذا البُعد إلى 500 بكسل ، وهو ما يمثل 25٪ من إطار العرض. يتم حساب جزء التأثير بجمع الاثنين ، مما يعني 25 + 50 = 75٪. في هذه الحالة ، سيكون كسر التأثير 0.75.

جزء المسافة – Distance fraction

المقياس الثاني الذي ستستخدمه لحساب درجة CLS يسمى جزء المسافة. يشير إلى المسافة التي تتحرك بها الصفحة من الموضع الأصلي إلى الموضع النهائي. باتباع المثال السابق ، يتم إزاحة الصورة بمقدار 500 بكسل ، وهو ما يمثل 25٪ من حجم منفذ العرض. لذا فإن درجة CLS ستكون 0.75 × 0.25 = 0.1875.

كيف تقيس درجة CLS ؟

تتمثل الطريقة السريعة لقياس مقياس إزاحة التخطيط التراكمي في استخدام Chrome Dev Tools و Lighthouse. ستحصل على النتائج فورًا ، ولكن سيتعين عليك إعادة العملية بأكملها متى أردت التحقق من CLS الخاص بك. نظرًا لأنه يمكن أن يكون شديد التقلب ، ستحتاج إلى قياس درجة CLS كثيرًا.

الخيار الثاني – وربما الخيار الذي يختاره معظم الأشخاص – هو استخدام أداة مراقبة تابعة لجهة خارجية. لن تجعل هذه الأدوات حياتك أسهل فحسب ، بل سيسمح لك معظمها بمراقبة CLS الخاص بك وإرسال تنبيهات كلما سارت الأمور بشكل جانبي. يمكنك الاستفادة من هذا المقال افضل 15 اداة لاختبار فحص وسرعة مواقع الويب 2022

كيفية تحسين التحول في التخطيط التراكمي ؟

يجب أن يكون واضحًا جدًا أن التغيير التراكمي في التخطيط يتجاوز مقياس الغرور البسيط ويمكن أن يتسبب في تجربة مستخدم سيئة والتي ستؤثر بشكل مباشر على النتيجة النهائية. لذا فإن الخطوة التالية ستكون تحسينها من أجل تحسين أداء موقع الويب وسهولة استخدامه.

الصور ومقاطع الفيديو

يريد الجميع الحصول على أقصى درجات الجودة من الصور ومقاطع الفيديو ، ولكن هذه تؤثر بشكل كبير على سرعة التحميل. لهذا السبب ، تميل الصور ومقاطع الفيديو إلى إحداث تغيير في التخطيط عند تحميلها بعد ثوانٍ قليلة من باقي المحتوى. لحساب هذه التحولات ، يمكنك تعيين أبعاد DOM للعناصر التي يتم تحميلها فيها.

توصي Google باستخدام AspectRatioCalculator  لحساب نسب العرض إلى الارتفاع.

إعلانات

على الرغم من صعوبة التعامل معها ، إلا أنه ليس من المستحيل إصلاحها. غالبًا ما تحدث تغييرات التخطيط التي تسببها الإعلانات وقد رأيناها جميعًا. ومع ذلك ، بمجرد قصر DIV الأصلي على ارتفاع وعرض محددين ، ستجبرهم على التقيد بهذه الأبعاد. لذلك عندما يتم تحميل الإعلان بعد عرض المحتوى أو عند تحديثه بأخرى جديدة ، فلن يتعرض التصميم لأي تغيير.

محتوى ديناميكي

يصعب التعامل معها لأنها تتطلب بعض التفكير والتعمد. ستحتاج إلى التأكد من أن لديك فهمًا جيدًا لما ستقوم الجهات الخارجية بتحميله على موقعك ، مثل مقطع فيديو YouTube ، على سبيل المثال. بمجرد معرفة المكان الذي يمكن أن يظهر فيه المحتوى الذي تم إنشاؤه ديناميكيًا ، عليك فقط تطبيق نفس “الدواء” كما كان من قبل وتعيين أبعاد عنصر DIV الرئيسي لتجنب أي تغييرات غير ضرورية في التخطيط.

الخطوط

يمكن أن تكون هذه مصدر إزعاج للتعامل معها ، خاصة إذا كنت تستخدم خطوطًا مخصصة. عندما يتم تحميل النص الأولي الخاص بك ، سيكون Arial افتراضيًا لمتصفح Chrome و Helvetica for Safari (Mac) ، لذلك بمجرد تحميل الخط ، سترى تأثير الفلاش على كل نصك.

طريقة منع ذلك هي استخدام rel = ”preload” في رابط الخط الذي ستستخدمه لموقعك على الويب.

مراقبة CLS مع الادوات الخارجية

تستخدم معظم مواقع الويب الحديثة العديد من الأجزاء المتحركة ، ونتيجة لذلك ، يمكن أن تتأثر تجربة المستخدم. يجب مراقبة كل هذه الأجزاء وإدارتها بعناية. CLS لا يختلف.

لحسن الحظ  اننا وفرنا مجموعة من الادوات في هذا المقال يمكنك الاستفادة منها بشكل مجاني 15 اداة لاختبار سرعة مواقع الويب 2022، وتوجد فيها خيارات مجانية كثيرة قد تناسبك وان كنت تبحث عن شي مميز ومدفوع فننصحك بهذه الاداة لانها تعتبر Sematext Synthetics هي الأداة المثالية للقيام بذلك. إنه برنامج مراقبة اصطناعي يسمح لك بمراقبة أي تغييرات في نتيجة تغيير التخطيط التراكمي وإعداد التنبيهات لتلقي إشعار عندما تتغير الأشياء. ومع ذلك ، فهذه ليست سوى عدد قليل من الفوائد العديدة التي تحصل عليها من ذلك.

خاتمة

تعتبر سرعة الموقع من الامور المهمة التي يجب على المستخدم توفيرها اذا اراد الانتشار والوصول للكثير من العملاء وايضا لكسب ثقة محركات البحث واهمها google ، وفي شركة الافنان لتكنلوجيا المعلومات نوفر افضل السيرفرات السريعة ونفتخر بوجود كادر تقني على اعلى مستوى يهتم لادق التفاصيل من اجل ان ينتج كود عالي الجودة وتضمن حصولك على التصنيفات المرتفعة للسرعة لتتمكن من ممارسة عملك بكل راحة بدون الالتفات الى هذه الامور لاننا نقوم بها بدل عنك انتهز عروض الافنان .

قد يهمك ايضا

FID تأخير الإدخال الأول

طلبات HTTP

رسم محتوى LCP

وقت الاستجابة – Response Time

وقت العرض – Render time

طريقة معرفة الكمبيوتر يدعم الاصدار 32 بت أو 64 بت

DMS-IQ نظام الارشفة الالكترونية النسخة المجانية