Cumulative Layout Shift (CLS)

Milica Mihajlija

Philip Walton

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

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

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

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

يساعدك مقياس "التغيُّر التراكمي في التصميم" (CLS) في معالجة هذه المشكلة من خلال قياس معدّل تكرارها لدى المستخدمين الفعليين.

ما هو CLS؟

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

يحدث تغيُّر في التصميم في أيّ وقت يتغيّر فيه موضع عنصر مرئي من إطار معروض إلى آخر. (يتم توضيح تفاصيل حول كيفية احتساب نتائج متغيّرات التصميم الفردية لاحقًا في هذا الدليل).

إنّ سلسلة التحولات في التنسيق، والتي تُعرف باسم فترة الجلسة، هي عندما يحدث تبديل واحد أو أكثر من التحولات الفردية في التنسيق بشكل متتابع سريع مع فاصل زمني أقل من ثانية واحدة بين كل تبديل و5 ثوانٍ كحد أقصى لمدّة الفترة بالكامل.

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

ما هي نتيجة CLS الجيدة؟

لتقديم تجربة جيدة للمستخدم، يجب أن تسعى المواقع الإلكترونية إلى أن تكون نتيجة CLS 0.1 أو أقل. لضمان تحقيق هذا المستهدف لمعظم المستخدمين، يمكنك قياس الشريحة المئوية الخامسة والسبعين من عمليات تحميل الصفحات، مقسّمة على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي.

لمزيد من المعلومات عن البحث والمنهجية التي تستند إليها هذه الاقتراحات، اطّلِع على مقالة تحديد الحدود الدنيا لمقاييس "مؤشرات أداء الويب الأساسية".

متغيّرات التصميم بالتفصيل

يتم تحديد متغيّرات التصميم من خلال واجهة برمجة تطبيقات عدم استقرار التنسيق التي تُبلغ عن إدخالات layout-shift في أي وقت يغيِّر فيه عنصر يظهر ضمن إطار العرض موضع بدئه (على سبيل المثال، موضعه العلوي والأيسر في وضع الكتابة التلقائي) بين إطارَين. تُعتبر هذه العناصر عناصر غير مستقرة.

تجدر الإشارة إلى أنّ تغييرات التصميم لا تحدث إلا عندما تغيّر العناصر الحالية موضع البداية. إذا تمت إضافة عنصر جديد إلى نموذج العناصر في المستند (DOM) أو تغيّر حجم عنصر حالي، لا يتم احتسابه كمتغيّر تصميم طالما أنّ هذا التغيير لا يتسبب في تغيير موضع العناصر المرئية الأخرى لموضعها.

نتيجة متغيّرات التصميم

لاحتساب نتيجة متغيّرات التصميم، يفحص المتصفّح حجم إطار العرض وحركة العناصر غير الثابتة في إطار العرض بين إطارَين معروضَين. تكون نتيجة تغيُّر التنسيق ناتجة عن مقياسَين لهذه الحركة: نسبة التأثير ونسبة المسافة (يتم تحديد كليهما أدناه).

layout shift score = impact fraction * distance fraction

نسبة التأثير

يقيس النسبة المئوية للتأثير مدى تأثير العناصر غير الثابتة في مساحة إطار العرض بين إطارَين.

إنّ نسبة التأثير لأي لقطة معيّنة هي عبارة عن مجموعة من المناطق المرئية لجميع العناصر غير المستقرة في تلك اللقطة واللقطة السابقة، كنسبة من إجمالي مساحة مساحة العرض.

في الصورة السابقة، هناك عنصر يشغل نصف إطار العرض في إطار واحد. بعد ذلك، في الإطار التالي، ينتقل العنصر للأسفل بنسبة %25 من ارتفاع إطار العرض. يشير المستطيل الأحمر المنقط إلى توحيد المنطقة المرئية للعنصر في كلتا اللقطتَين، والتي تبلغ في هذه الحالة %75 من إجمالي مساحة العرض، وبالتالي فإنّ النسبة المئوية للتأثير هي 0.75.

كسر المسافة

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

في المثال السابق، يكون أكبر بُعد لإطار العرض هو الارتفاع، وقد تحرك العنصر غير الثابت بنسبة 25% من ارتفاع إطار العرض، ما يجعل كسر المسافة 0.25.

في هذا المثال، كسر التأثير هو 0.75 وكسر المسافة هو 0.25، وبالتالي تكون نتيجة متغيّرات التصميم هي 0.75 * 0.25 = 0.1875.

