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