يمكن أن تؤدي تغيّرات التصميم غير المتوقّعة إلى حدوث مشاكل في تجربة المستخدم بعدّة طرق، بدءًا من فقدان الموضع أثناء القراءة إذا تحرك النص فجأة، وصولاً إلى النقر على الزر أو الرابط غير الصحيح. وفي بعض الحالات، قد يؤدي ذلك إلى حدوث ضرر جسيم.
عادةً ما تحدث حركة غير متوقعة لمحتوى الصفحة عند تحميل الموارد بشكل غير متزامن أو إضافة عناصر 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 إمكانية تحريك العناصر بدون تشغيل متغيّرات التصميم:
- بدلاً من تغيير السمتَين
heightوwidth، استخدِمtransform: scale(). - لنقل العناصر، تجنَّب تغيير الخصائص
topأوrightأوbottomأوleftواستخدِمtransform: translate()بدلاً من ذلك.
كيفية قياس متغيّرات التصميم التراكمية (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) الحالية أثناء إلغاء تحميل الصفحة هي قيمة متغيّرات التصميم التراكمية (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 الخاصة بملاحظات حول الإلكترونيات الشخصية.