بدءًا من اليوم، تمّ تطبيق تغيير على متغيّرات التصميم التراكمية (CLS) على عدد من مساحات عرض أدوات الويب في Chrome، بما في ذلك Lighthouse و"إحصاءات PageSpeed" وتقرير تجربة المستخدم على Chrome.
نرغب اليوم في إطلاعكم على كيفية تطوير قياس متغيّرات التصميم التراكمية (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). بالإضافة إلى الأدوات التي لا تزال توفّر إمكانية قياس الأداء مقابل التنفيذ الأصلي.
| الأداة | تعديل نافذة متغيّرات التصميم التراكمية (CLS) "مباشر" | "قديم" مدى توفّر متغيّرات التصميم التراكمية (CLS) |
|---|---|---|
| لوحة أدوات مطوّري البرامج في Lighthouse | قناة Canary، 2 يونيو 2021 | لا ينطبق |
| واجهة سطر الأوامر في Lighthouse | الإصدار 8، الذي تم إصداره في 1 يونيو 2021 | متوفّرة باسم totalCumulativeLayoutShift في الإصدار 8 من Lighthouse |
| Lighthouse CI | الإصدار 0.7.3، بتاريخ 3 حزيران (يونيو) 2021 | لا ينطبق |
| إحصاءات PageSpeed (PSI) | 1 حزيران (يونيو) 2021 | غير متاح |
| PSI API | 1 حزيران (يونيو) 2021 | تتوفّر هذه الميزة في lighthouseResult باسم totalCumulativeLayoutShift. غير متاح في بيانات الحقل "loadingExperience" |
| تقرير تجربة المستخدم على Chrome (CrUX) - BigQuery | مجموعة بيانات 202105، تم نشرها في 8 يونيو 2021 | متاح باسم experimental.uncapped_cumulative_layout_shift حتى 202111 |
| تقرير تجربة المستخدم على Chrome (CrUX): واجهة برمجة التطبيقات | 1 حزيران (يونيو) 2021 | بعد 1 حزيران (يونيو) 2021، ستتوفر باسم
experimental_uncapped_cumulative_layout_shift
14 كانون الأول (ديسمبر) 2021 |
سيتم قريبًا تحديث "أدوات مطوري البرامج في 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إعادة البداية