أغلب من يفتح تقرير PageSpeed يبدأ بضغط الصور. أحيانًا ينجح، وغالبًا لا يتغيّر شيء — لأن المشكلة كانت في مكان آخر تمامًا. المؤشرات الثلاثة تقيس أشياء مختلفة، ولكلٍّ منها أسباب وحلول منفصلة.
LCP — متى يظهر أكبر عنصر؟
يقيس الزمن حتى يُرسَم أكبر عنصر مرئي في الشاشة الأولى: عادةً صورة الغلاف أو العنوان الرئيسي. الهدف: أقلّ من ٢.٥ ثانية على الهاتف وشبكة متوسطة.
الأسباب الشائعة، بترتيب التكرار
- استجابة بطيئة من الخادم — إن استغرق الخادم ٨٠٠ مللي ثانية قبل إرسال أول بايت، فقد استهلكت ثلث ميزانيتك قبل أن يبدأ المتصفح العمل.
- صورة الغلاف مؤجَّلة التحميل (lazy) — التأجيل ممتاز لما تحت الشاشة الأولى، وكارثي لما فوقها.
- خطّ يحجب الرسم — العنوان لا يظهر حتى يُحمَّل الخط. الحلّ: font-display: swap وتحميل الخط محليًا بصيغة woff2.
- ملف CSS ضخم يُحمَّل كاملًا قبل أي رسم.
- العنصر الأكبر داخل مكوّن لا يُرسم إلا بعد تنفيذ JavaScript.
INP — كم يتأخّر الموقع في الاستجابة للنقر؟
حلّ محلّ FID منذ ٢٠٢٤، وهو أصعب المؤشرات الثلاثة. يقيس الزمن بين تفاعل المستخدم — نقرة، ضغطة زر، كتابة — وبين ظهور استجابة بصرية. الهدف: أقلّ من ٢٠٠ مللي ثانية.
السبب شبه الوحيد: الخيط الرئيسي مشغول. المتصفح ينفّذ JavaScript فلا يجد وقتًا للاستجابة. والمصادر المعتادة لهذا الانشغال ليست كود الموقع غالبًا، بل ما أُضيف إليه:
- سكربتات الطرف الثالث: بكسل التتبّع، أدوات الدردشة، خرائط مدمجة، مشغّلات فيديو.
- مكتبات رسوم متحركة تُطبَّق على مئات العناصر في وقت واحد.
- مستمعات أحداث تُنفّذ عملًا ثقيلًا عند كل حركة تمرير أو تغيير حجم دون تهدئة (throttle).
- إعادة رسم كامل للواجهة عند كل تغيير حالة صغير.
أسرع طريقة لتحسين INP: احذف سكربتًا لا أحد يقرأ تقاريره. ثاني أسرع طريقة: أجّل تحميل ما تبقّى حتى أول تفاعل حقيقي.
CLS — كم يقفز المحتوى أثناء التحميل؟
يقيس الإزاحة البصرية المفاجئة: تضغط زرًّا فيتحرّك في اللحظة نفسها لأن إعلانًا فوقه حُمِّل للتوّ. الهدف: أقلّ من ٠.١، وهو المؤشر الأسهل إصلاحًا والأكثر إزعاجًا للمستخدم.
- حدّد width وheight لكل صورة وفيديو — أو نسبة أبعاد عبر aspect-ratio. هذا وحده يحلّ أغلب الحالات.
- احجز مساحة ثابتة لأي محتوى يصل متأخّرًا: لافتات، إعلانات، تقييمات محمّلة من واجهة خارجية.
- لا تُدرج عناصر فوق محتوى قائم بعد التحميل — أدرجها أسفله أو في طبقة عائمة.
- حمّل الخطوط محليًا واختر خطًّا احتياطيًا بمقاييس متقاربة حتى لا يتغيّر ارتفاع النصّ عند التبديل.
بيانات المختبر مقابل بيانات الميدان
هذا الفرق يُربك كثيرين. Lighthouse يعطيك بيانات مختبر: جهاز افتراضي، شبكة محاكاة، زيارة واحدة. Search Console يعطيك بيانات ميدان: مستخدمون حقيقيون بأجهزتهم وشبكاتهم عبر ٢٨ يومًا.
جوجل يعتمد بيانات الميدان في التقييم. أي أن درجة ٩٨ في Lighthouse لا تعني شيئًا إن كان جمهورك يتصفّح من هاتف متوسط على شبكة مزدحمة. استخدم المختبر للتشخيص، والميدان للحكم.
ترتيب العمل الذي نتّبعه
- قِس من الميدان أولًا وحدّد المؤشر الفاشل فعلًا — لا تُحسّن ما هو أخضر أصلًا.
- أصلح CLS: أرخص إصلاح وأوضح أثر على التجربة.
- عالج LCP من جهة الخادم والصورة الأولى قبل أي شيء آخر.
- راجع سكربتات الطرف الثالث لأجل INP — احذف، ثم أجّل، ثم استبدل.
- أعد القياس بعد أسبوعين. بيانات الميدان نافذة متحرّكة، ولا تتغيّر فورًا.
المؤشرات الثلاثة ليست غاية بذاتها. الغاية أن يرى الزائر ما جاء لأجله بسرعة، ويتفاعل معه دون تعثّر. تحسين الرقم دون تحسين الشعور يعني أنك حسّنت الاختبار لا الموقع.
نطبّق هذا في مشاريعنا
إن كنت تخطّط لموقع جديد أو تواجه إحدى المشكلات المذكورة أعلاه، نراجع حالتك ونعطيك رأيًا صريحًا دون التزام.
تواصل معنا