مؤشرات Core Web Vitals بكلمات بسيطة

أنت أسوأ شخص يختبر سرعة موقعك. متصفحك يحتفظ بكل شيء في الذاكرة المؤقتة، واتصالك جيد، وتعرف مسبقًا أين يقع كل زر. أما الزائر الجديد الذي يفتح موقعك من هاتف متوسط وإشارة جوال متقلبة فتجربته مختلفة تمامًا، وهذا الزائر بالذات هو من تحاول جوجل وصفه بمؤشرات Core Web Vitals.

الجواب المختصر: مؤشرات Core Web Vitals ثلاثة قياسات لما يشعر به زوار حقيقيون عند فتح الصفحة. الأول LCP ويقيس سرعة ظهور المحتوى الرئيسي، والجيد منه 2.5 ثانية أو أقل. الثاني INP ويقيس سرعة تفاعل الصفحة حين يضغط أحد أو ينقر، والجيد 200 ميلي ثانية أو أقل. الثالث CLS ويقيس مقدار قفز عناصر الصفحة أثناء التحميل، والجيد 0.1 أو أقل. وتحكم جوجل على الصفحة عند النسبة المئوية 75 من الزيارات الحقيقية، لكل من الجوال والحاسوب على حدة.

ما هي المؤشرات الثلاثة بكلمات بسيطة؟

LCP: كم تنتظر حتى تبدو الصفحة جاهزة. يحدد المتصفح أكبر عنصر في الشاشة الأولى، وغالبًا صورة رئيسية أو عنوان كبير أو كتلة نص، ويقيس متى يكتمل رسمه. إن كانت صفحتك الرئيسية تبدأ بصورة حجمها ثلاثة ميغابايت فهذا المؤشر هو الذي يدفع الثمن.

INP: كم تتأخر الصفحة في الاستجابة. تضغط على "أضف إلى السلة" أو تفتح القائمة. يقيس INP الفاصل بين ضغطتك وتفاعل الشاشة المرئي. قد تُحمَّل الصفحة بسرعة ثم تبدو ميتة لأن المتصفح مشغول بتشغيل سكربتات لحظة لمسك لها. وقد حلّ INP عام 2024 محل مؤشر أقدم اسمه FID، وهو ينظر إلى أبطأ التفاعلات طوال الزيارة، لا إلى الأول فقط.

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

والحدود سهلة الحفظ. الجيد: LCP حتى 2.5 ثانية، وINP حتى 200 ميلي ثانية، وCLS حتى 0.1. الضعيف: LCP فوق 4 ثوان، وINP فوق 500 ميلي ثانية، وCLS فوق 0.25. وما بينهما يحتاج إلى تحسين.

هل تؤثر هذه المؤشرات فعلًا في الترتيب؟

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

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

أين تفحص نتائج موقعك؟

ابدأ بـ PageSpeed Insights. الصق الرابط فتظهر لك نوعان مختلفان من البيانات، والخلط بينهما أكثر مصادر الارتباك شيوعًا.

بيانات الميدان تأتي من مستخدمي كروم الحقيقيين خلال آخر 28 يومًا. وهذه ما تعتمد عليه جوجل فعلًا. بيانات المختبر تأتي من اختبار محاكى يُنفَّذ مرة واحدة على جهاز واتصال قياسيين. وهي ممتازة لتتبع الأعطال، لكنها لا تصلح حكمًا نهائيًا، لأن تشغيلًا واحدًا قد يختلف عن التالي اختلافًا كبيرًا.

وفي Search Console تقرير لمؤشرات الأداء يجمع صفحاتك حسب الحالة، فيخبرك هل المشكلة في الموقع كله أم في صفحات قليلة. وإذا كان موقعك جديدًا أو قليل الزيارات فقد لا تتوفر بيانات ميدان كافية بعد. في هذه الحالة اعتمد على اختبارات المختبر وعلى التجربة بأجهزة حقيقية إلى أن تتراكم الزيارات.

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

ما الذي يبطئ LCP عادةً؟

الأسباب نادرًا ما تكون غامضة.

صورة رئيسية ثقيلة. الصورة الضخمة هي المتهم الأول. صغّرها إلى المقاس الذي تُعرض به فعلًا، وضغطها، وقدمها بصيغة حديثة مثل WebP أو AVIF. وقدّم نسخًا أصغر للشاشات الأصغر عبر خصائص الصور المتجاوبة. ولا تؤجل تحميل الصورة الرئيسية، فهذا يطلب من المتصفح أن يتأخر في الشيء الذي تريده أولًا.

