تطوّر متغيّرات التصميم التراكمية في أدوات الويب

بدءًا من اليوم، تمّ تطبيق تغيير على متغيّرات التصميم التراكمية (CLS) على عدد من مساحات عرض أدوات الويب في Chrome، بما في ذلك Lighthouse و"إحصاءات PageSpeed" وتقرير تجربة المستخدم على Chrome.

Addy Osmani

Elizabeth Sweeny

نرغب اليوم في إطلاعكم على كيفية تطوير قياس متغيّرات التصميم التراكمية (CLS) مقياس في عدد من مساحات عرض أدوات الويب في Chrome. بالنسبة إلى المطورين، ستعكس هذه التغييرات بشكل أفضل تجربة المستخدم في الصفحات الطويلة الأمد (مثل التطبيقات التي تحتوي على تمرير لا نهائي أو تطبيقات من صفحة واحدة). سيتم طرح هذه التعديلات على متغيّرات التصميم التراكمية (CLS) على أدوات تشمل Lighthouse إحصاءات PageSpeed وتقرير تجربة المستخدم على Chrome

نتمنى جميعًا أن نرى تغيُّرات أقل في التصميم على الويب. هذا هو المكان الذي أثبت فيه مقياس متغيّرات التصميم التراكمية (CLS) فائدته في قياس الثبات البصري لصفحة الويب. ويساعد ذلك في تشجيع المواقع الإلكترونية على ضبط أبعاد المحتوى بشكل أفضل مثل الصور أو الإعلانات التي قد تساهم في عرض قفزات مفاجئة في المحتوى للمستخدمين

يُطلق على المقياس اسم "تراكمي" لأن نتيجة كل نوبة عمل فردية يتم جمعها طوال عمر الصفحة. وعلى الرغم من أنّ جميع متغيّرات التصميم على الويب تتسبب في تجارب مستخدم سيئة، مع الصفحات طويلة الأمد، مثل تطبيقات الصفحة الواحدة (SPA) أو تطبيقات التمرير اللانهائي، تتراكم بشكل طبيعي المزيد من متغيّرات التصميم التراكمية (CLS) بمرور الوقت. من خلال تقييد تجميع البيانات في أسوأ "نافذة" من التحولات، يمكن الآن قياس متغيّرات التصميم التراكمية (CLS) بشكل أكثر اتساقًا بغض النظر عن مدة الجلسة.

كما أعلنّا في تطوير مقياس متغيّرات التصميم التراكمية (CLS)، نحن بصدد تعديل مقياس متغيّرات التصميم التراكمية (CLS) إلى الحد الأقصى لمدة الجلسة مع فجوة تبلغ ثانية واحدة، وبحد أقصى 5 ثوانٍ يعكس هذا التحديث تجربة المستخدم بشكل أفضل مع الصفحات التي تدوم طويلاً. ومع تطبيق هذا التغيير، %70 من المصادر لا تتوقع حدوث أي تغيير في متغيّرات التصميم التراكمية (CLS) عند الشريحة المئوية الخامسة والسبعين. وستشهد الـ 30% المتبقية من المصادر تحسنًا.

طرح تعديل النافذة على متغيّرات التصميم التراكمية (CLS)

لقد تحدثنا عن تعريف متغيّرات التصميم التراكمية (CLS) المُعدَّل وهو الحد الأقصى لمدة الجلسة مع وجود فجوة مدتها ثانية واحدة، يبلغ الحد الأقصى 5 ثوانٍ. ماذا يعني ذلك بالنسبة للأدوات؟

بدءًا من اليوم، تم طرح هذا التغيير في متغيّرات التصميم التراكمية (CLS) على عدد من مساحات عرض أدوات الويب في Chrome، بما في ذلك Lighthouse و"إحصاءات PageSpeed" و"تقرير تجربة المستخدم على Chrome" يمكنك الاطّلاع أدناه على ملخّص لعملية طرح تعديل نافذة متغيّرات التصميم التراكمية (CLS). بالإضافة إلى الأدوات التي لا تزال توفّر إمكانية قياس الأداء مقابل التنفيذ الأصلي.

سيتم قريبًا تحديث "أدوات مطوري البرامج في Chrome" لكي تتوافق مع إمكانية تعديل النوافذ. تم أيضًا إجراء تعديل على متغيّرات التصميم التراكمية (CLS) في Search Console وسيتم تطبيقه اعتبارًا من 1 حزيران (يونيو) 2021.

بالنسبة لمعظم المطورين، ومن المتوقع أن يتم هذا التغيير بسلاسة بدون الحاجة إلى اتخاذ أي إجراء للاستفادة من البيانات الناتجة عن الإصلاح.

"قديم" CLS

للتذكير، "القديم" تقيس متغيّرات التصميم التراكمية (CLS) متغيّرات التصميم على مدار فترة الصفحة بأكملها. وبما أنّ بعض المطوّرين قد يفضّلون مراقبة التعريف القديم لمتغيّرات التصميم التراكمية (CLS) إلى جانب تسوية ضبط الفترة الزمنية، نحمل لك أخبارًا سارّة، وهي أنّنا نكشف عن "متغيّرات التصميم التراكمية" (CLS) القديمة. في Lighthouse وCrUX.

في Lighthouse v8، إنه متوفر في JSON audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift

ستجد أنه experimental_uncapped_cumulative_layout_shift في واجهة برمجة تطبيقات CrUX experimental.uncapped_cumulative_layout_shift في CrUX في BigQuery.

