Cumulative Layout Shift (CLS)

Milica Mihajlija

Philip Walton

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

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

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

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

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

ما هي متغيّرات التصميم التراكمية (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.

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

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

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

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

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

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

متغيّرات التصميم المتوقّعة مقابل متغيّرات التصميم غير المتوقّعة

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

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

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

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

سيتم ضبط العلامة hadRecentInput في متغيّرات التصميم التي تحدث خلال 500 مللي ثانية من البيانات التي يُدخلها المستخدم، وذلك حتى يمكن استبعادها من العمليات الحسابية.

الصور المتحركة والانتقالات

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

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

تتيح لك سمة CSS transform إمكانية تحريك العناصر بدون تفعيل متغيّرات التصميم:

• بدلاً من تغيير السمتَين 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).

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

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

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

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

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

لمعالجة هذه الحالات، يجب الإبلاغ عن متغيّرات التصميم التراكمية (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)

لمزيد من الإرشادات حول تحديد متغيّرات التصميم في المجال واستخدام البيانات الاختبارية لتحسينها، اطّلِع على دليل تحسين متغيّرات التصميم التراكمية (CLS).

مراجع إضافية

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

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

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

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

إذا كانت لديك ملاحظات بشأن هذه المقاييس، يمكنك تقديمها في مجموعة Google الخاصة بملاحظات مؤشرات أداء الويب.