Core Web Vitals: شرح المؤشرات الثلاثة وكيف تحسنها
Core Web Vitals ثلاثة مؤشرات يقيس بها جوجل تجربة المستخدم: LCP لسرعة ظهور المحتوى الرئيسي، وINP لسرعة استجابة الصفحة للتفاعل، وCLS لثبات الصفحة أثناء التحميل. تُقاس من بيانات زوار حقيقيين على متصفح كروم.
المؤشرات الثلاثة وحدودها
| المؤشر | ماذا يقيس | جيد | يحتاج تحسيناً | ضعيف |
|---|---|---|---|---|
| LCP | زمن ظهور أكبر عنصر في الشاشة | ≤ 2.5 ثانية | حتى 4 ثوانٍ | أكثر من 4 |
| INP | زمن استجابة الصفحة للنقر والكتابة | ≤ 200 مللي ثانية | حتى 500 | أكثر من 500 |
| CLS | مقدار تحرك عناصر الصفحة أثناء التحميل | ≤ 0.1 | حتى 0.25 | أكثر من 0.25 |
يجب أن يحقق 75% من الزيارات النطاق الجيد حتى يُعتبر المؤشر جيداً.
LCP: أسباب البطء وحلولها
- صورة الهيرو كبيرة: حوّلها إلى WebP أو AVIF، وقدم مقاساً مناسباً للجوال عبر
srcset. - الصورة تحمّل متأخرة: لا تستخدم
loading="lazy"لصورة أول الشاشة، وأضف لهاfetchpriority="high". - خطوط عربية ثقيلة: حمّل وزنين أو ثلاثة فقط، واستخدم
font-display: swap. - ملفات CSS وJS تمنع العرض: أجّل السكربتات غير الضرورية، وضع CSS أول الشاشة داخل الصفحة.
- خادم بطيء: فعّل التخزين المؤقت للصفحات واستخدم شبكة توزيع محتوى CDN.
INP: أسباب البطء وحلولها
- جافاسكربت ثقيل: سكربتات المحادثة والتتبع والنوافذ المنبثقة من أكثر الأسباب. احذف ما لا تحتاجه وأجّل الباقي.
- مهام طويلة: قسّم الأكواد الثقيلة حتى لا تحجب المتصفح أكثر من 50 مللي ثانية.
CLS: أسباب الاهتزاز وحلولها
- صور بلا أبعاد: أضف
widthوheightلكل صورة. - إعلانات وبانرات تظهر فجأة: احجز لها مساحة ثابتة.
- تبديل الخطوط: اختر خطاً احتياطياً قريب المقاس من الخط العربي.
كيف تقيس؟
- Search Console ← تجربة الصفحة ← Core Web Vitals: بيانات حقيقية مجمعة حسب نوع الصفحة.
- PageSpeed Insights: يعرض بيانات المستخدمين أعلى الصفحة واختباراً معملياً أسفلها.
- ابدأ بالصفحات الأكثر زيارة، لأن تحسينها يرفع المتوسط أسرع.
تحتاج من ينفذ هذا على موقعك؟ تعرّف على خدمة السيو التقني.