مؤشرات أداء الويب الأساسية: دليل عملي لتسريع موقعك

الموقع البطيء يخسر زواره قبل أن يظهر عنوانه الأول. تدرك جوجل ذلك جيداً، ولهذا أصبحت مؤشرات أداء الويب الأساسية (Core Web Vitals) جزءاً من أنظمة الترتيب لديها: إذا كانت صفحاتك تُحمَّل بسرعة وتستجيب بسلاسة، فستنافس بشكل أفضل. والخبر الجيد أنك نادراً ما تحتاج إلى إعادة بناء موقعك بالكامل لتحسين هذه المؤشرات؛ ما تحتاجه هو معرفة ما تقيسه ومن أين تبدأ.

ما هي مؤشرات أداء الويب الأساسية؟

هي ثلاثة مقاييس تلخص بها جوجل تجربة التحميل الفعلية لأي صفحة:

LCP (رسم أكبر محتوى): كم يستغرق ظهور أكبر عنصر مرئي في الصفحة، وغالباً ما يكون الصورة الرئيسية أو العنوان الكبير. الهدف: أقل من 2.5 ثانية.
INP (التفاعل حتى الرسم التالي): كم تستغرق الصفحة للاستجابة عندما يلمس المستخدم الشاشة أو ينقر أو يكتب. الهدف: أقل من 200 مللي ثانية.
CLS (إزاحة التخطيط التراكمية): مقدار “قفز” التصميم أثناء التحميل. الهدف: أقل من 0.1.

النقطة الجوهرية: تعتمد جوجل على بيانات مستخدمين حقيقيين (تقرير CrUX) وليس على اختبارات المختبر فقط. لهذا قد ينجح موقعك على حاسوبك ويفشل على هاتف متوسط المواصفات باتصال شبكة جوال.

كيف تقيسها مجاناً

ثلاث أدوات مجانية تغطي كامل مسار التشخيص تقريباً:

PageSpeed Insights يعرض بيانات ميدانية وتدقيقاً مخبرياً لأي رابط.
Search Console (تقرير “مؤشرات أداء الويب الأساسية”) يجمع الروابط التي فيها مشاكل على مستوى الموقع كله.
Lighthouse في أدوات مطوري كروم يتيح إعادة الاختبار أثناء تطبيق التعديلات.

يمكنك أيضاً تشغيل تدقيق مباشرة من سطر الأوامر:

npx lighthouse https://your-site.com --view

ثلاثة إصلاحات ذات أثر فوري

حسّن الصورة الرئيسية

يعتمد مؤشر LCP في الغالب على صورة واحدة. قدمها بصيغة حديثة (AVIF أو WebP) مع أبعاد محددة، وأضف إليها fetchpriority="high". وكل ما يقع أسفل الشاشة الأولى يجب أن يستخدم loading="lazy".

قلّل جافاسكريبت الذي يعطّل العرض

كل كيلوبايت من جافاسكريبت يجب تنزيله وتفسيره وتنفيذه قبل أن تصبح الصفحة سلسة الاستجابة. احذف المكتبات التي لم تعد تستخدمها، وقسّم الشيفرة حسب المسارات، وأجّل سكربتات الأطراف الخارجية غير الضرورية للعرض الأول.

احجز مساحة لما يُحمَّل متأخراً

تظهر مشكلة CLS عندما تدفع الإعلانات أو الصور أو الخطوط المحتوى من مكانه. حدد دائماً width وheight للصور، واحجز حاويات بارتفاع ثابت لمواضع الإعلانات، واستخدم font-display: swap مع خط بديل مشابه.

الخلاصة

لا تطارد النتيجة المثالية 100؛ فهي مؤشر مخبري وليست الهدف. ركّز على أن تكون المقاييس الميدانية الثلاثة في النطاق الأخضر للمستخدمين الحقيقيين. قِس أولاً، ثم أصلح الصورة الرئيسية، وقلّص جافاسكريبت، وثبّت التصميم؛ هذا الترتيب يحل الجزء الأكبر من المشكلة في معظم المواقع.