Core Web Vitals على WordPress: ما الذي يحرّك LCP و INP فعلاً

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

ما تقيسه المؤشرات الثلاثة

• Largest Contentful Paint (LCP): كم يستغرق ظهور أكبر عنصر في الشاشة الأولى. في معظم الصفحات هو صورة الـ Hero أو العنوان. الهدف: أقل من 2.5 ثانية على الجوال.
• Interaction to Next Paint (INP): كم تستغرق الصفحة للاستجابة بعد نقرة أو لمسة، مقاساً على مدى الزيارة كلها. الهدف: أقل من 200 ميلي ثانية.
• Cumulative Layout Shift (CLS): كم يقفز التخطيط أثناء التحميل. الهدف: أقل من 0.1.

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

الأسباب الخمسة بترتيب تكرارها عندنا

1. صور مرفوعة بدقة الكاميرا

صورة JPEG بعرض 4,000 بكسل من الهاتف حجمها 3 إلى 5 MB. حين توضع في خانة Hero تُعرض بعرض 1,200 بكسل، تُحمَّل كاملة، وتُفكّ، وتُصغَّر، وهي عنصر الـ LCP. صورة واحدة قد تضيف ثلاث ثوانٍ على اتصال جوال.

الإصلاح: غيّر الحجم عند الرفع إلى أكبر مقاس يستخدمه التخطيط، وحوّل إلى WebP، وتأكد أن الـ Theme يصدر srcset ليحصل الجوال على ملف أصغر. راجع صفوف «Properly size images» و «Serve images in next-gen formats» في PageSpeed؛ فهي تسمّي الملفات. ثم اضبط width و height صريحين على كل صورة ليحجز المتصفح مكانها، وهذا يصلح معظم مشاكل CLS أيضاً.

2. لا Caching، أو Caching لا يُطبَّق

يبني WordPress كل صفحة من قاعدة البيانات عند كل طلب ما لم يخزّن شيء النتيجة. بلا Caching قد تستغرق استجابة الـ Server وحدها ثانية إلى ثانيتين، ولا يمكن لأي شيء آخر أن يبدأ قبل وصولها.

الإصلاح: Page Caching على مستوى الـ Hosting أو عبر Plugin، و CDN أمام الـ Origin، و Cache Headers على الملفات الثابتة بمدد تُقاس بالأشهر. افحص Response Headers لصفحة مخزّنة: الإصابة (Hit) يجب أن تعود في أقل من 200 ميلي ثانية. وإن كان الـ Hosting مشتركاً وبطيئاً فلن ينقذه أي Plugin؛ انتقل.

3. CSS وخطوط تعطّل الرسم

كل Theme وكل Plugin يضيف ملفات أنماط، ولا يرسم المتصفح شيئاً حتى تصل كلها. والخطوط المحمّلة من طرف ثالث تضيف جولة شبكة، وبلا font-display: swap تخفي النص حتى تُحمَّل.

الإصلاح: أزل الـ Plugins التي تضيف أنماطاً إلى صفحات لا تستخدمها، وضمّن الـ Critical CSS لأعلى الصفحة إن كان الـ Theme يدعم ذلك، واستضف الخطوط ذاتياً، وقلّصها إلى الأحرف التي تحتاجها، واضبط font-display: swap. وللمواقع العربية والإنجليزية معاً، حمّل الخط العربي على الصفحات العربية فقط واللاتيني على اللاتينية فقط؛ وصف unicode-range يفعل ذلك دون أي منطق لكل صفحة.

4. Scripts من أطراف ثالثة

الـ Tag Manager الذي يحمّل ثمانية Tags، وأداة الدردشة، وتضمين الشبكات الاجتماعية، ومسجّل الخرائط الحرارية، ومشغّل الفيديو على كل صفحة. كل منها يشغّل JavaScript على الـ Main Thread، و INP مقياس لانشغال الـ Main Thread لحظة يلمس الزائر الشاشة.

الإصلاح: اكتب كل Domain خارجي تحمّله الصفحة والسبب التجاري لوجوده. أزل ما لا سبب له. أجّل الباقي ليُحمَّل بعد أن تصبح الصفحة تفاعلية، وحمّل أداة الدردشة عند النقر لا عند فتح الصفحة. واربط Tags التحليلات والإعلانات بموافقة المستخدم، فيتأخر تحميلها أيضاً لمن يرفض.

5. Themes ثقيلة و Page Builders

يصدر الـ Page Builder إطار CSS خاصاً به، و JavaScript خاصاً به، و Markup أعمق بثلاث مرات مما يحتاجه التصميم. والـ Sliders ومكتبات الحركة وتأثيرات Parallax تضيف المزيد. النتيجة صفحة رئيسية بحجم 4 MB و Total Blocking Time يتجاوز الثانية.

الإصلاح: إن كان الموقع صغيراً فأعد بناء القوالب التي تجلب الزيارات في Theme خفيف وتخلّ عن الـ Builder. وإن تعذّر ذلك فعطّل وحدات الـ Builder غير المستخدمة، وأزل الـ Slider (صورة Hero ثابتة أسرع وتحوّل بالقدر نفسه)، وأوقف الحركات على الجوال.

ترتيب العمل

نفّذ الخطوة 1 قبل أي شيء. هي أكبر كسب، ولا تحتاج مطوّراً، وتخبرك كم من المشكلة كان صوراً فقط.

كيف تقيس دون أن تخدع نفسك

1. خذ خط أساس: PageSpeed Insights للجوال على الصفحة الرئيسية وصفحة خدمة ومقال، ولقطة شاشة لتقرير Core Web Vitals في Search Console. احتفظ بها.
2. غيّر شيئاً واحداً في كل مرة وأعد الاختبار المعملي. إن لم يتحرك الرقم فتراجع عن التغيير.
3. انتظر 28 يوماً ليعكس التقرير الميداني التغيير. قد تنجح النتيجة المعملية بينما ما زال الزوار الحقيقيون على اتصالات بطيئة يفشلون؛ وذلك هو الرقم الذي يُحتسب.
4. راقب INP تحديداً بعد إضافة أي Plugin. فهو المؤشر الذي يتراجع بصمت.

أين تنتهي مواقع WordPress بعد هذا

موقع الشركة المعتاد الذي نعمل عليه يصل بـ LCP على الجوال بين أربع وسبع ثوانٍ ويغادر بواحد بين 1.5 و 2.5. الخطوتان الأوليان مسؤولتان عن معظم ذلك. أما INP فهو العنيد، لأنه يعتمد على Scripts أطراف ثالثة تتعلّق بها الشركة؛ والحوار الصادق هناك هو أي الأدوات تنتج Leads فعلاً وأيها مجرد عادة.

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