ما هي Core Web Vitals ولماذا هي مهمة؟
تزداد توقعات مستخدمي الإنترنت من موقع الويب يوماً بعد يوم. لم يعد الزوار يطلبون محتوى جيداً فقط، بل يريدون صفحات تُفتح فوراً، وتستجيب للنقرات دون تأخير، ولا تتحرك بشكل مزعج أثناء التصفح. وقد أطلقت Google مبادرة Core Web Vitals (مؤشرات الويب الأساسية) لتستند تجربة المستخدم إلى بيانات ملموسة. وهذه المقاييس مؤشرات أداء حاسمة تقيس طريقة تفاعل المستخدمين الحقيقيين مع صفحاتك (Real User Monitoring - RUM).
من ناحية تحسين محركات البحث (SEO)، تُعد Core Web Vitals إحدى الركائز الأساسية لإشارات الترتيب الخاصة بتجربة الصفحة لدى Google. فالبنية التحتية الجيدة لـ سرعة الموقع تُبقي الزوار لفترة أطول في الموقع، وتخفض معدلات الخروج المباشر، وترفع معدلات التحويل بشكل مباشر. وإذا كنت تستخدم نظام إدارة محتوى ديناميكياً مثل WordPress، فقد تؤدي استعلامات قاعدة البيانات والملفات البرمجية الخارجية وعناصر الوسائط إلى تراجع الأداء مع الوقت. لذلك من الضروري أن تتعرف على هذه المقاييس جيداً وأن تطبق خطوات التحسين المناسبة.
المقاييس الأساسية: ما معنى LCP وCLS وINP؟
عند قياس تجربة المستخدم، تركز Google على ثلاث مراحل أساسية: سرعة التحميل، والثبات البصري، والاستجابة للتفاعل. وتُتابَع هذه الركائز الثلاث حالياً من خلال مقاييس LCP وCLS وINP.
1. Largest Contentful Paint (LCP) - سرعة التحميل المُدرَكة
يقيس LCP المدة التي يستغرقها ظهور المحتوى الرئيسي للصفحة على الشاشة (غالباً صورة كبيرة أو غلاف فيديو أو كتلة عنوان واسعة). ويمثل اللحظة التي يشعر فيها الزائر بأن الصفحة "قد تم تحميلها". ولتجربة مستخدم مثالية، ينبغي أن تكون قيمة LCP ثانيتين ونصف أو أقل. وتُعد أوقات استجابة الخادم البطيئة (TTFB) وملفات JavaScript وCSS التي تعيق العرض، والصور الضخمة غير المحسّنة، أبرز أسباب ضعف نتيجة LCP.
2. Cumulative Layout Shift (CLS) - الثبات البصري
هل حدث أن كنت على وشك النقر على زر في موقع ما، فانزاح المحتوى فجأة إلى الأسفل وضغطت على رابط لم تكن تقصده؟ هذا الإزعاج بالذات يُقاس بمقياس CLS. فهو يحسب مقدار تغيّر أماكن العناصر بشكل غير متوقع أثناء تحميل الصفحة. والنتيجة المثالية لـ CLS أن تكون أقل من 0.1. وتُعد الصور التي لم تُحدَّد أبعادها مسبقاً، ومساحات الإعلانات التي تُحمَّل لاحقاً، والأدوات الخارجية التي تُدرج ديناميكياً، المصادر الرئيسية لانزياحات الصفحة.
3. Interaction to Next Paint (INP) - سرعة التفاعل
يحل INP محل مقياس FID (تأخر الإدخال الأول)، ويقيّم مدى سرعة استجابة الصفحة بصرياً لكل نقرة أو لمسة أو ضغطة مفتاح يقوم بها المستخدم. فهو لا يدرس التفاعل الأول فقط، بل التأخر الإجمالي لكل الإجراءات التي ينفذها المستخدم طوال تصفحه للصفحة. وللحصول على نتيجة INP جيدة، ينبغي أن يبقى تأخر التفاعل أقل من 200 ميلي ثانية. وتؤثر عمليات JavaScript الثقيلة والأوامر التي تحجب الخيط الرئيسي (main thread) في قيمة INP تأثيراً سلبياً مباشراً.
| المقياس | القيمة المستهدفة (جيد) | يحتاج إلى تحسين | ضعيف |
|---|---|---|---|
| LCP | ≤ 2.5 ثانية | 2.5 - 4.0 ثانية | > 4.0 ثانية |
| CLS | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
| INP | ≤ 200 ms | 200 - 500 ms | > 500 ms |
كيف تحسّن Core Web Vitals في مواقع WordPress؟
في مواقع WordPress، يتطلب تنظيف الديون التقنية وتحويل نتائج السرعة إلى اللون الأخضر التقدم خطوة بخطوة. ومع آلية تخزين مؤقت مضبوطة بشكل صحيح وبنية برمجية خفيفة، يمكن ملاحظة النتائج خلال وقت قصير.
1. تكتيكات تحسين نتيجة LCP
تبدأ أولويات تحسين LCP بالتأكد من أن الصورة الرئيسية في أعلى الصفحة (Hero image) تُحمَّل بسرعة. ولا ينبغي إطلاقاً تطبيق "lazy load" (التحميل الكسول) على هذا العنصر؛ بل على العكس، اطلب من المتصفح تحميلها بأولوية باستخدام السمة fetchpriority="high". إضافة إلى ذلك:
- فضّل صيغ الصور الحديثة مثل WebP أو AVIF.
- قلّل طلبات الانتظار في بداية الصفحة بتضمين CSS الحرجة مباشرة في الصفحة (inline).
- استخدم إضافة تخزين مؤقت جيدة وذاكرة كائنات (object cache) مثل Redis أو Memcached لتقليص زمن استجابة الخادم إلى الحد الأدنى.
- أنشئ شبكة توصيل محتوى (CDN) سريعة لتصل الملفات إلى المستخدمين من أقرب خادم إليهم.
2. طرق تقريب CLS من الصفر
منع الانزياحات المفاجئة في تخطيط الصفحة يتطلب نظاماً صارماً في البرمجة. ويمكنك تطبيق الممارسات التالية:
- حدّد دائماً قيمتي
widthوheightلجميع وسوم<img>و<video>. بهذه الطريقة يحجز المتصفح مساحة العنصر في الصفحة قبل أن يُحمَّل. - حدّد مساحات بارتفاع أدنى (min-height) بواسطة CSS مسبقاً لمساحات الإعلانات أو اللافتات الديناميكية.
- استخدم قاعدة CSS
font-display: swap;لمنع اختفاء النص أو تغيّر حجمه أثناء تحميل الخطوط.
3. تحسين JavaScript لخفض INP
أكثر ما يتعب مواقع WordPress في تحسين INP هو أن القوالب والإضافات كثيراً ما تشغّل ملفات JavaScript ثقيلة. ولجعل تفاعل الصفحة سلساً:
- أزل ملفات JavaScript غير المستخدمة، أو اجعل تحميلها مقتصراً على الصفحات التي تحتاجها فقط.
- أجّل تحميل عدادات الزيارات والرسوم المتحركة وأكواد التتبع الخارجية غير الضرورية (delay JS).
- تأكد من أن قالبك مكتوب بشكل حديث ونظيف. واختر حلول إضافات وقوالب WordPress المناسبة لاحتياجاتك والمثبتة من ناحية الأداء، فهذا يحافظ على معايير المطورين ويخفف عن موقعك عبء الإضافات الزائدة.
أدوات قياس Core Web Vitals وتتبعها
عند التحسين من المهم أن تعتمد على بيانات حقيقية. فالاختبارات الفورية في المتصفح قد تختلف عن بيانات المستخدمين الفعليين. ويمكنك الاستفادة من الأدوات التالية للمتابعة:
Google PageSpeed Insights: يجري اختبار محاكاة في بيئة مختبرية، ويعرض أيضاً بيانات المستخدمين الحقيقيين من تقرير Chrome UX (CrUX) للأيام الـ 28 الأخيرة.
Google Search Console: تسرد علامة التبويب "Core Web Vitals" في القائمة الجانبية الصفحات الضعيفة والصفحات الجيدة بشكل جماعي.
إضافة Web Vitals لمتصفح Chrome: تُظهر لك قيم LCP وCLS وINP مباشرة أثناء تصفحك للصفحة.
الأسئلة الشائعة
هل Core Web Vitals عامل ترتيب مباشر في Google؟
نعم، فمقاييس Core Web Vitals جزء رسمي من خوارزمية تجربة الصفحة لدى Google. وعند التساوي تقريباً في جودة محتوىين، يميل Google إلى رفع الصفحة التي تعمل بأداء تقني أفضل ولا تُبقي المستخدم منتظراً إلى المراكز الأولى.
ماذا يقيس مقياس INP الذي حل محل FID بالضبط؟
كان مقياس FID القديم يركز فقط على تأخر أول نقرة في الصفحة، أما مقياس INP الذي أصبح دائماً منذ مارس 2024، فيقيس متوسط تأخر جميع التفاعلات التي يقوم بها المستخدم طوال مدة بقائه في الصفحة، مثل النقرات وفتح القوائم وعمليات التصفية.
لماذا تختلف نتائج Core Web Vitals بين الجوال وسطح المكتب؟
الأجهزة المحمولة عادةً ما تملك قوة معالجة أقل، وتنتج اتصالات الشبكة الخلوية زمن انتظار (latency) أعلى من الإنترنت السلكي أو الألياف. لذلك تستغرق معالجة JavaScript وقتاً أطول على الجوال، وتبدو نتائجه عادةً أدنى من نتائج سطح المكتب.
