"متغيّرات التصميم التراكمية" (CLS) هي مقياس ثابت لمؤشرات أداء الويب الأساسية. وهو مقياس مهم يتمحور حول المستخدم لقياس الثبات البصري لأنه يساعد في تحديد عدد المرات التي يواجه فيها المستخدمون تغيّرات غير متوقعة في التصميم. إذا كانت قيمة متغيّرات التصميم التراكمية (CLS) منخفضة، نضمن أن تكون الصفحة رائعة.
يمكن أن تؤدي تغيّرات التصميم غير المتوقعة إلى حدوث مشاكل في تجربة المستخدم بعدّة طرق، تمنعه من فقدان مكانه أثناء القراءة إذا تحرك النص فجأة، ما يدفعه إلى النقر على الرابط أو الزر الخطأ. في بعض الحالات، يمكن أن يؤدي ذلك إلى ضرر جسيم.
عادةً ما تحدث الحركة غير المتوقعة لمحتوى الصفحة عند تحميل الموارد بشكل غير متزامن أو إضافة عناصر 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.
أمثلة
يوضح المثال التالي كيف تؤثر إضافة محتوى إلى عنصر موجود على درجة متغيّرات التصميم:
في هذا المثال، يتغير حجم المربع الرمادي، لكن موضع بدايته لا يتغير، لذا فهو ليس عنصرًا غير مستقر.
لم يكن الزر "Click Me!" متوفرًا في 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
تحريك العناصر بدون تشغيل متغيّرات التصميم:
- استخدِم
transform: scale()بدلاً من تغيير السمتَينheightوwidth. - لنقل العناصر، استخدِم
transform: translate()بدلاً من تغيير الخصائصtopأوrightأوbottomأوleft.
كيفية قياس متغيّرات التصميم التراكمية (CLS)
يمكن قياس متغيّرات التصميم التراكمية (CLS) في المختبر أو في المجال، وهو متاح في الأدوات التالية.
الأدوات الميدانية
- تقرير تجربة المستخدم على Chrome
- PageSpeed Insights
- Search Console (تقرير "مؤشرات أداء الويب الأساسية")
- مكتبة JavaScript
web-vitals
أدوات المختبر
قياس متغيّرات التصميم في JavaScript
لقياس متغيّرات التصميم في JavaScript، استخدِم Layout Instability API.
يوضّح المثال التالي كيفية إنشاء 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) النهائية لتلك الصفحة، ولكن هناك بعض الاستثناءات المهمة المذكورة في القسم التالي. وتراعي مكتبة JavaScript web vitals هذه البيانات قدر الإمكان، ضمن حدود واجهات برمجة تطبيقات الويب.
الاختلافات بين المقياس وواجهة برمجة التطبيقات
- إذا تم تحميل صفحة في الخلفية، أو إذا كانت تعمل في الخلفية قبل عرض المتصفّح لأي محتوى، يجب ألا يعرض المتصفّح أي قيمة متغيّرات التصميم التراكمية (CLS).
- في حال استعادة صفحة من التخزين المؤقت للصفحات، يجب إعادة ضبط قيمة متغيّرات التصميم التراكمية (CLS) على صفر لأنّ المستخدمين يواجهون ذلك كزيارة مختلفة للصفحة.
- لا تُبلِغ واجهة برمجة التطبيقات عن إدخالات
layout-shiftفي ما يتعلّق بالتحولات التي تحدث ضمن إطارات iframe، ولكن المقياس يفعل أنها جزء من تجربة المستخدم على الصفحة. ويمكن أن يظهر ذلك على أنّه الفرق بين CrUX وRUM. لقياس متغيّرات التصميم التراكمية (CLS) بشكل صحيح، يجب تضمين إطارات iframe. يمكن للإطارات الفرعية استخدام واجهة برمجة التطبيقات لإرسال تقارير إدخالاتlayout-shiftإلى الإطار الرئيسي للتجميع.
بالإضافة إلى هذه الاستثناءات، إنّ متغيّرات التصميم التراكمية (CLS) أكثر تعقيدًا لأنّه تقيس عمر الصفحة بالكامل:
- قد يظل المستخدمون علامة تبويب مفتوحة لفترة طويلة جدًا - أيام أو أسابيع أو أشهر. وفي الواقع، قد لا يغلق المستخدم علامة تبويب مطلقًا.
- في أنظمة تشغيل الأجهزة الجوّالة، لا تشغِّل المتصفّحات عادةً استدعاءات إلغاء تحميل الصفحة لعلامات التبويب في الخلفية، ما يجعل من الصعب تسجيل القيمة "النهائية".
للتعامل مع هذه الحالات، ننصح بأن يُبلغ النظام عن متغيّرات التصميم التراكمية (CLS) في أي وقت تكون فيه الصفحة
في الخلفية، بالإضافة إلى أي وقت يتم فيه إلغاء تحميلها. يتناول حدث visibilitychange كلا السيناريوهَين. ستحتاج أنظمة "إحصاءات Google" التي تتلقّى هذه البيانات
بعد ذلك إلى حساب قيمة متغيّرات التصميم التراكمية (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 الخاصة بملاحظات وآراء المستخدمين على الويب.