Core Web Vitals مجموعة مقاييس من Google تترجم «تجربة الصفحة» إلى أرقام قابلة للقياس والتحسين. تبني هذه الصفحة على ما هو أداء الويب؟، وتشرح المقاييس الثلاثة الأساسية.
ما هي Core Web Vitals؟
Core Web Vitals ثلاثة مقاييس تركّز على ما يشعر به المستخدم فعليًا: سرعة التحميل، وسرعة التفاعل، والثبات البصري. لكل مقياس عتبة تصنّف الأداء إلى «جيّد» أو «يحتاج تحسينًا» أو «ضعيف»، بناءً على تجارب مستخدمين حقيقيين.
1. LCP — أكبر عنصر مرئي (سرعة التحميل)
Largest Contentful Paint يقيس متى يظهر أكبر عنصر محتوى مرئي في الشاشة (صورة كبيرة أو كتلة نصّ رئيسية) — أي متى يشعر المستخدم أنّ «الصفحة تحمّلت».
- جيّد: أقلّ من 2.5 ثانية.
- أبرز أسبابه: خوادم بطيئة، صور غير محسّنة، موارد تحجب العرض.
2. INP — التفاعل حتى الرسم التالي (سرعة الاستجابة)
Interaction to Next Paint يقيس مدى سرعة استجابة الصفحة لتفاعلات المستخدم (نقرة، ضغطة مفتاح)، بالنظر إلى الاستجابات عبر الجلسة كلّها.
- جيّد: أقلّ من 200 مللي ثانية.
- أبرز أسبابه: كود JavaScript ثقيل يشغل الخيط الرئيسي فيؤخّر الاستجابة.
ℹ️ ملاحظة مهمّة: حلّ INP محلّ المقياس الأقدم FID (First Input Delay) رسميًا في مارس 2024 كأحد Core Web Vitals. إن صادفت مراجع قديمة تذكر FID، فالمعيار الحالي هو INP.
3. CLS — إزاحة التخطيط التراكمية (الثبات البصري)
Cumulative Layout Shift يقيس مقدار «قفز» عناصر الصفحة بشكل غير متوقّع أثناء التحميل — كأن يتحرّك زرّ لحظة همّك بالنقر.
- جيّد: أقلّ من 0.1.
- أبرز أسبابه: صور بلا أبعاد محدّدة، محتوى يُحقَن ديناميكيًا، خطوط تُغيّر التخطيط عند تحميلها.
ملخّص العتبات
| المقياس | يقيس | «جيّد» |
|---|---|---|
| LCP | سرعة التحميل | ≤ 2.5 ثانية |
| INP | سرعة التفاعل | ≤ 200 مللي ثانية |
| CLS | الثبات البصري | ≤ 0.1 |
كيف تستخدمها؟
اقصد التحسين حيث الأثر أكبر: إن كان LCP ضعيفًا فحسّن الخادم والصور؛ وإن كان INP ضعيفًا فخفّف JavaScript؛ وإن كان CLS ضعيفًا فحدّد أبعاد الصور واحجز مساحة العناصر المتأخّرة. قِس دائمًا ببيانات ميدانية حقيقية لأنها الحكم.
الخطوات التالية
بعد فهم المقاييس، ستتعلّم تحسينها عمليًا: التحميل الكسول، وتحسين الصور، وتقليل حجم حزم JavaScript. راجع الأساس في ما هو أداء الويب؟، ولتحسين الصور في Next.js انظر الصور والخطوط.