يتعامل كثير من أصحاب المواقع مع تقرير السرعة كرقم واحد من 100 يريدون رفعه. لكن Google لا تقيّم تجربة المستخدم بهذا الرقم، بل بثلاثة مؤشرات محددة تسمى Core Web Vitals، تُجمع من متصفحات Chrome لدى زوار حقيقيين. كل مؤشر يجيب عن سؤال يطرحه الزائر دون أن يشعر: هل ظهر المحتوى؟ هل استجابت الصفحة عندما ضغطت؟ هل قفز الزر من تحت إصبعي؟
المؤشرات الثلاثة وحدودها
| المؤشر | السؤال | جيد | يحتاج تحسينًا | ضعيف |
|---|---|---|---|---|
| LCP (أكبر عرض للمحتوى) | متى ظهر المحتوى الرئيسي؟ | ≤ 2.5 ث | 2.5–4 ث | > 4 ث |
| INP (التفاعل حتى العرض التالي) | ما سرعة الاستجابة للنقر والكتابة؟ | ≤ 200 مللي ث | 200–500 مللي ث | > 500 مللي ث |
| CLS (إزاحة التخطيط التراكمية) | هل تهتز العناصر أثناء التحميل؟ | ≤ 0.1 | 0.1–0.25 | > 0.25 |
تُقيَّم الصفحة عند المئين الخامس والسبعين (p75)، أي يجب أن يحصل 75% من الزيارات على الأقل على تجربة “جيدة” في المؤشر حتى يُعدّ ناجحًا. وتُقيَّم أجهزة الجوال وسطح المكتب كلٌّ على حدة.
أما FID فلم يعد جزءًا من المؤشرات منذ مارس 2024، وحلّ محله INP الذي يقيس كل التفاعلات أثناء الزيارة ويأخذ أسوأها تقريبًا، لا التفاعل الأول فقط.
بيانات الميدان مقابل بيانات المختبر
هذا الفرق يفسّر معظم الحيرة في تقارير السرعة:
- بيانات الميدان (Field data): تأتي من تقرير تجربة مستخدمي Chrome (CrUX) لزوار حقيقيين خلال آخر 28 يومًا. هي ما يظهر في Search Console وأعلى تقرير PageSpeed Insights، وهي ما تستخدمه Google في التقييم. المواقع قليلة الزيارات قد لا تملك بيانات ميدانية كافية.
- بيانات المختبر (Lab data): اختبار واحد يحاكي جهازًا وشبكة محددين عبر Lighthouse. مفيد للتشخيص والمقارنة قبل وبعد التعديل، لكنه لا يقيس INP مباشرة لأنه لا يوجد مستخدم يتفاعل؛ ويُستخدم مؤشر TBT (إجمالي وقت الحجب) كمؤشر تقريبي له.
استخدم أداة اختبار سرعة الموقع للتشخيص السريع، وتذكّر أن تحسن الأرقام في المختبر يحتاج أسابيع حتى ينعكس على بيانات الميدان.
كيف تحسّن LCP
عنصر LCP غالبًا هو صورة البانر الرئيسية أو صورة المنتج أو عنوان كبير. زمنه يتكون من أربعة أجزاء: زمن استجابة الخادم، وتأخر بدء تحميل المورد، وزمن تحميله، وتأخر رسمه.
- خفّض TTFB: تخزين مؤقت للصفحات، واستضافة أقوى أو أقرب، وCDN.
- اجعل المتصفح يكتشف الصورة مبكرًا: ضعها كوسم
<img>عادي في HTML لا كخلفية CSS ولا عبر JavaScript. - لا تؤجّل صورة LCP: احذف
loading="lazy"منها، وأضفfetchpriority="high":
<img src="/img/hero-1200.webp" width="1200" height="600"
fetchpriority="high" alt="Product range">- صغّر الصورة: أبعاد مناسبة وصيغة WebP أو AVIF.
- قلّل ملفات CSS وJS الحاجبة للعرض في
<head>. - اعرض الخطوط بسرعة: إذا كان عنصر LCP نصًا، فخط عربي ثقيل دون
font-display: swapقد يؤخر ظهوره.
كيف تحسّن INP
INP يقيس الزمن من لحظة النقر أو اللمس أو الضغط على مفتاح حتى يرسم المتصفح النتيجة. السبب الرئيسي لضعفه هو انشغال الخيط الرئيسي بتنفيذ JavaScript.
- قلّل JavaScript: كل إضافة وكل سكربت خارجي (دردشة، إعلانات، تحليلات، اختبارات A/B) يتنافس على الخيط الرئيسي.
- قسّم المهام الطويلة: أي مهمة تتجاوز 50 مللي ثانية تحجب الاستجابة. اجعل الكود يتنازل عن الخيط بين الخطوات.
- أظهر استجابة بصرية فورية ثم نفّذ العمل الثقيل؛ مثلًا غيّر شكل الزر فورًا ثم أرسل الطلب.
- احذر من القوائم والفلاتر الثقيلة في صفحات الفئات التي تعيد رسم مئات المنتجات عند كل نقرة.
- قلّل حجم DOM: صفحة فيها آلاف العناصر تجعل كل تحديث مكلفًا.
كيف تحسّن CLS
CLS يجمع الإزاحات المفاجئة التي يراها الزائر. المصادر المعتادة:
| السبب | الحل |
|---|---|
| صور دون أبعاد | أضف width وheight أو aspect-ratio |
| إعلانات وتضمينات تُحقن لاحقًا | احجز لها مساحة ثابتة مسبقًا |
| شريط كوكيز أو عرض يُدفع أعلى الصفحة | اعرضه فوق المحتوى (overlay) لا داخله |
| تبديل الخط يغيّر عرض النص | اختر خطًا احتياطيًا قريب المقاسات أو استخدم size-adjust |
| محتوى يُحمّل عبر JavaScript أعلى المحتوى الظاهر | ضعه أسفل أو احجز له مكانًا |
الإزاحات التي تحدث خلال 500 مللي ثانية بعد تفاعل المستخدم (مثل فتح قائمة عند النقر) لا تُحتسب، لأنها متوقعة.
خطة عمل عملية
- افتح تقرير Core Web Vitals في Search Console، وحدّد مجموعات العناوين الضعيفة (غالبًا قالب واحد مثل صفحات المنتجات).
- اختر صفحة ممثلة لكل مجموعة واختبرها في المختبر.
- حدّد عنصر LCP ومصادر الإزاحة والمهام الطويلة.
- أصلح على مستوى القالب لا الصفحة الواحدة، فالإصلاح ينعكس على آلاف الصفحات.
- انقر “التحقق من الإصلاح” في Search Console وانتظر دورة الـ 28 يومًا.
الإصلاحات الأوسع للسرعة (الاستضافة، التخزين المؤقت، CDN) مشروحة في دليل تسريع المواقع، وتحسين الصور تحديدًا في دليل تحسين الصور.
أدوات مفيدة للتشخيص
- PageSpeed Insights: يجمع بيانات الميدان (إن توفرت) واختبار Lighthouse في تقرير واحد، ويحدد عنصر LCP ومصادر الإزاحة.
- أدوات المطوّر في Chrome: تبويب Performance يسجّل التحميل والتفاعل ويُظهر المهام الطويلة، ويعرض قيم LCP وINP وCLS أثناء تصفحك الفعلي للصفحة.
- مكتبة web-vitals: تتيح جمع المؤشرات من زوارك وإرسالها إلى أداة التحليل لديك، وهي الطريقة الأدق لمعرفة الصفحات والأجهزة التي تعاني فعلًا.
ابدأ بالأدوات المجانية؛ فمعظم المشكلات تظهر بوضوح دون أي أداة مدفوعة.
المواقع الجديدة وقليلة الزيارات
إذا لم تظهر بيانات ميدانية لموقعك في Search Console، فهذا يعني غالبًا أن عدد زيارات Chrome غير كافٍ بعد. لا يعني ذلك أن الموقع سيئ أو جيد؛ اعتمد مؤقتًا على اختبارات المختبر المتكررة وعلى قياس زوارك بنفسك، وستظهر البيانات الميدانية حين تزيد الزيارات.
قائمة تحقق
- صورة LCP في HTML مباشرة، غير مؤجلة، مع
fetchpriority="high". - TTFB منخفض بفضل التخزين المؤقت.
- لا مهام JavaScript طويلة عند التفاعل، والسكربتات الخارجية في حدها الأدنى.
- كل الصور والإعلانات والتضمينات لها مساحة محجوزة.
- الخطوط تستخدم
font-display: swapوخطًا احتياطيًا قريب المقاسات. - تراقب بيانات الميدان شهريًا، لا نتيجة المختبر وحدها.