هل تعاني متاجر Magento من فشل Core Web Vitals؟ إليك الحل
تتعرض متاجر Magento بانتظام لفشل Core Web Vitals على الهواتف المحمولة، وخاصة LCP و INP. يعني فشل CWV أن تصنيفك في فهرس Google الذي يركز على الهواتف المحمولة سيكون أقل من المنافسين الذين ينجحون؛ وتزداد تكلفة SEO بشكل ربع سنوي.
هذه المقالة هي تسلسل التشخيص + الحل الذي نستخدمه، بدءًا من دليل تحسين Luma والعمل نحو الحل المعماري (ترحيل Hyvä) عندما يصل سقف Luma.
الثلاثة Core Web Vitals، بلغة بسيطة
LCP، أكبر محتوى مرئي: كم من الوقت يستغرق حتى يظهر أكبر عنصر مرئي على الصفحة (عادةً الصورة الرئيسية أو العنوان الرئيسي). الهدف: أقل من 2.5 ثانية على الهواتف المحمولة. متوسط Luma في Magento: 4–7 ثوانٍ.
INP، التفاعل مع الطلاء التالي: كم من الوقت تستغرق الصفحة للاستجابة بعد أن ينقر المستخدم على شيء ما. الهدف: أقل من 200 مللي ثانية. متوسط Luma في Magento: 400–900 مللي ثانية (أحيانًا أسوأ بكثير).
CLS، التحول التراكمي في التخطيط: كم تقفز الصفحة أثناء تحميلها (تغيير الخطوط، تحميل الصور، حقن الإعلانات). الهدف: أقل من 0.1. متوسط Luma في Magento: 0.15–0.40.
تقوم Google بقياس هذه البيانات من خلال بيانات المستخدمين الحقيقيين عبر تقرير تجربة مستخدم Chrome (CrUX). تعطي اختبارات المختبر (Lighthouse) إشارة توجيهية؛ بينما CrUX هو ما يصنفك فعليًا.
كيفية التحقق من حالة CWV لمتجرك
ثلاثة أماكن للنظر:
1. PageSpeed Insights (pagespeed.web.dev)، يظهر نتائج اختبارات المختبر (Lighthouse) وبيانات الحقل (CrUX). تعتبر لوحة CrUX هي الأهم بالنسبة لـ SEO.
2. Google Search Console → تجربة → Core Web Vitals، تظهر حالة CWV الخاصة بك في العالم الحقيقي عبر الهواتف المحمولة وسطح المكتب، مع تجميعات URL (PDPs، PLPs، إلخ). هذا هو المصدر النهائي.
3. Lighthouse في Chrome DevTools، مفيد لتشخيص تغييرات الصفحة المحددة أثناء التطوير. أقل موثوقية من CrUX لأغراض التصنيف.
هدفك: الحصول على تقرير CWV من Search Console في نطاق "جيد" عبر جميع مجموعات URL على الهواتف المحمولة.
أنماط فشل CWV الشائعة على Magento
بترتيب تقريبي للتكرار:
فشل LCP، صورة رئيسية بطيئة / لافتة
السبب: صورة رئيسية كبيرة غير محسّنة، لا توجد إشارة أولوية، تحميل متأخر.
إصلاحات سريعة:
- أضف
fetchpriority="high"إلى صورة LCP - استخدم WebP/AVIF بدلاً من JPEG
- استخدم
srcsetالمتجاوب حتى تحصل الهواتف المحمولة على صورة بحجم مناسب - قم بتحميل صورة LCP مسبقًا في
الرفع النموذجي لـ Luma: -1 إلى -2 ثانية على LCP. غالبًا ما يكون كافيًا للانتقال من "ضعيف" (>4 ثوانٍ) إلى "يحتاج إلى تحسين" (2.5–4 ثوانٍ)؛ وأحيانًا كافي للوصول إلى "جيد" (<2.5 ثوانٍ).
فشل LCP، HTML قالب ثقيل + TTFB بطيء
السبب: يولد قالب Magento 200–400 كيلوبايت من HTML، ووقت استجابة الخادم (TTFB) هو 800–1500 مللي ثانية.
الإصلاحات:
- تفعيل التخزين المؤقت للصفحات بالكامل (Varnish + التخزين المؤقت الأصلي لـ Magento)
- الانتقال إلى استضافة أسرع (ضبط PHP-FPM، OPCache، جلسة Redis)
- تقليل وزن HTML للقالب (تحديد الأغطية المتداخلة، تقليم الكتل التجارية غير المستخدمة)
الرفع النموذجي: -0.5 إلى -1.5 ثانية على LCP. حقيقي ولكنه له سقف، قوالب Luma في Magento ثقيلة هيكليًا.
فشل INP، نماذج عرض Knockout الثقيلة
السبب: كل نقرة على صفحة Luma تُشغل منطق نموذج عرض Knockout الذي يكون بطيئًا على الهواتف المحمولة.
الإصلاحات:
- تقليل عدد نماذج العرض لكل صفحة (غالبًا ما يكون مستحيلًا دون كسر الإضافات)
- تأجيل تهيئة Knockout غير الحرجة
- تحسين المعالجات البطيئة المحددة (عربة التسوق الصغيرة، محدد العنوان)
الرفع النموذجي لـ Luma: 100–200 مللي ثانية على INP. لا يتحرك عادةً من "ضعيف" إلى "جيد" دون تغيير معماري.
فشل INP، سحب العلامات من الطرف الثالث
السبب: علامات GTM، التحليلات، أدوات الدردشة تعمل على الخيط الرئيسي أثناء التفاعل.
الإصلاحات:
- تحليلات من جانب الخادم (Stape، sGTM)
- تأجيل العلامات غير الأساسية عبر شروط تشغيل GTM
- تدقيق عدد العلامات وإزالة الزائدة منها
الرفع النموذجي: 100–400 مللي ثانية على INP. غالبًا ما تكون أكبر فائدة فردية لـ INP.
فشل CLS، تبديل الخطوط والصور
السبب: تحميل خطوط الويب بعد عرض الصفحة يغير التخطيط؛ الصور بدون أبعاد تسبب إعادة تدفق عند تحميلها.
الإصلاحات:
font-display: swap+ تحميل مسبق للخطوط الحرجة- تعيين خصائص
widthوheightعلى جميع الصور (تقوم المتصفحات الحديثة بحجز المساحة) - حجز مساحة لحقن الإعلانات / حاويات اللافتات
الرفع النموذجي: عادةً ما ينتقل من "يحتاج إلى تحسين" إلى "جيد" مع هذه التغييرات الثلاثة.
تسلسل التشخيص لـ CWV
لأي متجر Magento يفشل في CWV، اعمل من خلال هذا:
الخطوة 1: احصل على خط الأساس من Search Console. لاحظ الحالة الحالية عبر الهواتف المحمولة + سطح المكتب لمجموعات URL (PDP، PLP، البحث، السلة، الخروج).
الخطوة 2: حدد أسوأ فشل. أي مقياس يفشل في أي مجموعة URL؟ ركز هناك أولاً.
الخطوة 3: قم بتشغيل PageSpeed Insights على أسوأ URL فاشل. تحقق من لوحات "الفرص" و"التشخيصات" للحصول على توصيات محددة.
الخطوة 4: نفذ أفضل 2-3 توصيات. لا تحاول إصلاح كل شيء دفعة واحدة. قم بشحن تغيير واحد، ثم قياس، ثم شحن التالي.
الخطوة 5: أعد القياس بعد 28 يومًا. بيانات CrUX تتعلق بآخر 28 يومًا؛ تحتاج إلى ~4 أسابيع من حركة مرور المستخدمين الحقيقيين لرؤية تغييراتك تنعكس في Search Console.
الخطوة 6: قرر ما إذا كان تحسين Luma له سقف. إذا كنت قد عملت من خلال الدليل وما زلت تفشل في CWV على الهواتف المحمولة، فهذا هو السقف المعماري، انظر أدناه.
سقف تحسين Luma
بعد تنفيذ دليل أداء Luma القياسي (CSS الحرجة، تحميل الخطوط، أولوية الصور، تدقيق العلامات من الطرف الثالث، التخزين المؤقت من جانب الخادم)، تصل معظم متاجر Magento Luma إلى:
- أداء Lighthouse على الهواتف المحمولة: 55–70
- LCP على الهواتف المحمولة: 2.5–3.5 ثوانٍ (فقط عند أو فوق عتبة "جيد")
- INP على الهواتف المحمولة: 250–500 مللي ثانية (فوق عتبة "جيد")
- CLS على الهواتف المحمولة: 0.05–0.15 (عادةً ما يمكن تحقيقه في نطاق "جيد")
يمكن ضبط LCP و CLS في نطاق الجيد على Luma. غالبًا ما لا يمكن ضبط INP، لأن عبء نموذج عرض Knockout هيكلي.
بالنسبة للمتاجر العالقة في "تحتاج إلى تحسين" أو "ضعيف" INP بعد الدليل، الخطوة التالية هي ترحيل Hyvä. هذا هو الحل المعماري.
ما الذي يتغير بعد ترحيل Hyvä
نفس المقاييس، بعد Hyvä:
- أداء Lighthouse على الهواتف المحمولة: 80–92 (كان 30–55، الآن عادةً جميعها خضراء)
- LCP على الهواتف المحمولة: 1.5–2.5 ثوانٍ (داخل منطقة "جيد")
- INP على الهواتف المحمولة: 100–300 مللي ثانية (معظمها "جيد"، أحيانًا "يحتاج إلى تحسين" اعتمادًا على العلامات من الطرف الثالث)
- CLS على الهواتف المحمولة: 0.00–0.10 (تقريبًا جميعها خضراء)
عادةً ما ينقل ترحيل Hyvä المتجر من "ضعيف" CWV عبر اللوحة إلى "جيد" CWV عبر اللوحة. هذه هي العائد المعماري.
متى يكون تحسين Luma هو الإجابة الصحيحة
ليس كل متجر يحتاج إلى ترحيل Hyvä لإصلاح CWV. ابق مع تحسين Luma إذا:
- متجرك صغير (<500,000 جنيه إسترليني إيرادات سنوية) وتكلفة الترحيل لن تعود
- أنت تعيد منصة خارج Magento في غضون 12 شهرًا
- إصدار Magento الخاص بك ليس مدعومًا بعد من Hyvä
- أنت بالفعل قريب من "جيد" CWV وتحتاج فقط لدفع آخر 5–10 نقاط
في هذه الحالات، يكون دليل Luma كافيًا. أنفق من 3,000 إلى 8,000 جنيه إسترليني على استشارات تحسين الأداء؛ ادخل في نطاق الجيد؛ وانتقل.
متى يكون Hyvä هو الإجابة الصحيحة
قم بالترحيل عندما:
- أنفقت أكثر من 5,000 جنيه إسترليني على تحسين أداء Luma وما زلت تفشل في INP على الهواتف المحمولة
- أداء Lighthouse على الهواتف المحمولة عالق تحت 60 على الرغم من الدليل
- أنت ملتزم بـ Magento لمدة 24 شهرًا أو أكثر
- تحقق إيرادات تزيد عن 1,000,000 جنيه إسترليني (تكلفة الترحيل تعود في غضون عام)
السقف المعماري على Luma حقيقي. لا تستمر في ضخ الأموال في حفرة تحسين الأداء عندما يكون الترحيل أرخص.
ماذا عن إشارات تجربة الصفحة بخلاف CWV؟
تشمل إشارة تجربة الصفحة من Google Core Web Vitals بالإضافة إلى:
- HTTPS (عالميًا في هذه المرحلة)
- تصميم متوافق مع الهواتف المحمولة
- عدم وجود إعلانات مزعجة
عادةً ما تكون هذه الأمور جيدة على Magento، حيث تمر القوالب الحديثة، والتجاوب مع الهواتف المحمولة هو المعيار. الجزء المتعلق بـ CWV هو ما يفشل في كثير من الأحيان.
انتصارات سريعة للشحن هذا الأسبوع
إذا كنت ترغب في تحسين CWV دون الالتزام بمشروع كبير، فإن التغييرات الأربعة الأعلى عائدًا:
fetchpriority="high"على صورة LCP، تغيير يستغرق 10 دقائق، غالبًا ما ينقل LCP بمقدار 1–2 ثانية- أبعاد الصورة على جميع
font-display: swap، يصلح CLS للتحولات الناتجة عن الخطوط- GTM من جانب الخادم عبر Stape، ينقل التحليلات من الخيط الرئيسي للعميل، وغالبًا ما تكون أكبر فائدة لـ INP
كل من هذه التغييرات تتطلب نصف يوم إلى يومين من العمل. مجتمعة، غالبًا ما تنقل CWV من "ضعيف" إلى "يحتاج إلى تحسين" أو حتى "جيد" دون أي تغيير معماري.
الخطوات التالية
- انظر Magento بطيء على الهواتف المحمولة؟ إليك لماذا تصلح Hyvä ذلك للتشخيص المعماري
- انظر لماذا عالق نتيجة Lighthouse الخاصة بك عند 40 لدليل تحسين Luma
- احجز تدقيق Lighthouse مجاني، سنقوم بتشخيص متجرك ونخبرك ما إذا كان ضبط Luma أو ترحيل Hyvä هو الأنسب
- تصفح مدخل مصطلحات Core Web Vitals للتمهيد الفني