خطط لتحسين مقياس متغيّرات التصميم التراكمية (CLS) ليكون أكثر ملاءمةً للصفحات التي تبقى لفترة طويلة
تاريخ النشر: 7 نيسان (أبريل) 2021
لقد حدّدنا مؤخرًا (فريق مقاييس سرعة Chrome) في أبحاثنا الأولية خيارات لجعل مقياس متغيّرات التصميم التراكمية (CLS) أكثر ملاءمةً للصفحات التي تكون مفتوحة لفترة طويلة. لقد تلقّينا الكثير من الملاحظات المفيدة للغاية، وبعد الانتهاء من إجراء التحليل على نطاق واسع، تم الانتهاء من التغيير الذي نخطط لإجرائه على المقياس: الحد الأقصى لمدة الجلسة مع وجود فجوة ثانية واحدة، وبحد أقصى 5 ثوانٍ.
يُرجى الاطّلاع على التفاصيل أدناه.
كيف قمنا بتقييم الخيارات؟
لقد راجعنا جميع الملاحظات التي تلقّيناها من منتدى المطوّرين وأخذناها بعين الاعتبار.
نفّذنا أيضًا أهم الخيارات في Chrome وأجرينا تحليلاً واسع النطاق للمقاييس على ملايين صفحات الويب. لقد تحقّقنا من أنواع المواقع الإلكترونية التي تحسّنت نتيجة كل خيار، ومدى تشابه الخيارات، ولا سيما المواقع الإلكترونية التي حصلت على نتائج مختلفة تبعًا لاختلاف الخيارات. بشكل عام، وجدنا ما يلي:
- أدى جميع الخيارات إلى تقليل الارتباط بين الوقت المستغرَق في الصفحة ونتيجة التحولات في التنسيق.
- لم يؤدّي أيّ من الخيارات إلى نتيجة أسوأ لأيّ صفحة. وبالتالي، ليس هناك داعي للقلق من أن يؤدي هذا التغيير إلى خفض نتائج موقعك الإلكتروني.
نقاط القرار
ما هو الغرض من الفترة الزمنية للجلسة؟
في مشاركتنا السابقة، تناولنا بعض الاستراتيجيات المختلفة لعرض النوافذ لتجميع متغيّرات التصميم مع ضمان عدم زيادة النتيجة بشكل غير محدود. أظهرت الملاحظات التي تلقّيناها من المطوّرين بشكلٍ كبير تفضيلهم لاستراتيجية نافذة الجلسة لأنّها تُجمِّع تغييرات التنسيق معًا بشكلٍ بسيط.
لمراجعة نوافذ الجلسات، إليك مثال:
في المثال أعلاه، تحدث العديد من متغيّرات التصميم بمرور الوقت بينما يشاهد المستخدِم الصفحة. ويتم تمثيل كلّ منها بشريط أزرق. ستلاحظ أعلاه أنّ ارتفاعات الأشرطة الزرقاء مختلفة، وهي تمثّل النتيجة لكلّ متغيّر تصميم فردي. تبدأ نافذة الجلسة بأول متغيّر تصميم وتستمر في التوسع حتى تكون هناك فجوة بدون متغيّرات التصميم. عند حدوث عملية التمرير التالي لتغيير التنسيق، تبدأ نافذة جلسة جديدة. نظرًا لوجود ثلاثة فجوات بدون متغيّرات التخطيط، هناك ثلاث نوافذ جلسات في المثال. على غرار التعريف الحالي لمقياس CLS، تتمّ إضافة نتائج كلّ تغيير، بحيث تكون نتيجة كلّ فترة زمنية هي مجموع متغيّرات التصميم الفردية.
استنادًا إلى البحث المبدئي، اخترنا فاصلًا زمنيًا مدته ثانية واحدة بين فترات الجلسات، وقد أدى هذا الفاصل الزمني إلى تحقيق نتائج جيدة في التحليل على نطاق واسع. وبالتالي، فإنّ "فترة الفاصل بين الجلسات" المعروضة في المثال أعلاه هي 1 ثانية.
ما هي أهمية الحد الأقصى لفترة الجلسة؟
لقد قلّصنا استراتيجيات ال summarizing إلى خيارَين في أبحاثنا الأولية:
- متوسط النتيجة لجميع فترات الجلسات، بالنسبة إلى فترات الجلسات الكبيرة جدًا (النوافذ غير المحدودة مع فجوات مدتها 5 ثوانٍ بينها).
- أعلى نتيجة لجميع فترات الجلسات، لفترات الجلسات الأقصر (الحد الأقصى هو 5 ثوانٍ، مع فواصل تبلغ ثانية واحدة بينها).
بعد البحث الأولي، أضفنا كل مقياس إلى Chrome حتى نتمكن من إجراء تحليل واسع النطاق على الملايين من عناوين URL. وفي التحليل على نطاق واسع، وجدنا الكثير من عناوين URL التي تحتوي على أنماط متغيّرات التصميم مثل هذا:
في أسفل يسار الشاشة، يمكنك ملاحظة حدوث تغيير بسيط في التنسيق في نافذة الجلسة 2، ما يمنح الجلسة نتيجة منخفضة جدًا. وهذا يعني أنّ متوسط النتيجة منخفض جدًا. ولكن ماذا لو أصلح المطور هذا التحول البسيط في التصميم؟ وبعد ذلك، يتم احتساب النتيجة فقط في فترة الجلسة 1، وهو ما يعني أن نتيجة الصفحة تتضاعف تقريبًا. سيكون من المحير والمثبط للمشاعر أن يبذل المطوّرون جهدًا لتحسين عمليات تغيير التنسيق ليكتشفوا أنّ النتيجة قد ساءت. ومن الواضح أنّ إزالة هذا التحول في التصميم الصغير أفضل قليلاً بالنسبة إلى تجربة المستخدم، لذلك لن يؤدي ذلك إلى خفض النتيجة.
بسبب هذه المشكلة في المتوسطات، قرّرنا المتابعة باستخدام فترات أصغر حجمًا وعددًا محدودًا من القيم القصوى. لذلك في المثال أعلاه، سيتم تجاهل فترة الجلسة 2 وسيتم إعداد تقرير عن مجموع متغيّرات التصميم في فترة الجلسة 1 فقط.
لماذا 5 ثوانٍ؟
لقد قيّمنا أحجام النوافذ المتعددة وتبيّن لنا أمران:
- بالنسبة إلى الفترات القصيرة، يمكن أن يؤدي تحميل الصفحات الأبطأ والاستجابة الأبطأ لتفاعلات المستخدم إلى تقسيم متغيّرات التصميم إلى نوافذ متعددة وتحسين النتيجة. أردنا إبقاء النافذة كبيرة بما يكفي حتى لا تؤدي إلى تباطؤ الأداء.
- تتضمّن بعض الصفحات تدفقًا مستمرًا من متغيّرات التصميم الصغيرة. على سبيل المثال، صفحة نتائج الرياضة تتغير قليلاً مع كل تحديث للنتيجة. إنّ هذه التغييرات مزعجة، ولكنّها لا تزداد إزعاجًا مع مرور الوقت. لذلك أردنا التأكّد من ضبط الحد الأقصى للنافذة لهذه الأنواع من متغيّرات التصميم.
بعد أخذ هذين الأمرين في الاعتبار، قارَنّا بين مجموعة متنوعة من أحجام النوافذ على العديد من صفحات الويب في العالم الواقعي، وتوصّلنا إلى أنّ 5 ثوانٍ ستكون حدًا جيدًا لحجم النافذة.
كيف سيؤثّر ذلك في نتيجة CLS لصفحتي؟
وبما أنّ هذا التعديل يحدّ من متغيّرات التصميم التراكمية للصفحة، لن تحصل أي صفحة على نتيجة أسوأ نتيجةً لهذا التغيير.
واستنادًا إلى تحليلنا، لن تشهد% 55 من المصادر تغييرًا في متغيّرات التصميم التراكمية على الإطلاق في الشريحة المئوية الخامسة والسبعين. ويعود السبب في ذلك إلى أنّ صفحاتهم لا تتضمّن حاليًا أيّ تغييرات في التنسيق أو أنّ التغييرات التي تتضمّنها تقتصر على نافذة جلسة واحدة.
مع تطبيق هذا التغيير، ستشهد بقية المصادر نتائج محسّنة عند الشريحة المئوية الخامسة والسبعين. سيلاحظ معظم المواقع الإلكترونية تحسّنًا طفيفًا فقط، ولكن سيلاحظ حوالي% 3 من المواقع تحسّنًا في نتائجها من "بحاجة إلى تحسين" أو "بطيء" إلى "جيّد". وتميل هذه الصفحات إلى استخدام أدوات التمرير اللامتناهي أو تتضمّن العديد من التعديلات البطيئة على واجهة المستخدم، كما هو موضّح في مقالتنا السابقة.
كيف يمكنني تجربة هذه الميزة؟
سنعدّل أدواتنا لاستخدام تعريف المقياس الجديد قريبًا. وحتى ذلك الحين، يمكنك تجربة الإصدار المعدَّل من متغيّرات التصميم التراكمية (CLS) على أي موقع إلكتروني باستخدام أمثلة على عمليات تنفيذ JavaScript أو إضافة شوكة "مؤشرات أداء الويب".
نشكر جميع مَن خصّصوا بعض الوقت لقراءة المشاركة السابقة وتقديم ملاحظاتهم.