استخدام إضافة "مؤشرات أداء الويب" لتصحيح الأخطاء في "مؤشرات أداء الويب الأساسية"

تعرض لك الآن إضافة Web Vitals المزيد من معلومات تصحيح الأخطاء لمساعدتك في تحديد الأسباب الأساسية لمشاكل "مؤشرات أداء الويب الأساسية".

Barry Pollard

Michal Mocny

Rick Viscomi

Brendan Kenny

تاريخ النشر: 4 أيار (مايو) 2023

توفّر إضافة Web Vitals إمكانية الوصول بسهولة إلى معلومات بيانات تشخيص "مؤشرات أداء الويب الأساسية" لمساعدة المطوّرين على قياس مشاكل "مؤشرات أداء الويب الأساسية" ومعالجتها. وهي تكمل الأدوات الأخرى التي يقدمها فريق Chrome لمساعدة المطورين في تحسين التجارب على مواقعهم على الويب.

عدّلنا الإضافة لتقديم معلومات إضافية حول تصحيح الأخطاء للمطوّرين لتسهيل فهم مشاكل الأداء ومعالجتها.

عرض معلومات تصحيح الأخطاء في وحدة التحكّم

تتضمّن إضافة "مؤشرات الأداء الرئيسية" خيار تصحيح الأخطاء في "تسجيل وحدة التحكّم" منذ بعض الوقت. يمكن تفعيلها في شاشة "الخيارات":

قبل هذه الترقية الأخيرة، سجّلت هذه الميزة النتائج من web-vitals library (الذي يشكّل أساس الإضافة) في ملف JSON:

يمكن بعد ذلك توسيع هذا الجسم للحصول على التفاصيل الكاملة، ويمكن تمرير مؤشر الماوس فوق عناصر مثل صورة LCP لإبرازها في اللوحة الرئيسية:

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

معلومات تصحيح أخطاء جديدة لكل مقياس

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

معلومات تصحيح أخطاء LCP

بالنسبة إلى سرعة عرض أكبر محتوى مرئي (LCP)، نعرض كلّ من العنصر وتقسيم المراحل الأربعة الموضّحة بالتفصيل في دليل تحسين سرعة عرض أكبر محتوى مرئي (LCP):

تم تمييز وقت LCP (2,876 ملي ثانية أو 2.9 ثانية تقريبًا) باللون البرتقالي لأنّه يقع ضمن الفئة "بحاجة إلى تحسين".

في هذا المثال، نرى أنّ Resource load time هو أطول وقت، لذا لتحسين وقت LCP، عليك تحسين ذلك، ربما عن طريق تجنُّب استضافته على نطاق منفصل، أو باستخدام صور أصغر حجمًا أو تنسيقات أكثر فعالية. في هذه الحالة، يرجع ذلك إلى إبطاء الأداء بشكل مصطنع لعرض النتيجة، علمًا بأنّ web.dev هو موقع إلكتروني سريع 😀

يمكن أيضًا تمرير مؤشر الماوس فوق العنصر لتمييز الصورة:

يتيح لك النقر بزر الماوس الأيمن على العنصر أيضًا إظهاره في لوحة العناصر.

في هذه الحالة، عنصر LCP هو صورة، وعند تمرير مؤشر الماوس فوقه في وحدة التحكّم على اليمين، يتم أيضًا تمييز هذا العنصر على الموقع الإلكتروني على يمين الصفحة.

معلومات تصحيح أخطاء متغيّرات التصميم التراكمية (CLS)

يتم الآن أيضًا إدراج عمليات التحويل التي تساهم في متغيّرات التصميم التراكمية (CLS)، ويمكن تمرير مؤشر الماوس فوقها لتمييز العنصر ذي الصلة:

تعرض لقطة الشاشة أعلاه عملية نقلَين، الأولى تتألف من عنصرَين (عند تحميل صورة البانر ونقل المحتوى تحتها للأسفل)، والثانية تتألف من 4 عناصر (عند تحميل الإعلان الديناميكي ونقل معظم الصفحة للأسفل).