أمثلة

يوضّح المثال التالي كيفية تأثير إضافة محتوى إلى عنصر حالي في نتيجة تغيُّر التنسيق:

في هذا المثال، يتغيّر حجم المربّع الرمادي، ولكنّ موضع البداية لا يتغيّر، لذا فهو ليس عنصرًا غير ثابت.

لم يكن الزر "انقر عليّ" متوفّرًا في نموذج DOM سابقًا، لذا لن يتغيّر موضع بدايته أيضًا.

ومع ذلك، يتغير موضع بداية المربّع الأخضر، ولكن نظرًا لأنه قد تم نقله جزئيًا من إطار العرض، لا تتم مراعاة المنطقة غير المرئية عند حساب جزء التأثير. إنّ توحيد المناطق المرئية للمربّع الأخضر في كلا اللقطتَين (الموضَّح بالمربّع الأحمر المنقط) هو نفسه مساحة المربّع الأخضر في اللقطة الأولى، أي %50 من مساحة إطار العرض. نسبة التأثير هي 0.5.

يتم توضيح جزء المسافة بالسهم الأرجواني. تم نقل المربّع الأخضر للأسفل بنسبة% 14 تقريبًا من إطار العرض، لذا فإنّ جزء المسافة هو 0.14.

نتيجة متغيّرات التصميم هي 0.5 x 0.14 = 0.07.

يوضّح المثال التالي كيفية تأثير العناصر المتعددة غير الثابتة في نتيجة متغيّرات تصميم الصفحة:

في الإطار الأول من الصورة السابقة، تظهر أربع نتائج لطلب واجهة برمجة التطبيقات عن الحيوانات، وهي مُرتَّبة أبجديًا. في اللقطة الثانية، تتم إضافة المزيد من النتائج إلى القائمة المفهرَسة.

لا يغيّر العنصر الأول في القائمة ("قطة") موضع البداية بين اللقطات، لذا فهو ثابت. وبالمثل، فإنّ العناصر الجديدة التي تمت إضافتها إلى القائمة لم تكن في السابق في DOM، لذلك لا تتغيّر مواضع البدء الخاصة بها أيضًا. أمّا العناصر المُصنَّفة باسم "كلب" و"حصان" و"زرافة"، فتتغيّر مواضعها الأساسية، ما يجعلها عناصر غير ثابتة.

مرة أخرى، تمثّل المستطيلات الحمراء المربّعة النقاط اتحاد مناطق ما قبل وما بعد هذه العناصر غير المستقرة الثلاثة، والتي تبلغ في هذه الحالة حوالي %60 من مساحة مساحة العرض (نسبة التأثير 0.60).

تمثل الأسهم المسافات التي انتقلت إليها العناصر غير الثابتة من مواضع البداية. تحرّك عنصر "الحمار الوحشي"، الذي يمثّله السهم الأزرق، بنسبة ‎30% تقريبًا من ارتفاع إطار العرض. يصبح ذلك كسر المسافة في هذا المثال 0.3.

نتيجة متغيّرات التصميم هي 0.60 x 0.3 = 0.18.

التغيُّرات المتوقعة في التنسيق مقابل التغيُّرات غير المتوقّعة

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

تغييرات التصميم التي بدأها المستخدم

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

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

سيتم ضبط العلامة hadRecentInput على التحولات في التنسيق التي تحدث خلال 500 ملي ثانية من إدخال المستخدم، حتى يمكن استبعادها من العمليات الحسابية.

الحركات والانتقالات

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

احرص على الالتزام بإعدادات المتصفّح prefers-reduced-motion، لأنّ بعض زوّار الموقع الإلكتروني قد يواجهون تأثيرات سلبية أو مشاكل في الانتباه بسبب الصور المتحركة.

تتيح لك خاصية transform في CSS إضافة تأثيرات متحركة إلى العناصر بدون بدء عمليات تغيير التنسيق:

• بدلاً من تغيير السمتَين height وwidth، استخدِم transform: scale().
• لنقل العناصر، تجنَّب تغيير السمات top أو right أو bottom أو left واستخدِم transform: translate() بدلاً من ذلك.

كيفية قياس متغيّر التصميم التراكمية

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

الأدوات الميدانية

• تقرير تجربة المستخدم على Chrome
• PageSpeed Insights
• Search Console (تقرير "مؤشرات أداء الويب الأساسية")
• مكتبة JavaScript web-vitals

أدوات التمرين المعملي

