اطّلِع على خططنا لتحسين مقياس "متغيّرات التصميم التراكمية" وقدِّم لنا ملاحظاتك.
متغيّرات التصميم التراكمية (CLS) هي مقياس يقيس الثبات البصري لصفحة الويب. يُطلق على المقياس اسم "متغيّرات التصميم التراكمية" لأنّه يتم تجميع نتيجة كل تغيير فردي على مدار عمر الصفحة.
على الرغم من أنّ جميع عمليات تغيير التنسيق تؤدي إلى تجربة سيئة للمستخدمين، إلا أنّها تؤثر بشكل أكبر في الصفحات التي تظل مفتوحة لفترة أطول. لهذا السبب، سعى فريق مقاييس السرعة في Chrome إلى تحسين مقياس متغيّرات التصميم التراكمية (CLS) ليكون أكثر حيادية بالنسبة إلى الوقت الذي يقضيه المستخدمون على الصفحة.
من المهم أن يركز المقياس على تجربة المستخدم طوال مدة عرض الصفحة بالكامل، لأنّنا تبيّن لنا أنّ المستخدمين غالبًا ما يواجهون تجارب سلبية بعد التحميل، أثناء الانتقال إلى الأسفل أو الأعلى في الصفحات أو التنقّل بينها. ولكننا تلقّينا مخاوف بشأن تأثير ذلك في الصفحات التي تبقى مفتوحة لفترة طويلة، وهي الصفحات التي يبقيها المستخدم مفتوحة بشكل عام لفترة طويلة. هناك عدة أنواع مختلفة من الصفحات التي تبقى مفتوحة لفترة أطول، ومن أكثرها شيوعًا تطبيقات وسائل التواصل الاجتماعي التي تتضمّن ميزة التمرير اللانهائي وتطبيقات الصفحة الواحدة.
أظهر تحليل داخلي للصفحات التي تظل ظاهرة لفترة طويلة والتي تحقّق نتائج عالية لمقياس CLS أنّ معظم المشاكل ناتجة عن الأنماط التالية:
- العناصر التي تستخدم ميزة "التمرير اللا نهائي" لتغيير المحتوى أثناء انتقال المستخدم إلى أسفل الصفحة
- تستغرق معالجات الإدخال أكثر من 500 ملي ثانية لتعديل واجهة المستخدم استجابةً لتفاعل المستخدم، بدون أي نوع من العنصر النائب أو نمط الهيكل.
وبينما نشجّع المطوّرين على تحسين تجارب المستخدمين هذه، نعمل أيضًا على تحسين المقياس والبحث عن ملاحظات بشأن الأساليب الممكنة.
كيف يمكننا تحديد ما إذا كان المقياس الجديد أفضل؟
قبل الخوض في تصميم المقاييس، أردنا التأكّد من تقييم أفكارنا على مجموعة كبيرة من صفحات الويب وحالات الاستخدام في العالم الواقعي. في البداية، صمّمنا دراسة صغيرة حول المستخدمين.
أولاً، سجّلنا فيديوهات وعمليات تتبُّع في Chrome لـ 34 رحلة مستخدِم على مواقع إلكترونية مختلفة. عند اختيار رحلات المستخدِمين، سعينا إلى تحقيق بعض الأهداف:
- مجموعة متنوعة من أنواع المواقع الإلكترونية المختلفة، مثل المواقع الإخبارية ومواقع التسوّق
- مجموعة متنوعة من تجارب المستخدِمين، مثل التحميل الأوّلي للصفحة، والانتقال للأعلى أو للأسفل، والتنقّل في صفحات التطبيق الفردية، وتفاعلات المستخدِمين
- مجموعة متنوعة من متغيّرات التصميم الفردية وشدتها على المواقع الإلكترونية.
- تجارب سلبية قليلة على المواقع الإلكترونية باستثناء تغييرات التنسيق
طلبنا من 41 من زملائنا مشاهدة فيديوهَين في الوقت نفسه وتقييم أيّ منهما كان أفضل من حيث تغيير التنسيق. استنادًا إلى هذه التقييمات، أنشأنا ترتيبًا مثاليًا للمواقع الإلكترونية. أكّدت نتائج ترتيب المستخدمين شكوكنا بأنّ زملائنا، مثل معظم المستخدمين، يشعرون بالانزعاج من تغييرات التصميم بعد التحميل، خاصةً أثناء الانتقال إلى الأسفل أو الأعلى والتنقّل في صفحات التطبيق الفردية. تبيّن لنا أنّ بعض المواقع الإلكترونية تقدّم تجارب أفضل للمستخدمين أثناء هذه الأنشطة مقارنةً بالمواقع الأخرى.
بما أنّنا سجّلنا عمليات تتبُّع Chrome مع الفيديوهات، حصلنا على جميع تفاصيل التحولات الفردية في التنسيق في كل رحلة مستخدِم. واستخدمنا هذه المقاييس لاحتساب قيم المقاييس لكل فكرة لكل رحلة مستخدِم. وسمح لنا ذلك بمعرفة كيفية ترتيب كل صيغة للمقياس تجارب المستخدمين، ومدى اختلاف كل صيغة عن الترتيب المثالي.
ما هي أفكار المقاييس التي اختبرناها؟
استراتيجيات عرض الإعلانات
غالبًا ما تتضمّن الصفحات عدّة تغييرات في التصميم تكون قريبة من بعضها، لأنّ العناصر يمكن أن تتغيّر عدّة مرات مع ظهور المحتوى الجديد بشكل تدريجي. دفعنا ذلك إلى تجربة تقنيات لتجميع النوبات معًا. لتحقيق ذلك، اطّلعنا على ثلاثة طرق لعرض النوافذ:
- النوافذ المتدحرجة
- النوافذ المنزلقة
- فترات الجلسات
في كلّ من هذه الأمثلة، تتضمّن الصفحة تغييرات في التصميم بدرجات متفاوتة من الخطورة بمرور الوقت. يمثّل كلّ شريط أزرق تغيير تصميم واحدًا، ويمثّل طوله النتيجة لهذا التغيير. توضّح الصور الطرق التي تجمع بها استراتيجيات ضبط النوافذ المختلفة متغيّرات التصميم بمرور الوقت.
النوافذ المتدحرجة
أبسط طريقة هي تقسيم الصفحة إلى نوافذ تتضمّن أجزاء متساوية الحجم. تُسمى هذه النوافذ المعطلة. ستلاحظ أعلاه أنّه يبدو أنّه يجب تجميع الشريط الرابع في النافذة الثانية للعرض المتغيّر، ولكن بما أنّ جميع النوافذ ذات حجم ثابت، يظهر الشريط في النافذة الأولى بدلاً من ذلك. في حال كانت هناك اختلافات طفيفة في توقيت عمليات التحميل أو تفاعلات المستخدمين على الصفحة، قد تقع متغيّرات التصميم نفسها على جوانب مختلفة من حدود النوافذ المهدورة.
النوافذ المنزلقة
إنّ أحد النهج التي تتيح لنا الاطّلاع على المزيد من المجموعات المحتمَلة ذات الطول نفسه هو تعديل النافذة المحتمَلة باستمرار بمرور الوقت. تعرض الصورة أعلاه نافذة منزلقة واحدة في كل مرة، ولكن يمكننا الاطّلاع على جميع النوافذ المنزلقة المحتملة أو مجموعة فرعية منها لإنشاء مقياس.
فترات الجلسات
إذا أردنا التركيز على تحديد مناطق الصفحة التي تتضمّن نوبات من تغييرات التنسيق، يمكننا بدء كل نافذة عند تغيير التنسيق، ومواصلة توسيعها إلى أن نصادف فجوة بحجم معيّن بين تغييرات التنسيق. يجمع هذا النهج تغييرات التنسيق معًا ويتجاهل معظم تجربة المستخدم غير المتغيّرة. ومن بين المشاكل المحتملة أنّه في حال عدم توفّر فجوات في تغييرات التصميم، يمكن أن يزداد مقياس يستند إلى فترات الجلسات بشكل غير محدود تمامًا مثل مقياس CLS الحالي. لذلك جرّبنا ذلك مع الحد الأقصى لحجم النافذة أيضًا.
أحجام النوافذ
قد يقدّم المقياس نتائج مختلفة جدًا حسب حجم النوافذ الفعلي، لذلك جرّبنا أحجامًا متعددة مختلفة للنوافذ:
- كل نوبة عمل في نافذة منفصلة (بدون نوافذ)
- 100 ملي ثانية
- 300 ملي ثانية
- ثانية واحدة
- ٥ ثوانٍ
تلخيص
لقد جرّبنا العديد من الطرق لتلخيص النوافذ المختلفة.
النِسب المئوية
لقد اطّلعنا على الحد الأقصى لقيمة النافذة، بالإضافة إلى الشريحة المئوية التسعون والشريحة المئوية الخامسة والسبعين والمتوسّط.
متوسط
لقد اطّلعنا على متوسط قيمة النافذة.
الميزانيات
فكّرنا في ما إذا كان هناك حدّ أدنى لنتيجة تغيُّر التنسيق لن يلاحظه المستخدمون، وهل يمكننا احتساب تغيُّرات التنسيق التي تتجاوز هذا "المبلغ" في النتيجة. لذلك بالنسبة إلى قيم "الميزانية" المحتملة المختلفة، نظرنا في النسبة المئوية للتحولات على الميزانية، وإجمالي نتيجة التحوّل على الميزانية.
استراتيجيات أخرى
لقد اطّلعنا أيضًا على العديد من الاستراتيجيات التي لا تتضمّن فترات زمنية، مثل إجمالي التغيُّر في التصميم مقسومًا على الوقت الذي يقضيه المستخدمون على الصفحة، ومتوسّط أسوأ التغيُّرات الفردية لعدد معيّن من المستخدمين.
النتائج الأولية
بشكل عام، اختبرنا 145 تعريفًا مختلفًا للمقاييس استنادًا إلى ترتيبات الأفكار المذكورة أعلاه. بالنسبة إلى كل مقياس، صنّفنا جميع تجارب المستخدِمين حسب نتيجتهم في المقياس، ثم صنّفنا المقاييس حسب مدى قربها من الترتيب المثالي.
للحصول على مرجع، صنّفنا أيضًا جميع المواقع الإلكترونية حسب نتيجة CLS الحالية. حصلت CLS على المركز 32، بالتساوي مع 13 استراتيجية أخرى، لذا كانت أفضل من معظم صيغ الاستراتيجيات المذكورة أعلاه. للتأكد من أن النتائج كانت ذات مغزى، أضفنا أيضًا ثلاثة ترتيبات عشوائية. كما هو متوقّع، حقّقت الترتيبات العشوائية أداءً أسوأ من كلّ استراتيجية تم اختبارها.
لمعرفة ما إذا كان قد تمّ تدريب النموذج بشكلٍ مفرط على مجموعة البيانات، سجّلنا بعد التحليل بعض الفيديوهات الجديدة وعمليات التتبّع لتغيُّر التنسيق، وصنّفنا هذه الفيديوهات يدويًا، وتبيّن لنا أنّ ترتيبات المقاييس كانت متشابهة جدًا لكلّ من مجموعة البيانات الجديدة ومجموعة البيانات الأصلية.
برزت بعض الاستراتيجيات المختلفة في التصنيفات.
أفضل الاستراتيجيات
عند ترتيب الاستراتيجيات، تبيّن لنا أنّ ثلاثة أنواع من الاستراتيجيات تصدّرت القائمة. سجّل كلّ منها الأداء نفسه تقريبًا، لذا نخطّط للمضي قدمًا من خلال إجراء تحليل أعمق لكلّ من الحملات الثلاث. ونريد أيضًا معرفة ملاحظات المطوّرين لمعرفة ما إذا كانت هناك عوامل أخرى غير تجربة المستخدم يجب أخذها في الاعتبار عند الاختيار بين الإصدارَين. (اطّلِع أدناه على كيفية تقديم الملاحظات).
النِسب المئوية العالية للنوافذ الطويلة
أثبتت بعض استراتيجيات وضع الإعلانات على النوافذ نجاحها مع أحجام النوافذ الطويلة:
- تمرير النوافذ لمدة ثانية واحدة
- الحد الأقصى لفترات الجلسات هو 5 ثوانٍ مع فاصل زمني يبلغ ثانية واحدة
- نوافذ الجلسات غير محددة مع فجوة مدتها ثانية واحدة
وقد حقّقت جميع هذه التطبيقات أداءً جيدًا في كلّ من الشريحة المئوية التسعون والحدّ الأقصى.
ولكن بالنسبة إلى أحجام النوافذ الكبيرة هذه، كنّا قلقين بشأن استخدام الشريحة المئوية التسعون، فغالبًا ما كنّا ننظر إلى 4 إلى 6 نوافذ فقط، واستخدام الشريحة المئوية التسعون منها يتطلّب الكثير من الاستقراء. من غير الواضح ما تفعله الاستقراء من حيث قيمة المقياس. إنّ الحد الأقصى للقيمة أكثر وضوحًا، لذلك قرّرنا المتابعة والتحقّق من الحد الأقصى.
متوسط فترات الجلسات التي تتضمن فجوات طويلة
أدى احتساب متوسط نتائج جميع فترات الجلسات غير المحدودة بفواصل زمنية تبلغ 5 ثوانٍ إلى تحقيق أداء جيد جدًا. تتمتع هذه الإستراتيجية ببعض الخصائص المثيرة للاهتمام:
- إذا لم تكن هناك فواصل بين تغييرات التصميم في الصفحة، سينتهي الأمر بتسجيل جلسة طويلة واحدة بنتيجة مطابقة تمامًا لقيمة مقياس متغيّرات التصميم التراكمية (CLS) الحالية.
- لم يأخذ هذا المقياس وقت التوقف في الاعتبار مباشرةً، بل كان ينظر فقط إلى عمليات التنقّل التي حدثت على الصفحة، وليس إلى النقاط الزمنية التي لم تكن فيها الصفحة تتغيّر.
النسب المئوية العالية للنوافذ القصيرة
حصلت النافذة المتحركة القصوى التي تبلغ مدتها 300 ملي ثانية على ترتيب عالٍ جدًا، بالإضافة إلى الشريحة المئوية التسعون. بالنسبة إلى حجم النافذة الأقصر، يكون هناك تداخل أقل للنسب المئوية مقارنةً بحجم النوافذ الأكبر، ولكننا كنا قلقين أيضًا بشأن النوافذ المنزلقة "المتكررة". إذا حدثت مجموعة من عمليات تغيير التنسيق على مدار لقطاتَين، تكون هناك عدة فترات زمنية تبلغ 300 ملي ثانية تتضمّن هذه النوافذ. إنّ استخدام الحد الأقصى أكثر وضوحًا وبساطة من استخدام النسبة المئوية التسعون. لذلك قرّرنا مرة أخرى المتابعة للتحقّق من الحدّ الأقصى.
الاستراتيجيات التي لم تنجح
أما الاستراتيجيات التي حاولت الاطّلاع على "متوسط" تجربة الوقت الذي تمّ قضاؤه بدون تغييرات في التنسيق وتغييرات في التنسيق، فلم تحقّق أداءً جيدًا على الإطلاق. لم تُصنِّف أيّ من ملخّصات المتوسط أو الشريحة المئوية الـ 75 لأيّ استراتيجية لعرض الإعلانات على الويب المواقع الإلكترونية بشكلٍ جيد. ولم يتغيّر مجموع متغيّرات التصميم بمرور الوقت.
لقد قيّمنا عددًا من "الميزانيات" المختلفة لتغييرات التنسيق المقبولة:
- النسبة المئوية لتغيُّرات التنسيق أعلى من بعض الميزانيات بالنسبة إلى ميزانيات مختلفة، حصلت هذه العلامات التجارية على ترتيب منخفض جدًا.
- متوسّط تغيُّر التنسيق أعلى من بعض القيم الزائدة لم تحقّق معظم الصيغ لهذه الاستراتيجية أداءً جيدًا، ولكن كان متوسّط الزيادة على مدار جلسة طويلة مع فجوة كبيرة جيدًا تقريبًا مثل متوسّط فترات الجلسات التي تتضمّن فجوات طويلة. قررنا المضي قدمًا مع الخيار الأخير فقط لأنه أبسط.
الخطوات التالية
تحليل على نطاق أوسع
لقد نفّذنا أهم الاستراتيجيات المذكورة أعلاه في Chrome، حتى نتمكّن من الحصول على بيانات عن الاستخدام الفعلي لمجموعة أكبر بكثير من المواقع الإلكترونية. ونخطّط لاستخدام نهج مماثل لترتيب المواقع الإلكترونية استنادًا إلى نتائج المقاييس لإجراء التحليل على نطاق أوسع:
- ترتيب جميع المواقع الإلكترونية حسب مقياس CLS، وحسب كل مقياس جديد مُقترَح
- ما هي المواقع الإلكترونية التي يتم ترتيبها بشكل مختلف جدًا حسب مقياس CLS وكل مرشّح؟ هل نجد أي شيء غير متوقّع عند الاطّلاع على هذه المواقع الإلكترونية؟
- ما هي أكبر الاختلافات بين المقاييس الجديدة المقترحة؟ هل هناك أي اختلافات بارزة تُظهر مزايا أو عيوب مرشح معيّن؟
- كرر التحليل أعلاه، مع التجميع حسب الوقت المستغرَق في كل تحميل صفحة. هل نلاحظ تحسّنًا متوقّعًا في عمليات تحميل الصفحات التي تستغرق وقتًا طويلاً مع حدوث تغيير مقبول في التنسيق؟ هل نرى أي نتائج غير متوقعة للصفحات القصيرة الأجل؟
ملاحظات حول نهجنا
ويسعدنا تلقّي ملاحظات وآراء من مطوّري الويب حول هذه الأساليب. في ما يلي بعض النقاط التي يجب أخذها في الاعتبار عند التفكير في الأساليب الجديدة:
الجوانب التي لن تتأثّر
نريد أن نوضّح أنّه لن يحدث تغيير كبير في بعض الأمور:
- لا تغيّر أي من أفكار المقاييس طريقة احتساب نتائج متغيّرات التصميم للّقطات الفردية، بل تغيّر فقط الطريقة التي نلخّص بها اللقطات المتعدّدة. وهذا يعني أنّ JavaScript API لعمليات تغيير التنسيق ستظلّ كما هي، ولن تتغيّر أيضًا الأحداث الأساسية في عمليات تتبُّع Chrome التي تستخدمها أدوات المطوّرين، لذا سيستمرّ عمل عمليات تتبُّع تغيير التنسيق في أدوات مثل WebPageTest و"أدوات مطوّري البرامج في Chrome" بالطريقة نفسها.
- سنواصل العمل بجدّ على تسهيل استخدام المقاييس للمطوّرين، بما في ذلك تضمينها في مكتبة web-vitals وتوثيقها على web.dev والإبلاغ عنها في أدوات المطوّرين، مثل Lighthouse.
المفاضلات بين المقاييس
تلخّص إحدى أهم الاستراتيجيات فترات تغيير التنسيق كمتوسط، وتُبلغ الاستراتيجيات الأخرى عن الحد الأقصى لفترة التغيير. بالنسبة إلى الصفحات التي تكون مفتوحة لفترة طويلة جدًا، من المرجّح أن يُظهر المتوسط قيمة أكثر تمثيلاً، ولكن بشكل عام، من المرجّح أن يكون من الأسهل على المطوّرين اتّخاذ إجراء بشأن نافذة واحدة، إذ يمكنهم تسجيل وقت حدوثها والعناصر التي تمّ نقلها وما إلى ذلك. يهمّنا معرفة الملاحظات والآراء حول الميزات الأكثر أهمية بالنسبة إلى المطوّرين.
هل تجد التمرير أو نوافذ الجلسات أسهل في الفهم؟ هل هذه الاختلافات مهمة بالنسبة إليك؟
كيفية تقديم تعليقات
يمكنك تجربة مقاييس تغيُّر المخطّط الجديدة على أيّ موقع إلكتروني باستخدام أمثلة على عمليات تنفيذ JavaScript أو نسخة من إضافة "مؤشرات أداء الويب الأساسية".
يُرجى إرسال ملاحظاتك عبر البريد الإلكتروني إلى مجموعة Google ضمن web-vitals-feedback، مع كتابة "[مقاييس متغيّرات التصميم]" في سطر الموضوع. نحن نتطلّع إلى معرفة رأيك.