سرعة الموقع ليست رفاهية. الزائر لا ينتظر كثيرا، ومحركات البحث تهتم بتجربة المستخدم. لذلك ظهرت مقاييس Core Web Vitals لتساعد أصحاب المواقع والمطورين على فهم جودة التجربة بأرقام واضحة.
الموضوع قد يبدو تقنيا في البداية: LCP وINP وCLS. لكن الفكرة بسيطة: هل الصفحة تظهر بسرعة؟ هل تستجيب بسرعة؟ هل تبقى مستقرة أثناء التحميل؟
هذا المقال يشرح المقاييس الثلاثة بلغة عملية، ثم يعطيك خطوات لتحسينها.
ما هي Core Web Vitals؟
Core Web Vitals هي مجموعة مقاييس من Google تركز على تجربة المستخدم الحقيقية في الصفحة:
- LCP: سرعة ظهور أكبر عنصر مهم في الشاشة.
- INP: سرعة استجابة الصفحة لتفاعل المستخدم.
- CLS: مدى ثبات التصميم وعدم قفز العناصر.
هذه المقاييس لا تقيس كل شيء، لكنها تعطي صورة جيدة عن مشاكل الأداء التي يشعر بها المستخدم فعلا.
LCP: متى يظهر المحتوى الرئيسي؟
LCP اختصار لـ Largest Contentful Paint. يقيس الوقت الذي يحتاجه أكبر عنصر مرئي في الشاشة الأولى حتى يظهر للمستخدم. هذا العنصر قد يكون:
- صورة hero.
- عنوان كبير.
- بلوك نصي كبير.
- صورة منتج.
إذا كان LCP بطيئا، يشعر الزائر أن الموقع بطيء حتى لو ظهرت عناصر صغيرة بسرعة.
كيف تحسن LCP؟
ابدأ بهذه الخطوات:
- اضغط الصور الكبيرة.
- استخدم WebP أو AVIF عند الإمكان.
- لا تستخدم
loading="lazy"على صورة hero أو الصورة الرئيسية أعلى الصفحة. - اجعل الصورة المهمة موجودة في HTML مباشرة، لا تحملها عبر JavaScript متأخر.
- قلل CSS وJavaScript الذي يمنع العرض الأول.
- استخدم استضافة سريعة وCDN.
- فعّل cache للملفات الثابتة.
في مواقع Astro مثلا، غالبا يكون LCP جيدا إذا كانت الصفحة static والصور مضغوطة. المشكلة تظهر عادة من صورة كبيرة جدا أو خط خارجي بطيء أو فيديو في أول الشاشة.
INP: هل الصفحة تستجيب بسرعة؟
INP اختصار لـ Interaction to Next Paint. يقيس استجابة الصفحة لتفاعلات المستخدم مثل:
- الضغط على زر.
- فتح قائمة.
- الكتابة في input.
- اختيار filter.
إذا ضغط المستخدم على زر ولم يحدث شيء بسرعة، فهذا يؤثر على INP.
كيف تحسن INP؟
المشكلة غالبا تكون JavaScript كثير أو مهام طويلة تمنع المتصفح من الرد.
خطوات عملية:
- قلل JavaScript غير الضروري.
- قسم الكود إلى أجزاء أصغر.
- لا تحمل مكتبات كبيرة لزر بسيط.
- أجل السكربتات غير المهمة.
- تجنب إعادة render كبيرة في React.
- استخدم debounce للبحث أثناء الكتابة.
- لا تنفذ عمليات ثقيلة داخل حدث click مباشرة.
إذا كان موقعك عبارة عن صفحات محتوى، لا تضف مكتبات تفاعلية ضخمة بدون سبب. كل كيلوبايت JavaScript يجب أن يخدم هدفا واضحا.
CLS: هل التصميم يقفز؟
CLS اختصار لـ Cumulative Layout Shift. يقيس مقدار تغير أماكن العناصر أثناء تحميل الصفحة.
مثال مزعج: تبدأ في قراءة عنوان، ثم تظهر صورة فوقه فينزل النص فجأة. أو تحاول الضغط على زر، ثم يتحرك بسبب إعلان أو خط لم يكتمل تحميله.
كيف تحسن CLS؟
- ضع
widthوheightلكل صورة. - احجز مساحة للفيديو والإعلانات قبل تحميلها.
- لا تضف عناصر فوق المحتوى بعد التحميل بدون مساحة محفوظة.
- استخدم خطوطا بطريقة تقلل تغير الحجم عند التحميل.
- تجنب إدخال banners متأخرة في أعلى الصفحة.
في المدونات، أكثر سبب شائع لـ CLS هو الصور بدون أبعاد. بمجرد إضافة width وheight أو aspect-ratio، تتحسن المشكلة كثيرا.
العلاقة بين السرعة والسيو
السيو ليس سرعة فقط. المحتوى، النية البحثية، الروابط، بنية الموقع، والعناوين كلها مهمة. لكن السرعة تؤثر على تجربة الزائر. إذا دخل الزائر وخرج بسبب البطء، فأنت تخسر فرصة قراءة وتحويل.
Core Web Vitals تساعدك على تحسين:
- بقاء المستخدم في الصفحة.
- سهولة التصفح على الموبايل.
- معدل التحويل.
- جودة تجربة صفحات المقالات والخدمات.
لا تتعامل معها كأرقام لإرضاء أداة فقط. تعامل معها كطريقة لفهم إحساس الزائر.
خطوات عملية لتحسين موقعك
1. ابدأ بالصور
الصور غالبا أكبر سبب للبطء.
افعل التالي:
- حول الصور إلى WebP.
- أنشئ أحجاما متعددة للصورة.
- استخدم
srcsetوsizes. - اجعل الصور تحت الشاشة lazy.
- لا تجعل صورة LCP lazy.
2. قلل JavaScript
اسأل عن كل سكربت:
- هل نحتاجه في أول تحميل؟
- هل يعمل في كل الصفحات؟
- هل يمكن تحميله عند الحاجة؟
- هل يوجد بديل أخف؟
مواقع المحتوى لا تحتاج غالبا JavaScript كثير.
3. استخدم cache
الملفات الثابتة مثل CSS وJS والصور يجب أن تحصل على cache طويل عند النشر. أما HTML وXML فيفضل أن يبقيا قابلين للتحديث بسرعة.
4. حسّن الخطوط
الخطوط الخارجية قد تؤخر العرض. استخدم أوزانا قليلة، وفكر في استضافة الخط محليا إذا كان مهما جدا للأداء.
5. راقب على الموبايل
كثير من المواقع تبدو سريعة على جهاز المطور، لكنها بطيئة على هاتف متوسط واتصال ضعيف. اختبر دائما على الموبايل.
أدوات القياس
استخدم:
- PageSpeed Insights.
- Lighthouse.
- Chrome DevTools Performance.
- Search Console Core Web Vitals.
لا تعتمد على نتيجة واحدة فقط. افحص الصفحة الرئيسية، صفحة مقال، وصفحة خدمة.
Checklist سريع
- هل صورة hero مضغوطة؟
- هل الصور لها width وheight؟
- هل الصور البعيدة lazy؟
- هل JavaScript ضروري؟
- هل الخطوط قليلة؟
- هل cache مضبوط؟
- هل الاستضافة مستقرة؟
- هل اختبرت على الموبايل؟
خلاصة
Core Web Vitals ليست مجرد مصطلحات تقنية. LCP يعني أن المحتوى الرئيسي يظهر بسرعة. INP يعني أن الصفحة تستجيب للمستخدم. CLS يعني أن التصميم ثابت ولا يقفز.
ابدأ بالصور، ثم JavaScript، ثم cache، ثم الخطوط والاستضافة. غالبا ستحصل على تحسن كبير بدون إعادة بناء الموقع من الصفر.
