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