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

واعتبارًا من اليوم، تم طرح تغيير على متغيّرات التصميم التراكمية (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 Insights و"تقرير تجربة المستخدم" في Chrome. يمكنك الاطّلاع أدناه على ملخّص لطرح تسوية إطارات متغيّرات التصميم التراكمية (CLS)، بالإضافة إلى الأدوات التي لا تزال توفّر إمكانية قياس الأداء مقارنةً بالتنفيذ الأصلي.

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

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

متغيّرات التصميم التراكمية (CLS) "القديمة"

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

في الإصدار 8 من Lighthouse، يتوفّر بتنسيق JSON باسم audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.

يمكنك العثور عليه على أنّه experimental_uncapped_cumulative_layout_shift في CrUX API وexperimental.uncapped_cumulative_layout_shift في CrUX API.

بعد 1 حزيران (يونيو)، ستعرض طلبات CrUX API مقياس "متغيّرات التصميم التراكمية القديمة" (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 أشهر، وسيتم إيقاف "متغيّرات التصميم التراكمية" (CLS) القديمة في 14 كانون الأول (ديسمبر) 2021.

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

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

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

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

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

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

القياس في الحقل بنفسك

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

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

معلومات إضافية

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

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

الاستنتاجات

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

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

صورة رئيسية من صورة Barn Images / @barnimages على Un تحقق