يمكنك استكشاف المشاكل المتعلّقة بأداء العرض باستخدام هذا المرجع للخيارات المتعلّقة بالأداء في علامة التبويب العرض.
تمييز المناطق التي تمت إعادة طلاءها باستخدام وميض الطلاء
عند تفعيل هذا الخيار، يومِض Chrome الشاشة باللون الأخضر عند حدوث إعادة عرض.
للاطّلاع على المناطق التي تتم إعادة عرضها:
- افتح علامة التبويب العرض في هذا العرض التوضيحي وضع علامة في المربّع وميض عرض الألوان.
- لاحظ إعادة الطلاء المميزة باللون الأخضر.
إذا كنت ترى في صفحة أخرى وميض الشاشة بأكملها باللون الأخضر أو مناطق من الشاشة لا تعتقد أنه ينبغي رسمها، فكر في التحقق أكثر.
تمييز مناطق متغيّرات التصميم
تؤدي متغيّرات التصميم إلى إعادة عرض النتائج بشكل غير متوقّع، وقد لا تكون مزعجة فحسب، بل قد تكون ضارة أيضًا.
لعرض موقع متغيّرات التصميم وتوقيتها على إحدى الصفحات:
افتح علامة التبويب العرض وحدد مناطق متغيّرات التصميم.
يُرجى إعادة تحميل الصفحة. يتم تمييز مناطق متغيّرات التصميم بإيجاز باللون الأرجواني.
عرض الطبقات والمربّعات بحدود الطبقات
استخدِم حدود الطبقات لعرض تراكب حدود الطبقات والمربّعات أعلى الصفحة.
لتفعيل حدود الطبقات، اتّبِع الخطوات التالية:
- افتح علامة التبويب العرض وحدد حدود الطبقات.
- راقب حدود الطبقات باللون البرتقالي والزيتوني والمربّعات باللون السماوي.
اطّلِع على التعليقات في debug_colors.cc للحصول على شرح لترميزات الألوان.
عرض اللقطات في الثانية في الوقت الفعلي باستخدام إحصاءات عرض اللقطات
إحصاءات عرض الإطار هي عبارة عن طبقة مركّبة تظهر في أعلى يسار إطار العرض.
لفتح إحصاءات عرض الإطار:
- افتح علامة التبويب العرض وفعِّل مربّع الاختيار إحصاءات عرض الإطار.
- يمكنك ملاحظة الإحصاءات في أعلى يسار الصفحة.
يعرض تركيب إحصاءات عرض الإطار ما يلي:
- تقدير في الوقت الفعلي للّقطات في الثانية أثناء تشغيل الصفحة.
- المخطط الزمني للإطار كرسم بياني بثلاثة أنواع من الإطارات:
- اللقطات التي تم عرضها بنجاح (الخطوط الزرقاء)
- الإطارات المعروضة جزئيًا (الخطوط الصفراء)
- الإطارات المسقطة (الخطوط الحمراء)
- حالة الرسومات النقطية لوحدة معالجة الرسومات: تفعيل أو إيقاف. لمزيد من المعلومات، راجِع كيفية الحصول على بكسلة وحدة معالجة الرسومات.
- استخدام ذاكرة وحدة معالجة الرسومات: عدد الذاكرة المستخدمة والحد الأقصى لحجم الذاكرة.
تحديد مشاكل أداء التمرير
استخدِم مشاكل أداء الانتقال للأسفل لتحديد عناصر الصفحة التي تتضمّن أدوات معالجة للأحداث ذات صلة بالتمرير، ما قد يضر بأداء الصفحة.
للاطّلاع على العناصر التي يُحتمل أن تكون مسببة للمشاكل:
- افتح علامة التبويب العرض وتحقَّق من مشاكل الأداء المرتبطة بالتمرير.
- لاحظ العناصر التي يحتمل أن تسبب المشكلات.
عرض "مؤشرات أداء الويب الأساسية"
مؤشرات أداء الويب هي مبادرة أطلقتها Google تهدف إلى توفير إرشادات موحّدة لإشارات الجودة الضرورية لتقديم تجربة رائعة للمستخدم على الويب.
مؤشرات أداء الويب الأساسية هي مجموعة فرعية من "مؤشرات أداء الويب" تنطبق على جميع صفحات الويب. وتمثّل كل مؤشرات أداء الويب الأساسية جانبًا مميّزًا لتجربة المستخدم، ويمكن قياسها في المجال، وتعكس التجربة الفعلية لنتيجة مهمة تركّز على المستخدم. في ما يلي مؤشرات أداء الويب الأساسية:
- سرعة عرض أكبر محتوى مرئي (LCP): يقيّم هذا المقياس سرعة تحميل الأداء. لتقديم تجربة جيّدة للمستخدم، يجب أن يظهر مقياس LCP في حدود 2.5 ثانية من بدء تحميل الصفحة.
- مدى استجابة الصفحة لتفاعلات المستخدم (INP): يقيّم هذا المقياس مدى التفاعل. لتقديم تجربة جيدة للمستخدم، يجب أن يبلغ مقياس INP بين 200 ملّي ثانية أو أقل.
- متغيّرات التصميم التراكمية (CLS): تقيس هذا المقياس الثبات البصري. لتقديم تجربة جيدة للمستخدم، يجب أن تحافظ الصفحات على 0.1. أو أقل من قيمة متغيّرات التصميم التراكمية (CLS) .
استخدِم إضافة Web Vitals من Chrome لعرض قيم "مؤشرات أداء الويب الأساسية" لصفحتك.