في لقطة الشاشة هذه، يتم تمرير مؤشر الماوس فوق العنصر h2 في وحدة التحكّم على يسار الصفحة، ويمكنك ملاحظة أنّ هذا يُبرز العنصر على الموقع الإلكتروني على يمين الصفحة.

معلومات تصحيح أخطاء مهلة الاستجابة لأوّل إدخال (FID)

بالنسبة إلى مهلة الاستجابة الأولى (FID)، نعرض العنصر المتأثر (الذي يمكن تمرير مؤشر الماوس فوقه أيضًا لتمييزه في الصفحة) ونوع التفاعل، بالإضافة إلى كائن JSON الكامل كالمعتاد:

معلومات تصحيح أخطاء INP

بالنسبة إلى مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP)، أضفنا سجلّين جديدَين:

• INP: أطول تفاعل
• التفاعلات - كل التفاعلات

مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP)

أولاً، نُبرز مقياس INP عند تغيُّره:

على غرار LCP، تُقسّم الإضافة وقت INP لعرض ثلاث مراحل:

1. تأخير الإدخال
2. مدة المعالجة
3. مهلة عرض النتيجة

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

التفاعلات

يمكن أن يكون مقياس INP بطيئًا بسبب التفاعلات السابقة التي تحظر سلسلة التعليمات الرئيسية، ما يؤدي إلى تأخير كبير في الإدخال. لهذا السبب، نسرد جميع التفاعلات بتنسيق مشابه لتسجيل INP:

يتيح لك ذلك "تتبُّع" موقع إلكتروني مباشرةً من خلال التفاعل معه والاطّلاع في وحدة التحكّم على التفاعلات التي من المحتمل أن تؤدي إلى حدوث مشكلة في مقياس INP، بالإضافة إلى التركيبات التي تؤدي إلى ذلك.

يتيح لك ذلك أيضًا تحديد عدّة تفاعلات بطيئة، بدلاً من التفاعل الأكبر فقط مع مقياس INP لمساعدتك في تجنّب الشعور بأنّك تلاحق نفسك عند تحسين وقت الاستجابة.

فلترة سجلّات وحدة التحكّم

على الرغم من أنّ كل هذه المعلومات الإضافية مفيدة، إلا أنّها قد تشتت انتباهك إذا كنت تُجري تطويرًا آخر غير مرتبط بـ "مؤشرات أداء الويب الأساسية"، أو إذا كنت مهتمًا بمؤشر أداء ويب أساسي واحد فقط في ذلك الوقت.

يمكنك استخدام خيارات فلترة وحدة التحكّم في أدوات مطوّري البرامج لفلترة بعض الرسائل أو جميعها:

• لإزالة جميع رسائل الإضافات، يمكنك إيقاف هذه الميزة في الخيارات أو استخدام فلتر -Extension.
• للاطّلاع على LCP فقط، يمكنك استخدام فلتر Web Vitals Extension LCP.
• للاطّلاع على بيانات INP والتفاعلات فقط، يمكنك استخدام فلتر Web Vitals Extension -LCP -CLS -FID.

نحاول تقليل عدد خيارات هذه الإضافة، ولكن يُرجى إعلامنا من خلال إرسال مشكلة على GitHub إذا لم يكن فلترة "أدوات المطوّر" كافية وكنت تفضّل خيارات هنا.

الخاتمة

نأمل أن تكون خيارات تصحيح الأخطاء الجديدة في أحدث إصدار من الإضافة مفيدة وأن تسهّل تحديد المشاكل في "مؤشرات أداء الويب الأساسية" وحلّها، ما يحسّن تجربة المستخدم على موقعك الإلكتروني.

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

يسرّنا معرفة أي ملاحظات حول هذه التحسينات أو أي اقتراحات أخرى على أداة تتبُّع المشاكل في GitHub.

الشكر والتقدير

صورة رئيسية من قناة Farzad على Un التصميم