افهم ما تقوله كل مقياس
Largest Contentful Paint أو LCP يقيس وقت عرض أكبر صورة أو كتلة نصية في الإطار الأولي (initial viewport). Interaction to Next Paint أو INP يقيس استجابة الزيارة من خلال أبطأ تفاعل مؤهل. Cumulative Layout Shift أو CLS يقيس الحركة المرئية غير المتوقعة أثناء الزيارة.
الأهداف المنشورة من Google هي: LCP عند أو أقل من 2.5 ثانية، INP عند أو أقل من 200 مللي ثانية، وCLS عند أو أقل من 0.1. قيّم هذه المؤشرات عند المئين 75 لعمليات تحميل الصفحة، بشكل منفصل للهواتف المحمولة وسطح المكتب. استخدم الأهداف لتركيز العمل، وليس كضمان للترتيب أو سبب لتجاهل الزوار الأبطأ.
المحتوى الرئيسي يظهر متأخراً؛ افحص الخادم، اكتشاف الموارد، التنزيل، ومسار العرض (rendering).
نقرة أو لمسة أو ضغطة مفتاح تنتظر طويلاً لرد بصري؛ المصدر قد يكون إطاراً مضمنًا (embedded frame).
المحتوى يتحرك بشكل غير متوقع؛ امنح اهتمامًا زائدًا للتحولات بالقرب من عناصر التحكم والنماذج ومواقع القراءة.
دع بيانات الحقل تحدد الأولوية والاختبارات المخبرية تشرحها
تأتي بيانات الحقل من زيارات حقيقية، بما في ذلك أجهزة حقيقية، وشبكات، ومواقع، وحالات التخزين المؤقت، وسلوك المستخدم. تظهر بيانات Chrome User Experience Report في PageSpeed Insights وSearch Console عندما تتوفر بيانات كافية. يمكن لأنظمة المراقبة الخاصة بك أن تضيف سياق عرض الصفحة؛ اجمع فقط القياسات الضرورية وتجنب جمع محتوى يُدخله العملاء.
البيانات المخبريّة هي اختبار قابل للتكرار تحت ظروف محددة. تكون مفيدة لعزل تغيير إطلاق وقراءة أثر التتبع (trace)، لكنها لا تمثل كل زائر. لا يستطيع Lighthouse قياس INP الحقيقي دون تفاعل حقيقي، لذا فإن Total Blocking Time هو وكيل تشخيصي. عندما تختلف النتائج، استخدم بيانات الحقل للأولوية والبيانات المخبريّة للتحقيق.
سجل ما إذا كانت البيانات عند مستوى URL أو النطاق (origin)، وما إذا كانت للهواتف المحمولة أو سطح المكتب.
احفظ التاريخ، مجموعة الصفحات، الجهاز، التوزيع، إعدادات الاختبار، والإصدارات الأخيرة مع خط الأساس.
صنّف حسب الوصول، ضرر المهمة، الدليل، وقابلية العكس
لا تبدأ بالرقم الأدنى في لوحة التحكم. رتب الخيارات حسب الزيارات المتأثرة، وأهمية مهمة الزائر، وتكرارها عبر القالب، وما إذا كان يمكن عزل التغيير والتراجع عنه. يجعل هذا تحسين Core Web Vitals عملاً عمليًا للتصحيح بدلاً من ملاحقة النقاط فقط.
قد يكون بعد وجود بعد أبعاد صورة مفقودة في قالب مشترك تغييرًا أوليًا أفضل من إعادة كتابة واجهة أمامية تكهّنياً. ويمكن أن يأخذ تفاعل الخروج (checkout) الأقل شيوعًا أسبقية عندما يمنع إكمال العملية. اقترن دليل المقياس بتعليقات الدعم، وملاحظة القمع (funnel), ومراجعة الوصول.
مشكلات مكررة لوحظت في الحقل على قوالب مهمة مع حل واضح ومنخفض المخاطر.
أفكار معمارية بدون مشكلة مستخدم مقاسة أو مسار تراجع؛ احتفظ بها كفرضيّات.
اصل LCP بتقصير المسار إلى المحتوى الرئيسي
حدد عنصر LCP للصفحة والمجموعة الأجهزة المتأثرة. افحص الاستجابة الأولية للـ HTML، متى يكتشف المتصفح العنصر، كم يستغرق تنزيل المورد، وما الذي يعيق العرض. قد يجعل زمن استجابة الخادم العالي هدف LCP غير عملي حتى مع أصل بطولي (hero) محسّن جيدًا.
حافظ على اكتشاف المحتوى الأساسي مبكرًا عندما يتناسب ذلك مع التصميم. لا تؤخر تحميل الصورة التي هي عنصر LCP. لصفحات مُعتمدة على الصور، استخدم أصلًا بالحجم والترميز المناسبين مع أبعاد صريحة. اختبر preload وقواعد التسليم: الطلب المبكر مفيد فقط إن لم يتنافس مع أعمال أكثر أهمية.
تحقق من عمليات إعادة التوجيه، عمل الخادم، سلوك التخزين المؤقت، وقرب التوصيل؛ قد يحتاج هذا لملكية التطبيق أو الاستضافة.
تحقق ما إذا كانت عملية العرض على جهة العميل أو السكربتات أو CSS تؤخر اكتشاف النص أو الصورة الرئيسية.
اجعل التفاعلات سريعة والتخطيطات متوقعة
لـ INP، أعد إنتاج تدفق بطيء في تتبع المتصفح. فصل تأخير الإدخال، ومعالجة الحدث، وتأخير العرض. يمكن للمهام الطويلة على الخيط الرئيسي، والمعالجات الثقيلة، والعرض المكلف، وthrashing التخطيط أن تؤخر الطلاء التالي. قم بالأعمال البصرية للإطار التالي أولاً؛ أجّل الحفظ غير الأساسي أو التحليلات أو التحديثات الثانوية حيث تسمح متطلبات المنتج.
بالنسبة لـ CLS، اعثر على العناصر المتحركة بدلاً من التخمين من الإجمالي. احجز مساحة للصور والفيديو والإعلانات والمُضمّنات والإطارات بأبعاد أو نسبة عرض إلى ارتفاع في CSS. تحقق من تحميل الخطوط والمحتوى المحقون. لا تُخفي رسالة موافقة أو خطأ أو وصول ضرورية فقط لتحسين النقطة؛ أعطها موقعًا ثابتًا.
قد يغير تأجيل الأعمال توقيت التطبيق. اختبر الانحدار (regression) لحالة النموذج، والتحقق، وسلوك لوحة المفاتيح.
مرر عبر المناطق المحملة عند الطلب (lazy-loaded) والمضمّنات؛ قد يغفل اختبار التحميل فقط التحولات اللاحقة.
أطلق التحسينات بأمان وتأكد منها
يمكن أن تؤثر تغييرات الأداء على السكربتات، والتخزين المؤقت، والعرض، والمُضمنات، أو تكوين التوصيل. نفّذ التغيير على مراحل، قارن مسار الاختبار المحدد مع خط الأساس، ووثق إجراءات التراجع. لتدفقات الدفع أو الحساب أو المنظمة بالقوانين، شارك المراجعين المناسبين للأمن والامتثال والوصول قبل تغيير المضمّنات أو التحقق أو معالجة البيانات. هذه إرشادات تعليمية، وليست تقييم امتثال.
بعد النشر، قارن نفس المسار المخبري وراقب شرائح الحقل المقارنة خلال نافذة التقرير العادية. تحقق من الآثار غير المقصودة مثل خطأ مخفي أو واجهة غير قابلة للقراءة. Status Is UP supports proactive uptime optimization through recurring checks, clear remediation ownership, and rollback readiness between incidents.
اربط كل تغيير بمجموعة صفحات، مقياس، مالك، دليل الاختبار، المقايضة، وتعليمات التراجع.
لا تعلن النجاح من تمريرة اصطناعية واحدة؛ أكد نمط المستخدم الحقيقي ذي الصلة.