الأخبار التكنولوجية والاستعراضات والنصائح!

التحول التراكمي في التخطيط – نظرة عامة على عامل تصنيف Google لعام 2023

ستساعدك المقالة التالية: التحول التراكمي في التخطيط – نظرة عامة على عامل تصنيف Google لعام 2021

يعد التحول التراكمي للتخطيط (CLS) أحد مقياس Google الذي يقيس حدث تجربة المستخدم وأصبح عامل تصنيف في عام 2021.

وهذا يعني أنه من المهم فهم ماهية CLS وكيفية تحسينها.

تعريف التحول التراكمي للتخطيط

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

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

يعد تقليل CLS أمرًا مهمًا لأن الصفحات التي تتغير يمكن أن تسبب تجربة سيئة للمستخدم.

تشير نتيجة CLS الضعيفة إلى وجود مشكلات في الترميز يمكن حلها.

لماذا يحدث CLS

وفقًا لجوجل، هناك خمسة أسباب لحدوث التحول التراكمي للتخطيط:

  1. صور بدون أبعاد.
  2. الإعلانات والتضمينات وإطارات iframe بدون أبعاد.
  3. المحتوى الذي يتم حقنه ديناميكيًا.
  4. خطوط الويب المسببة لـ FOIT/FOUT.
  5. الإجراءات التي تنتظر استجابة الشبكة قبل تحديث DOM.

يجب أن تحتوي الصور ومقاطع الفيديو على أبعاد الارتفاع والعرض المعلنة في HTML. فيما يتعلق بالصور سريعة الاستجابة، تأكد من أن أحجام الصور المختلفة لإطارات العرض المختلفة تستخدم نفس نسبة العرض إلى الارتفاع.

توصي جوجل باستخدام AspectRatioCalculator.com لحساب نسب الارتفاع. إنه مورد جيد.

يمكن أن تسبب الإعلانات CLS

هذا واحد صعب بعض الشيء للتعامل معه. تتمثل إحدى طرق التعامل مع الإعلانات التي تسبب CLS في تحديد نمط العنصر الذي سيظهر فيه الإعلان.

على سبيل المثال، إذا قمت بتصميم div بحيث يكون له ارتفاع وعرض محددان، فسيتم تقييد الإعلان بهما.

هناك حلان في حالة نقص المخزون وعدم ظهور الإعلان.

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

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

سيتعين عليك اختبار ذلك إذا كان مخزون الإعلانات يمثل مشكلة.

المحتوى الذي تم حقنه ديناميكيًا

هذا هو المحتوى الذي يتم إدراجه في صفحة الويب.

على سبيل المثال، في WordPress، يمكنك الارتباط بـ YouTube فيديو أو تغريدة وسيعرض WordPress الفيديو أو التغريدة ككائن مضمن.

الخطوط المستندة إلى الويب

يمكن أن تتسبب خطوط الويب التي تم تنزيلها في حدوث ما يعرف بفلاش النص غير المرئي (FOIT) وفلاش النص غير المنمط (FOUT).

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

يمكن أن تساعدك Lighthouse في تشخيص سبب CLS.

يمكن لـ CLS التسلل أثناء التطوير

يمكن أن يتسلل التحول التراكمي في التخطيط خلال مرحلة التطوير. ما يمكن أن يحدث هو أن العديد من الأصول اللازمة لعرض الصفحة يتم تحميلها في ذاكرة التخزين المؤقت للمتصفح.

في المرة التالية التي يزور فيها المطور أو الناشر الصفحة قيد التطوير، لن يلاحظ أي تغيير في التخطيط لأن عناصر الصفحة تم تنزيلها بالفعل.

ولهذا السبب من المفيد إجراء قياس في المختبر أو في الميدان.

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

يتضمن الحساب مقياسين/أحداث. الأول يسمى جزء التأثير.

جزء التأثير

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

إطار العرض هو ما تراه على شاشة الهاتف المحمول.

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

المثال الذي يستخدمه Google هو عنصر يشغل 50% من إطار العرض ثم ينخفض ​​بنسبة 25% أخرى.

عند جمعها معًا، تسمى القيمة 75% بجزء التأثير ويتم التعبير عنها بنتيجة 0.75.

جزء المسافة

القياس الثاني يسمى جزء المسافة. جزء المسافة هو مقدار المساحة التي انتقلها عنصر الصفحة من الموضع الأصلي إلى الموضع النهائي.

في المثال أعلاه، تحرك عنصر الصفحة بنسبة 25%.

والآن يتم حساب نقاط التخطيط التراكمية عن طريق ضرب جزء التأثير في جزء المسافة:

0.75 × 0.25 = 0.1875

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

كيفية قياس CLS

هناك طريقتان لقياس CLS. جوجل يدعو الطريقة الأولى في المختبر. الطريقة الثانية تسمى في الميدان.

في المعمل يعني محاكاة مستخدم فعلي يقوم بتنزيل صفحة ويب. يستخدم جوجل أ محاكاة Moto G4 لتوليد نتيجة CLS داخل بيئة المختبر.

تُعد الأدوات المعملية هي الأفضل لفهم كيفية أداء التخطيط قبل نشره مباشرةً للمستخدمين. إنه يمنح الناشرين الفرصة للقيام بذلك اختبار تخطيط للمشكلات.

أدوات المختبر يتألف من أدوات تطوير كروم و منارة.

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

من المهم أن نفهم التحول التراكمي للتخطيط. ليس من الضروري أن تفهم كيفية إجراء الحسابات بنفسك.

لكن فهم ما يعنيه وكيفية عمله يعد أمرًا أساسيًا حيث أصبح هذا الآن جزءًا من عامل تصنيف Core Web Vitals.