• أدوات مطوّري البرامج في Chrome
• Lighthouse
• PageSpeed Insights
• WebPageTest

قياس متغيّرات التصميم في JavaScript

لقياس تغيُّرات التصميم في JavaScript، يمكنك استخدام واجهة برمجة تطبيقات عدم ثبات التصميم.

يوضّح المثال التالي كيفية إنشاء PerformanceObserver لتسجيل إدخالات layout-shift في وحدة التحكّم:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

قياس مقياس CLS في JavaScript

لقياس مقياس CLS في JavaScript، عليك تجميع إدخالات layout-shift غير المتوقّعة هذه في جلسات، واحتساب الحد الأقصى لقيمة الجلسة. يمكنك الرجوع إلى رمز مصدر مكتبة JavaScript web vitals الذي يحتوي على مرجع حول كيفية احتساب متغيّرات التصميم التراكمية (CLS).

في معظم الحالات، تكون قيمة CLS الحالية في وقت تفريغ الصفحة هي قيمة CLS النهائية لتلك الصفحة، ولكن هناك بعض الاستثناءات المهمة كما هو موضّح في القسم التالي. تراعي مكتبة JavaScript في web vitals هذه العوامل قدر الإمكان، ضمن قيود واجهات برمجة تطبيقات الويب.

الاختلافات بين المقياس وواجهة برمجة التطبيقات

• إذا تم تحميل صفحة في الخلفية أو إذا تم عرضها في الخلفية قبل أن يعرض المتصفّح أي محتوى، يجب ألا يتم تسجيل أي قيمة CLS.
• إذا تم استعادة صفحة من ذاكرة التخزين المؤقت للرجوع/التقدم، يجب إعادة ضبط قيمة CLS على القيمة صفر لأنّ المستخدمين يواجهون هذه الصفحة كزيارة صفحة مختلفة.
• لا تسجِّل واجهة برمجة التطبيقات إدخالات layout-shift للتغييرات التي تحدث داخل إطارات iframe، ولكن يسجِّل المقياس هذه التغييرات لأنّها جزء من تجربة المستخدم للصفحة. ويمكن أن يظهر ذلك كفرق بين CrUX وRUM. لقياس متغيّرات التصميم التراكمية (CLS) بشكل صحيح، يجب أخذها في الاعتبار. يمكن للإطارات الفرعية استخدام واجهة برمجة التطبيقات للإبلاغ عن إدخالات layout-shift إلى الإطار الرئيسي من أجل التجميع.

بالإضافة إلى هذه الاستثناءات، تتسم متغيّرات التصميم التراكمية ببعض التعقيد الإضافي لأنّها تقيس عمر الصفحة بالكامل:

• قد يبقي المستخدمون علامة تبويب مفتوحة لمدة طويلة جدًا، أي لعدة أيام أو أسابيع أو أشهر. في الواقع، قد لا يغلق المستخدم أي علامة تبويب مطلقًا.
• في أنظمة التشغيل للأجهزة الجوّالة، لا تُشغّل المتصفّحات عادةً طلبات إعادة الاتصال لتفريغ ذاكرة الصفحة في علامات التبويب التي تعمل في الخلفية، ما يجعل من الصعب الإبلاغ عن القيمة "النهائية".

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

بدلاً من حفظ كل هذه الحالات ومعالجتها بنفسك، يمكن للمطوّرين استخدام مكتبة JavaScript web-vitals لقياس متغيّرات التصميم التراكمية (CLS)، التي تراعي كل ما ورد أعلاه باستثناء حالة iframe:

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

كيفية تحسين متغيّرات التصميم التراكمية

لمزيد من الإرشادات حول تحديد عمليات تغيير التنسيق في الميدان واستخدام بيانات المختبر لتحسينها، يمكنك الاطّلاع على دليلنا حول تحسين مقياس CLS.

مراجع إضافية

• إرشادات علامة "ناشر Google" حول الحدّ من تغيُّر تصميم الإعلان
• فهم متغيّرات التصميم التراكمية بقلم آني سوليفان وستيف كوبيس في #PerfMatters (2020)

سجلّ التغييرات

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

لمساعدتك في إدارة ذلك، سيتم عرض جميع التغييرات التي تطرأ على تنفيذ هذه المقاييس أو تعريفها في سجلّ التغييرات هذا.

إذا كانت لديك ملاحظات حول هذه المقاييس، يمكنك تقديمها في مجموعة web-vitals-feedback على Google.