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