Core Web Vitals - مؤشرات الأداء الأساسية
دليلك الشامل في تحسين محركات البحث
ما هي Core Web Vitals؟#
ثلاثة مقاييس اختارتها جوجل لتمثّل تجربة المستخدم الفعلية: هل ظهر المحتوى بسرعة؟ هل استجابت الصفحة عند التفاعل؟ هل بقيت العناصر ثابتة؟
ما يميزها أنها تُقاس من مستخدمين حقيقيين عبر تقرير تجربة مستخدمي Chrome، لا من اختبار معملي.
المؤشرات الثلاثة#
| المؤشر | جيد | يحتاج تحسين | ضعيف |
|---|---|---|---|
| LCP — أكبر عنصر مرئي | < 2.5 ث | 2.5 - 4 ث | > 4 ث |
| INP — الاستجابة للتفاعل | < 200 مللي | 200 - 500 | > 500 |
| CLS — إزاحة التخطيط | < 0.1 | 0.1 - 0.25 | > 0.25 |
تحديث 2024
حلّ INP محل FID رسمياً في مارس 2024. الفرق جوهري: FID كان يقيس تأخر أول تفاعل فقط، بينما INP يقيس كل التفاعلات خلال الزيارة ويأخذ الأسوأ تقريباً. أي أن INP أصعب بكثير، وكثير من المواقع التي كانت خضراء في FID صارت برتقالية في INP.
علاج LCP#
عنصر LCP غالباً صورة الغلاف أو عنوان كبير. الأسباب الشائعة والحلول:
- خادم بطيء: حسّن TTFB، وفعّل التخزين المؤقت، واستخدم CDN
- صورة ثقيلة: WebP أو AVIF، وبأبعاد مناسبة للعرض الفعلي
- موارد تحجب العرض: CSS و JS في الرأس تؤخر الرسم. أجّل غير الحرج منها
- تحميل كسول خاطئ: لا تجعل عنصر LCP كسولاً أبداً، بل أعطه
fetchpriority="high"
علاج INP#
INP يقيس زمن الاستجابة من لمس المستخدم حتى ظهور أثر مرئي. المشكلة دائماً في انشغال الخيط الرئيسي:
- فتّت المهام الطويلة إلى مهام أقصر تسمح للمتصفح بالتنفس
- أجّل سكربتات التتبع والإعلانات والدردشة إلى ما بعد التفاعل الأول
- راجع مستمعات الأحداث الثقيلة، خصوصاً على التمرير
- قلّل حجم DOM، فالصفحة بآلاف العناصر تجعل كل تحديث مكلفاً
- استخدم تبويب Performance لتحديد المهمة التي تستهلك الوقت فعلاً بدل التخمين
علاج CLS#
- حدد أبعاد كل صورة وإطار:
widthوheightيحجزان المساحة قبل التحميل - احجز مساحة الإعلانات مسبقاً بحاوية ثابتة الارتفاع
- الخطوط: استخدم خطاً احتياطياً متقارب الأبعاد حتى لا يقفز النص عند تبديل الخط
- لا تحقن محتوى فوق محتوى قائم: شريط الإشعارات المضاف بعد التحميل يدفع كل شيء لأسفل
خطأ شائع في القياس
CLS يُقاس طوال الزيارة لا عند التحميل فقط. مرّر الصفحة كاملة أثناء الاختبار، فكثير من الإزاحة تحدث عند تحميل عناصر أسفل الصفحة.
أين تقيس#
- تقرير Core Web Vitals في Search Console: يجمّع صفحاتك في مجموعات متشابهة، وهو الأفضل لتحديد الأولويات
- PageSpeed Insights: لصفحة واحدة بالتفصيل
- تقرير CrUX: البيانات الميدانية الخام
- مكتبة web-vitals: لقياس مستخدميك أنت مباشرة
ابدأ دائماً من مجموعة الصفحات الأكثر زيارة. إصلاح قالب واحد قد يصلح آلاف الصفحات دفعة واحدة.