Core Web Vitals: قياس وتحسين أداء الويب
لقد قمت ببناء موقع ويب سريع، لكن المستخدمين لا يزالون يشتكون من التحميل البطيء أو التفاعلات المتقطعة. قد تخفض محركات البحث ترتيبك أيضًا بسبب ضعف Core Web Vitals. هذه المقاييس—Largest Contentful Paint (LCP)، First Input Delay (FID)، و Cumulative Layout Shift (CLS)—تؤثر مباشرة على تجربة المستخدم وتحسين محركات البحث (SEO). في هذا الدليل، سنوضح لك كيفية قياسها وتحسينها بخطوات عملية.
ما هي Core Web Vitals؟
Core Web Vitals هي مجموعة من المقاييس التي حددتها Google لقياس الجوانب الرئيسية لتجربة المستخدم: التحميل، التفاعل، والاستقرار البصري. وهي:
- Largest Contentful Paint (LCP): يقيس أداء التحميل. يجب أن يحدث خلال 2.5 ثانية من بدء الصفحة.
- First Input Delay (FID): يقيس التفاعل. يجب أن يكون أقل من 100 مللي ثانية.
- Cumulative Layout Shift (CLS): يقيس الاستقرار البصري. يجب أن يكون أقل من 0.1.
هذه المقاييس جزء من إشارات تجربة الصفحة من Google ويمكن أن تؤثر على ترتيبك في البحث.
كيفية قياس Core Web Vitals
يمكنك قياس Core Web Vitals في المختبر (اختبار صناعي) أو في الميدان (مراقبة المستخدمين الحقيقيين). لكل منهما مكانه.
أدوات المختبر
- Lighthouse: مدمج في Chrome DevTools، يقوم بتدقيق الأداء ويوفر درجات لـ LCP و CLS و Total Blocking Time (TBT، وهو مؤشر بديل لـ FID).
- PageSpeed Insights: يجمع بين بيانات المختبر والميدان من Chrome User Experience Report (CrUX).
- WebPageTest: يوفر اختبارات متقدمة مع مواقع وأجهزة مخصصة.
أدوات الميدان
- Chrome User Experience Report (CrUX): يوفر بيانات مجمعة من مستخدمين حقيقيين لملايين المواقع.
- مكتبة web-vitals: مكتبة JavaScript لالتقاط المقاييس من المستخدمين الحقيقيين وإرسالها إلى تحليلاتك.
- Search Console: يعرض حالة Core Web Vitals لموقعك بناءً على بيانات CrUX.
ابدأ بأدوات المختبر لتصحيح الأخطاء، ثم تحقق باستخدام بيانات الميدان لضمان الأداء في العالم الحقيقي.
تحسين Largest Contentful Paint (LCP)
يقيس LCP عندما يصبح أكبر عنصر محتوى (غالبًا صورة رئيسية أو عنوان) مرئيًا. لتحسين LCP:
- حسّن الصور: اضغط الصور، استخدم تنسيقات حديثة مثل WebP أو AVIF، وقدم صورًا متجاوبة باستخدام
srcset. - حمّل الموارد الحرجة مسبقًا: استخدم
<link rel="preload">للصور الرئيسية والخطوط وأوراق الأنماط. - قلل وقت استجابة الخادم: استخدم CDN، فعّل التخزين المؤقت، وحسّن أداء الواجهة الخلفية.
- أزل الموارد التي تعيق العرض: ضمّن CSS الحرج، أخّر JavaScript غير الحرج، وتجنب ملفات CSS الكبيرة.
- استخدم شبكة توصيل المحتوى (CDN): قدم الأصول من مواقع أقرب للمستخدمين.
لتحسين الصور، جرب ضاغط الصور لتقليل أحجام الملفات دون فقدان الجودة.
تحسين First Input Delay (FID)
يقيس FID الوقت من أول تفاعل للمستخدم مع صفحتك إلى عندما يمكن للمتصفح الاستجابة. لتحسين FID:
- قلل تنفيذ JavaScript: قسّم المهام الطويلة، استخدم تقسيم الكود، وأجّل النصوص البرمجية غير الحرجة.
- حسّن نصوص الطرف الثالث: حمّلها بشكل غير متزامن أو أجلها حتى بعد المحتوى الحرج.
- استخدم web worker: انقل الحسابات الثقيلة إلى خيط عامل.
- قلل العمل على الخيط الرئيسي: تجنب النصوص البرمجية المتزامنة الكبيرة وحجم DOM المفرط.
أدوات مثل مقياس TBT في Lighthouse يمكن أن تساعدك في تحديد المهام الطويلة.
تحسين Cumulative Layout Shift (CLS)
يقيس CLS التحولات غير المتوقعة في التخطيط أثناء تحميل الصفحة. لتحسين CLS:
- أضف دائمًا سمات العرض والارتفاع للصور والفيديو: هذا يحجز مساحة ويمنع التحولات.
- احجز مساحة للإعلانات والتضمينات: استخدم CSS
aspect-ratioأو أبعاد ثابتة. - تجنب إدراج محتوى فوق المحتوى الموجود: إلا استجابةً لتفاعل المستخدم.
- استخدم تحويلات CSS للرسوم المتحركة: بدلاً من الخصائص التي تؤدي إلى إعادة التخطيط.
- حمّل الخطوط مسبقًا: استخدم
font-display: swapوالتحميل المسبق لتجنب تحولات النص غير المرئي.
مقارنة عتبات Core Web Vitals
| المقياس | جيد | يحتاج تحسين | ضعيف |
|---|---|---|---|
| LCP | ≤ 2.5 ثانية | 2.5 – 4.0 ثانية | > 4.0 ثانية |
| FID | ≤ 100 مللي ثانية | 100 – 300 مللي ثانية | > 300 مللي ثانية |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
سير عمل التحسين العملي
اتبع هذا النهج خطوة بخطوة لتحسين Core Web Vitals:
- القياس: شغّل Lighthouse وتحقق من Search Console للحصول على بيانات الميدان.
- تحديد المشكلات: ركز على المقياس الأسوأ درجة.
- تطبيق الإصلاحات: استخدم النصائح أعلاه لـ LCP أو FID أو CLS.
- الاختبار مرة أخرى: أعد تشغيل التدقيقات لتأكيد التحسينات.
- المراقبة: استخدم مكتبة web-vitals لتتبع مقاييس المستخدمين الحقيقيين بمرور الوقت.
تذكر أن الأداء مستمر. قم بتدقيق موقعك بانتظام عند إضافة ميزات.
الأسئلة الشائعة
ما هي Core Web Vitals؟
Core Web Vitals هي ثلاثة مقاييس—LCP و FID و CLS—تقيس التحميل والتفاعل والاستقرار البصري. تستخدمها Google كإشارات ترتيب.
كم مرة يجب أن أتحقق من Core Web Vitals؟
تحقق بعد التغييرات الكبيرة وعلى الأقل شهريًا. استخدم بيانات المختبر والميدان معًا لاكتشاف الانحدارات.
هل يمكنني تحسين Core Web Vitals بدون مطور؟
بعض الإصلاحات مثل ضغط الصور وإضافة أبعاد للصور يمكن أن يقوم بها محررو المحتوى. قد يتطلب البعض الآخر مساعدة مطور.
هل أنت مستعد لتحسين صورك للحصول على LCP أفضل؟ جرب ضاغط الصور المجاني لتقليل أحجام الملفات وتسريع موقعك.