خادم بطيء. إذا تأخر وصول أول بايت فلا شيء بعده يمكن أن يكون سريعًا. يساعد هنا التخزين المؤقت وباقة استضافة مناسبة واستعلامات قاعدة بيانات فعالة.

ملفات تعطل الرسم. ملفات CSS وجافاسكربت الكبيرة في رأس الصفحة تؤخر كل ما تحتها. حمّل ما تحتاجه الصفحة فقط.

محتوى يُبنى داخل المتصفح. إذا وصلت الصفحة هيكلًا فارغًا ثم جمّعت جافاسكربت محتواها بعد ذلك، فإن LCP ينتظر كل ذلك. الصفحات المُجهزة على الخادم تضع المحتوى في الاستجابة الأولى. وهذا من أسباب بنائنا بقوالب لارافيل المُجهزة على الخادم بدل منشئات الصفحات الثقيلة، وهي مفاضلة شرحناها في لارافيل أم ووردبريس.

ما الذي يضعف INP عادةً؟

في الغالب: جافاسكربت كثير يعمل دفعة واحدة. للمتصفح خيط رئيسي واحد. إذا كان مشغولًا بتشغيل مدير وسوم وأداة دردشة وثلاث أدوات تتبع ومكتبة حركة، فإن ضغطتك تنتظر في الطابور.

ابدأ بسرد كل سكربت خارجي في الصفحة واسأل: ماذا يعطيني هذا؟ أدوات الدردشة والخرائط الحرارية وبكسلات التتبع القديمة تتراكم ولا يحذفها أحد. أجّل ما يمكن تأجيله، واحذف ما لا يُستخدم، واجعل معالجات النقر عندك قصيرة. وإذا كان الزر يُطلق عملًا ثقيلًا فأظهر استجابة مرئية أولًا ثم نفّذ العمل.

ما الذي يسبب قفز التخطيط؟

أربعة أشياء تفسر أغلب الحالات.

• صور وفيديوهات بلا عرض وارتفاع محددين، فلا يعرف المتصفح كم مساحة يحجز لها.
• تضمينات وإعلانات ولافتات تتأخر في التحميل وتدفع المحتوى للأسفل.
• خطوط ويب تستبدل الخط الاحتياطي بحجم مختلف فيُعاد توزيع النص.
• إشعارات ملفات الارتباط أو شرائط العروض تُحقن في أعلى الصفحة بعد أن اكتمل رسمها.

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

بأي ترتيب تعالج المشاكل؟

اعمل من أكبر مكسب إلى أصغره:

• قِس القوالب الرئيسية في الموقع (الصفحة الرئيسية، وصفحة خدمة، وصفحة منتج أو مقال)، لأن إصلاحًا واحدًا في قالب يحسّن كل صفحة تستخدمه.
• عالج أسوأ مؤشر في أكثر القوالب زيارة أولًا.
• أعد الاختبار على هاتف حقيقي ثم انتظر. بيانات الميدان تغطي 28 يومًا، فتظهر التحسينات تدريجيًا في Search Console.
• ضع فحص السرعة في قائمة الصيانة الشهرية حتى لا يتسلل سكربت بطيء مجددًا. وهو مدرج في قائمة صيانة الموقع.

أسئلة شائعة

ما هي نتيجة PageSpeed Insights الجيدة؟

الرقم الإجمالي نتيجة مختبرية، وليست ما تعتمده جوجل في الترتيب. انظر هل تجتاز بيانات الميدان المؤشرات الثلاثة. قد يحصل موقع على 85 في المختبر ويجتاز بسهولة، وقد يحصل آخر على 98 ويفشل في الميدان.

هل يجب أن تكون المؤشرات الثلاثة جيدة؟

لاجتياز تقييم Core Web Vitals يجب أن تقع الثلاثة في النطاق الجيد عند النسبة المئوية 75. إذا فشل أحدها لا تجتاز الصفحة، فابحث عن أضعف مؤشر أولًا.

لماذا تتغير نتائجي في كل مرة أختبر فيها؟

اختبارات المختبر تتأثر بالجهاز المحاكى وبشبكتك وبما كان يعمل في تلك اللحظة. الفروق الصغيرة طبيعية. ابحث عن الاتجاه عبر عدة تشغيلات، واعتمد على بيانات الميدان لتعرف الصورة الحقيقية.

السرعة تُبنى من البداية ولا تُلصق لاحقًا

أغلب مشاكل السرعة تُحسم في الأسبوع الأول من المشروع، في قرارات الصور والسكربتات والقوالب. وبهذا السبب تُكتب مشاريع تطوير المواقع عندنا يدويًا وتُجهَّز على الخادم. وإذا كان موقعك الحالي بطيئًا وتريد قراءة صريحة للسبب، فـأرسل لنا الرابط.