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

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

ميشال موكني
ميشال موكني
بريندان كيني
بريندان كيني

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

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

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

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

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

قبل هذه الترقية الأخيرة، سجّل هذا السجلّ مخرجات من 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 الكامل كالمعتاد:

سجلّ جديد في وحدة التحكّم لإضافة "مؤشرات أداء الويب" يعرض هدف FID ونوعه

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

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

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

مقياس INP

أولاً، نسلّط الضوء على مقياس INP عند تغييره:

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

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

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

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

التفاعلات

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

تسجيل جديد في وحدة التحكّم لإضافة "مؤشرات أداء الويب" يعرض جميع التفاعلات

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

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

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

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

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

استخدام خيارات التصفية في وحدة التحكم

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

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

الخلاصة

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

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

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

شكر وتقدير

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