بعد 1 حزيران (يونيو)، ستعرض طلبات البيانات من واجهة برمجة التطبيقات في CrUX، "متغيّرات التصميم التراكمية" (CLS) القديمة. المقياس:

{
  "origin": "https://web.dev",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

وبعد 8 حزيران (يونيو)، سيتم تطبيق ما يلي: CrUX في BigQuery سنقارن بين متغيّرات التصميم التراكمية القديمة والجديدة:

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

بإمكانك مواصلة الاعتماد على هذه البيانات وتوفّرها لفترة تصل إلى 6 أشهر. باستخدام "متغيّرات التصميم التراكمية القديمة" نهائيًا في 14 كانون الأول (ديسمبر) 2021.

تعديل ترجيح متغيّرات التصميم التراكمية (CLS) في Lighthouse

عندما تم تقديم متغيّرات التصميم التراكمية (CLS) لأول مرة في Lighthouse، كان مقياسًا جديدًا ومشرقًا. وبناءً على ذلك، لضمان حصول المطوّرين على الوقت الكافي لاختبار مقاييس الأداء وإجراء تحسين وفقًا لها، ازدادت أهمية متغيّرات التصميم التراكمية (CLS) في نتيجة الأداء.

الآن، بعد الحصول على بعض الوقت في أيدي المطورين، زادت نتيجة أداة Lighthouse من متغيّرات التصميم التراكمية (CLS) من% 5 إلى %15 متسقة مع منهجية تحديد مؤشرات Core Web Vitals هي المقاييس الأكثر ترجيحًا في نتيجة Lighthouse.

يمكنك العثور على القيم المقدّرة للمقاييس في الإصدار 8 من Lighthouse في حاسبة النتائج.

إنّ تنفيذ متغيّرات التصميم التراكمية (CLS) في Lighthouse 8.0 يشمل المساهمة في عرض متغيّرات التصميم التراكمية (CLS) ومتغيّرات التصميم التراكمية (CLS) من الإطارات الفرعية. قبل الإصدار 8.0، لم تتضمّن متغيّرات التصميم التراكمية في Lighthouse الإطارات الفرعية متغيّرات التصميم التراكمية (CLS) في حساب المقاييس لكنها أصبحت الآن كذلك. للتأكيد فقط، تعالج أيضًا متغيّرات التصميم التراكمية (CLS) التي تقيسها CrUX أيضًا النوافذ والإطارات الفرعية على نحو مشابه.

ومع ذلك، يتمثل الاختلاف الأساسي بين مختبر ومتغيّرات التصميم التراكمية (CLS) في أن نافذة الملاحظة في متغيّرات التصميم التراكمية في المختبر تنتهي بـ "محمّلة بالكامل" كما هو محدد بموجب ظروف المختبر، بينما تمتد نافذة الملاحظة في الميدان إلى عمر الصفحة بالكامل، بما في ذلك نشاط ما بعد التحميل. ومع ذلك، يخفّف تعديل النوافذ من هذا الاختلاف بشكل كبير.

القياس في المجال بنفسك

لقياس آخر عملية تنفيذ لمتغيّرات التصميم التراكمية (CLS)، يمكنك أيضًا تسجيل ذلك لبيانات الحقل من خلال RUM باستخدام مقتطف PerformanceObserver التالي.

أو من خلال الاعتماد مباشرةً على مكتبة JavaScript لمؤشرات أداء الويب والتي تم تعديلها أيضًا بهذا التغيير.

تعديلات إضافية

بالإضافة إلى التحديثات التي تم إجراؤها على "متغيّرات التصميم التراكمية"، تمّ أيضًا إجراء التعديلات التالية المتعلّقة بالمقاييس على أدوات الويب:

• نحن نجري التحديث إلى أحدث تعريف لمقياس "سرعة عرض أكبر محتوى مرئي". سيتم تحديث واجهة برمجة التطبيقات CrUX API وPSI وPSI API وSearch Console في 1 حزيران (يونيو) 2021. سيتم تحديث CrUX في BigQuery في 8 حزيران (يونيو) 2021.
• في CrUX، تم تعديل حدود تجميع أول محتوى مرئي بحيث تكون جيد: [0-1.8 ثانية]، بحاجة إلى تحسين: (1.8 ثانية إلى 3 ثوانٍ)، ضعيف: [3s-∞]

الاستنتاجات

ونتوقع أن يعكس هذا التغيير انتقالاً سلسًا لمعظم المواقع، ونشجعك على الاطّلاع على مؤشرات أداء الويب تحسين متغيّرات التصميم التراكمية للحصول على نصائح وحيلاً حول كيفية قياس متغيّرات التصميم وتحسينها. كالعادة، لا تتردد في التواصل معنا على مجموعة ملاحظات حول مؤشرات أداء الويب للحصول على تعليقات حول المقاييس ومنتديات التعليقات الخاصة بالأدوات Lighthouse و تقرير تجربة المستخدم في Chrome لمشاكل الأدوات. طاب يومك!

نشكر كل من "يوهانس هينكل" و"ريك فيسكومي" و"فيفيك سيكار" و"راشيل أندرو" و"ميليكا ميهاجيليا" و"جيف خوسيه" و"بول أيرش" على ملاحظاتهم.

الصورة الرئيسية بواسطة Barn Images / @barnimages على Unإعادة البداية