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