كيف أعالج ضعف درجات Core Web Vitals؟

حدّد المقياس الفاشل، والجهاز، ومجموعة الصفحات المتأثرة؛ فتقرير Core Web Vitals في Search Console يعرض المقاييس الثلاثة جميعها اعتمادًا على زيارات حقيقية عبر Chrome. بعد ذلك عالج السبب الكامن وراء كل مقياس: في LCP، سرعة وصول الصورة الرئيسية أو النص الرئيسي؛ وفي INP، مهام JavaScript الطويلة التي تؤخر الاستجابة؛ وفي CLS، المحتوى الذي يظهر دون أن تُحجز له مساحة مسبقًا. تغطي بيانات الميدان آخر 28 يومًا، لذا قيّم أثر الإصلاح على مدى شهر.

الخطوة 1: اكتشف ما يفشل

1. افتح تقرير Core Web Vitals في Search Console واختر الجوال أو سطح المكتب؛ إذ يُقيَّم كل منهما على حدة.
2. افتح إحدى المشكلات المدرجة، مثل مشكلة LCP على الجوال، لتطّلع على مجموعة عناوين URL المتأثرة وأمثلة منها. تشترك المجموعة كلها في حالة واحدة يحددها أسوأ مقاييسها.
3. مرّر أحد عناوين URL النموذجية عبر PageSpeed Insights لترى بيانات الميدان الخاصة بتلك الصفحة إلى جانب اختبار مخبري يساعدك على تشخيص المشكلة.

لا تستطيع أدوات الاختبار المخبري مثل Lighthouse قياس INP لأن أحدًا لا يتفاعل مع الصفحة أثناء الاختبار، ولذلك تعرض بدلًا منه Total Blocking Time. أما بالنسبة إلى INP، فالقياس المعتمد على المستخدمين الفعليين هو المرجع الموثوق.

كيف تعالج بطء LCP

يقسّم دليل تحسين LCP من web.dev هذا المقياس إلى أربعة أجزاء: زمن استجابة الخادم، والتأخير قبل بدء تحميل المورد الرئيسي، ومدة تنزيله، والتأخير قبل عرضه. ابدأ بأكبر جزء منها:

• اجعل صورة LCP قابلة للاكتشاف في HTML الأولي بدلًا من إدراجها عبر JavaScript أو CSS، وأضف إليها fetchpriority="high".
• لا تؤجّل تحميل صورة LCP أبدًا (lazy-load).
• قدّمها بحجم أصغر: بالأبعاد المناسبة، وبصيغة حديثة، مع الضغط، وعبر CDN قريبة من الزوار.
• أزل الموارد المعطِّلة للعرض: استخدم أوراق أنماط أصغر، وتجنّب السكربتات المتزامنة في <head>، واعتمد العرض من جهة الخادم للمحتوى الرئيسي.
• سرّع استجابة الخادم: قلّل عمليات إعادة التوجيه، وأتح تخزين الصفحات مؤقتًا على الحافة.

كيف تعالج ضعف INP

يقسّم دليل تحسين INP كل تفاعل إلى تأخير الإدخال، ووقت المعالجة، وتأخير العرض:

• تأخير الإدخال: قلّل شيفرة JavaScript التي تعمل أثناء تحميل الصفحة، حتى يكون الخيط الرئيسي متاحًا عندما ينقر المستخدم.
• وقت المعالجة: قسّم معالجات الأحداث الطويلة إلى مهام أصغر وأفسح المجال للخيط الرئيسي، فنفّذ التحديث المرئي أولًا وأجّل الباقي.
• تأخير العرض: أبقِ DOM صغيرًا، وتجنّب إجبار المتصفح على إعادة احتساب التخطيط بقراءة الأنماط مباشرة بعد تغييرها، واستخدم content-visibility في الصفحات الطويلة.

كيف تعالج ارتفاع CLS

يسرد دليل تحسين CLS الأسباب الشائعة وحلولها:

• صور ومقاطع فيديو بلا أبعاد: أضف السمتين width وheight، أو خاصية CSS هي aspect-ratio.
• الإعلانات والمحتوى المضمَّن وiframes: احجز مساحتها في التخطيط قبل تحميلها.
• محتوى يُدرج فوق المحتوى الموجود: استخدم عنصرًا نائبًا بالحجم المناسب، أو أدرج المحتوى الجديد أسفل ما يقرؤه الزائر.
• خطوط الويب: حمّل المهم منها مسبقًا حتى لا يعاد تدفق النص في وقت متأخر.
• الرسوم المتحركة: حرّك transform بدلًا من خصائص مثل top أو left.

كما أن الصفحات التي يمكنها الاستفادة من ذاكرة التنقل للأمام والخلف (back/forward cache) في المتصفح تتجنب الانزياحات في التخطيط عند عودة الزوار إليها.

الخطوة 3: تأكد من نجاح الإصلاح

انشر التعديلات، ثم افتح المشكلة في تقرير Core Web Vitals وابدأ التحقق. يراقب Google المجموعة لمدة 28 يومًا؛ ولا يؤدي التحقق إلى إعادة زحف ولا إلى تسريع أي شيء، بل يتتبع فقط ما إذا كانت المشكلة قد زالت. ولأن بيانات الميدان تُحتسب على فترة متحركة مدتها 28 يومًا، فتوقّع أن يتحسن التقرير تدريجيًا. وللاطلاع على معنى كل مقياس، راجع ما معنى LCP وINP وCLS؟.

كيف يساعدك AutoPSEO

يعرض تقرير Core Web Vitals في AutoPSEO بيانات أسبوعية من Chrome UX Report تغطي نحو ستة أشهر، لموقعك كله أو لعنوان URL واحد، على الهاتف أو سطح المكتب أو الجهاز اللوحي. وبذلك ترى الأسبوع الذي بدأ فيه أثر الإصلاح، أو الأسبوع الذي تسبب فيه إصدار جديد بتراجع الأداء، دون انتظار اكتمال نافذة الـ 28 يومًا التالية.