في الماضي، كانت "السرعة" مفهوماً غامضاً. هل تم تحميل الموقع بسرعة؟ اليوم، قامت Google بتحديد ما يعنيه الشعور بـ "السرعة" و "السلاسة" للمستخدم بدقة. تسمى هذه المقاييس مؤشرات أداء الويب الأساسية (Core Web Vitals - CWV).
منذ أن أصبحت إشارة ترتيب، حولت CWV التركيز من سرعة الخادم الخام إلى تجربة المستخدم المدركة. الأمر لا يتعلق فقط بمدى سرعة تحميل الكود؛ بل يتعلق بمدى سرعة تمكن المستخدم من استخدام الصفحة فعلياً.
تتكون مؤشرات أداء الويب الأساسية من ثلاثة مقاييس محددة. لاجتياز التقييم، يجب أن تسجل الصفحة تقييم "جيد" في الثلاثة جميعاً.
1. LCP (أكبر محتوى مرئي) – أداء التحميل
"ما مدى سرعة ظهور الأشياء الرئيسية؟"
يقيس LCP الوقت الذي يستغرقه أكبر عنصر مرئي (عادة صورة البطل، فيديو، أو العنوان الرئيسي) للتحميل والظهور بالكامل على الشاشة. إنه يخبر المستخدم: "هذه الصفحة تعمل فعلياً."
العتبات
- جيد: ≤ 2.5 ثانية
- بحاجة إلى تحسين: ≤ 4.0 ثانية
- ضعيف: > 4.0 ثانية
الأسباب الشائعة لضعف LCP
- أوقات استجابة خادم بطيئة: إذا كانت استضافتك رخيصة أو محملة فوق طاقتها، ينتظر المتصفح وقتاً طويلاً لتلقي البيانات.
- تأخير تحميل الموارد: صورة البطل غير محسنة أو يتم تحميلها عبر التحميل الكسول (الذي يجب تجنبه للصورة العلوية).
- JavaScript الذي يحجب العرض: يتوقف المتصفح عن بناء الصفحة لقراءة ملف نصي (script).
كيفية التحسين
- تحسين الصور: ضغط الصور (تنسيق WebP) والتأكد من عدم تحميل صورة البطل بشكل كسول.
- استخدام CDN: شبكة توصيل المحتوى تخدم الصور من خادم أقرب للمستخدم جغرافياً.
2. INP (التفاعل مع الطلاء التالي) – التفاعلية
"هل تتجمد الصفحة عندما أنقر؟"
ملاحظة: استبدل INP رسمياً تأخير الإدخال الأول (FID) كمقياس أساسي في مارس 2024.
يراقب INP زمن الانتقال لجميع التفاعلات التي يقوم بها المستخدم مع الصفحة (النقرات، اللمسات، وضغطات المفاتيح) طوال زيارته بأكملها. يقيس الوقت بين إجراء المستخدم وقدرة المتصفح على رسم الإطار التالي الذي يظهر النتيجة (مثلاً، فتح قائمة أو توسيع أكورديون).
العتبات
- جيد: ≤ 200 ميلي ثانية
- بحاجة إلى تحسين: ≤ 500 ميلي ثانية
- ضعيف: > 500 ميلي ثانية
الأسباب الشائعة لضعف INP
- تنفيذ JavaScript ثقيل: "الخيط الرئيسي" للمتصفح مشغول جداً بمعالجة الكود للاستجابة لنقرة المستخدم.
- تخطيطات معقدة: يستغرق المتصفح وقتاً طويلاً لإعادة رسم الصفحة بعد التفاعل.
كيفية التحسين
- تجزئة المهام الطويلة: يمكن للمطورين تقسيم أجزاء كبيرة من JavaScript إلى قطع أصغر حتى يتمكن المتصفح من التنفس.
- تحسين معالجات الأحداث: تأكد من أن الكود الذي يتم تشغيله بواسطة نقرة خفيف وسريع.
3. CLS (تحولات التخطيط التراكمية) – الاستقرار البصري
"هل يقفز المحتوى بشكل غير متوقع؟"
لقد جربنا جميعاً هذا: تذهب للنقر فوق زر، ولكن فجأة يظهر إعلان فوقه، دافعاً المحتوى لأسفل، وتنقر بالخطأ على الشيء الخطأ. هذا هو تحول التخطيط. يقيس CLS المجموع الكلي لجميع تحولات التخطيط غير المتوقعة التي تحدث خلال عمر الصفحة.
العتبات
- جيد: ≤ 0.1
- بحاجة إلى تحسين: ≤ 0.25
- ضعيف: > 0.25
الأسباب الشائعة لضعف CLS
- صور بدون أبعاد: إذا لم تخبر المتصفح بالعرض width="800" والارتفاع height="600"، فلن يعرف مقدار المساحة التي يجب حجزها.
- الإعلانات والمضمنات: لافتات الإعلانات التي يتغير حجمها ديناميكياً غالباً ما تدفع المحتوى لأسفل.
- خطوط الويب: أحياناً يكون النص مخفياً حتى يتم تنزيل الخط المخصص (FOIT) أو تبديل الأنماط (FOUT)، مما يسبب تغير ارتفاع السطر.
كيفية التحسين
- تحديد الأبعاد: قم دائماً بتضمين سمات العرض والارتفاع في عناصر الصور والفيديو.
- حجز مساحة: إذا كان لديك مساحة إعلانية ديناميكية، فاحجز حجم صندوق محدد لها في CSS حتى لا يتحرك المحتوى عند تحميل الإعلان.
جدول الملخص: المقاييس في لمحة
| المقياس | التركيز | هدف "جيد" | شعور المستخدم |
|---|---|---|---|
| LCP | التحميل | أقل من 2.5 ثانية | "إنه هنا." |
| INP | الاستجابة | أقل من 200 ميلي ثانية | "إنه يعمل." |
| CLS | الاستقرار | أقل من 0.1 | "إنه ثابت." |
كيف تقيس نتيجتك
لا تحتاج للتخمين. توفر Google أدوات مجانية لاختبار موقعك مقابل هذه المعايير:
- PageSpeed Insights: الأداة المفضلة للحصول على لمحة سريعة. توفر كلاً من "بيانات المختبر" (محاكة) و "بيانات ميدانية" (بيانات مستخدم حقيقي).
- Google Search Console: يظهر تقرير "مؤشرات أداء الويب الأساسية" أي عناوين URL على موقعك تفشل ويجمعها حسب نوع المشكلة.
- Lighthouse: أداة مطور مدمجة في متصفح Chrome (انقر بزر الماوس الأيمن > Inspect > Lighthouse) للاختبار المحلي.