هل Magento بطيء على الهاتف المحمول؟ إليك لماذا Hyvä يحل هذه المشكلة
Magento على الهاتف المحمول بطيء. هذا ليس رأيًا شخصيًا. المتجر الافتراضي النموذجي من Magento Luma يسجل بين 30 و 55 في أداء Lighthouse على الهاتف المحمول، وهو أقل بكثير من عتبة "الجيد" من Google البالغة 90 وأقل بكثير مما تحتاجه التحويلات.
الأسباب محددة ومفهومة جيدًا. الحل أيضًا محدد: استبدال طبقة عرض الواجهة الأمامية. هذا بالضبط ما تفعله Hyvä. هذه المقالة هي "لماذا هو بطيء" التقنية + "ما الذي تغيره Hyvä."
لماذا Magento الافتراضي بطيء على الهاتف المحمول، في خمس طبقات
1. حمولة JavaScript
تقوم Magento الافتراضية بشحن عدة ميغابايت من JavaScript لكل صفحة. أكبر المساهمين:
- Knockout.js (~25KB مضغوط، بالإضافة إلى العشرات من نماذج العرض)
- RequireJS (~20KB مضغوط، بالإضافة إلى تكلفة التحميل المؤجل)
- مكونات واجهة مستخدم Magento، نظام تفاعلي ثقيل فوق Knockout
- jQuery (~30KB مضغوط، لا يزال مستخدمًا عبر قوالب Luma)
- جميع مكونات واجهة المستخدم لكل صفحة لعربة التسوق، عربة التسوق الصغيرة، محدد العنوان، إلخ.، هذه تُحمّل في كل صفحة سواء استخدمتها أم لا
حتى بعد الضغط، عادةً ما تصل حمولة JavaScript إلى 2-4 ميغابايت عبر PDP وPLP والعربة والدفع. على هاتف Android متوسط المدى مع اتصال 4G بطيء، يمكن أن تكون مدة تحليل JavaScript وحدها (انسَ التحميل، فقط تحليل JavaScript) من 3 إلى 6 ثوانٍ.
2. نمط حجب العرض
RequireJS هو نظام تحميل وحدات غير متزامن. في الممارسة العملية على Magento، تسلسل التمهيد هو:
- يقوم المتصفح بتحليل HTML
- يرى المتصفح نص تمهيد RequireJS الخاص بـ Magento
- يبدأ RequireJS في إرسال طلبات لشجرة الاعتماد
- كل اعتماد يحمل اعتمادات أخرى
- في النهاية تصبح الصفحة تفاعلية
النتيجة: وقت الطباعة الأولي جيد، لكن الوقت للتفاعل رهيب لأن الصفحة لا يمكنها الاستجابة للنقرات حتى يتم حل شجرة الاعتماد الخاصة بـ RequireJS.
3. عبء نماذج العرض الخاصة بـ Knockout
كل عنصر تفاعلي على صفحة Luma، أيقونة عربة التسوق الصغيرة، قائمة العناوين المنسدلة، محدد متغير المنتج القابل للتكوين، لديه نموذج عرض Knockout مرتبط به. عند تحميل الصفحة، يجب على كل نموذج عرض أن يتم تهيئته وربطه بهدفه في DOM.
هذا جيد على سطح المكتب. على الهاتف المحمول، تضيف مدة التحليل + الربط التراكمية لعشرات نماذج العرض من 1 إلى 3 ثوانٍ إلى الوقت للتفاعل حتى على صفحة نظيفة.
4. وزن HTML الناتج عن القالب
تنتج قوالب Magento Luma HTML ثقيل، مع العديد من divs المحيطة، وDOM متداخل بعمق، وأسماء فئات واسعة. يزن PDP النموذجي 200-400KB من HTML قبل تحميل أي صور للمنتج. على 4G، هذا ليس كارثيًا؛ على اتصال هاتف محمول غير مستقر، يكون مؤلمًا.
5. مضخم العلامات الخارجية
هذا هو السر القذر. حتى موقع Luma المحسن جيدًا يتفكك عندما تضيف فريق التسويق:
- Google Tag Manager الذي يحمل 8-15 علامة خارجية
- Hotjar / Microsoft Clarity لتسجيل الجلسات
- Yotpo / Trustpilot للمراجعات
- Klaviyo / Bloomreach لأتمتة التسويق
- أدوات الدردشة (Intercom، Zendesk، إلخ)
كل من هذه تضيف حمولة JavaScript + حجب العرض + عمل على الخيط الرئيسي. على Luma، غالبًا ما يكون العبء التراكمي من العلامات الخارجية أسوأ من JavaScript المقدم مع Magento نفسه.
لا تقوم Hyvä بإصلاح العلامات الخارجية سحريًا، لكن قاعدة Hyvä الأخف تعطيك المزيد من المساحة قبل أن يدفعك العبء الخارجي إلى ما دون العتبات.
ما الذي تغيرته Hyvä، طبقة تلو الأخرى
1. حمولة JavaScript: تقليل ~5x
تستبدل Hyvä Knockout + RequireJS + مكونات واجهة المستخدم بـ Alpine.js. Alpine هو ~15KB مضغوط. تصل إجمالي حمولة JavaScript على صفحة Hyvä النموذجية إلى 400-700KB، وهو تقليل بمعدل 5 مرات من Magento الافتراضي.
التقليل ليس فقط في حجم الحزمة الأصغر. لا تعاني Alpine من مشكلة تمهيد شجرة الاعتماد الخاصة بـ RequireJS، بل تقوم بتحليل سمات HTML بشكل مباشر. ينخفض الوقت للتفاعل من "بعد حل RequireJS" إلى "بعد تحليل المتصفح لـ HTML."
2. نمط العرض: HTML مُنتَج من الخادم، وليس مرتبطًا بـ JS
تميل Hyvä بشدة إلى HTML المُنتَج من الخادم. معظم محتوى الصفحة موجود في استجابة HTML، وليس مضافًا بواسطة JavaScript بعد تحميل الصفحة. تفاعلية Alpine مخصصة للتفاعل (النقرات، حالات التحويم، القوائم المنسدلة)، وليس لعرض المحتوى الأولي.
على الهاتف المحمول، يعني هذا أن وقت الطباعة الأولي وأكبر وقت طباعة محتوى يحدثان بشكل أسرع بكثير لأنهما لا ينتظران JavaScript لملء DOM.
3. نماذج عرض Knockout: غير موجودة
لا توجد نماذج عرض Knockout. هناك مكونات Alpine، لكنها بحجم عشر حجم نماذج عرض Knockout المعادلة ولا تعاني من عبء التمهيد. يتم تحديث أيقونة عربة التسوق الصغيرة لأن Alpine تنطلق عند حدث مخصص؛ وليس لأن اشتراك Knockout ينطلق بعد حل اعتماد requirejs.
4. HTML القالب: أنظف، أخف
تستخدم قوالب Hyvä فئات أدوات Tailwind بدلاً من أسماء فئات LESS-BEM. يؤدي هذا إلى سلاسل فئات أكثر قابلية للقراءة قليلاً في HTML ولكن عدد أقل بكثير من divs المحيطة لأن Tailwind يؤلف التخطيطات بشكل مباشر بدلاً من الاعتماد على مكونات التغليف المتداخلة. يكون HTML النموذجي لـ Hyvä أخف بنسبة 30-50% من HTML المعادل لـ Luma لنفس المخرجات المرئية.
5. العلامات الخارجية: مزيد من المساحة
لا تغير Hyvä كيفية عمل العلامات الخارجية، ولكن قاعدة Magento الأخف تعني أن لديك ميزانية أداء أكبر للعبء الخارجي قبل عبور عتبة Lighthouse 90. في الممارسة العملية: قد ينخفض موقع Luma عند Lighthouse 55 إلى 35 عندما يضيف التسويق ثلاث علامات GTM. قد ينخفض موقع Hyvä عند Lighthouse 92 إلى 85 بنفس العلامات، ولا يزال في المنطقة الخضراء.
أرقام الأداء النموذجية
لمقارنة متجر Luma وHyvä:
| المقياس | Luma النموذجي | Hyvä النموذجي |
|---|---|---|
| أداء Lighthouse على الهاتف المحمول | 30-55 | 80-92 |
| أكبر وقت طباعة محتوى (LCP) | 4.0-7.0 ث | 1.5-2.5 ث |
| التفاعل إلى الطباعة التالية (INP) | 400-900 مللي ثانية | 100-300 مللي ثانية |
| تحول التخطيط التراكمي (CLS) | 0.15-0.40 | 0.00-0.10 |
| إجمالي وقت الحجب (TBT) | 1500-4000 مللي ثانية | 100-400 مللي ثانية |
| حمولة JavaScript (لكل صفحة، مضغوط) | 2.0-4.0 ميغابايت | 400-700 كيلوبايت |
| الوقت للتفاعل (TTI) | 6-12 ث | 2-4 ث |
هذه هي النطاقات النموذجية عبر عمليات ترحيل Hyvä التي قمنا بقياسها. ستعتمد أرقامك على عدد الإضافات، وعدد العلامات الخارجية، وجودة تكوين Magento السابقة.
ما الذي لا تصلحه Hyvä
تعتبر الصراحة مهمة. Hyvä هو تبديل للواجهة الأمامية. لا يساعد في:
- استجابة خلفية Magento البطيئة (TTFB). إذا كان خادم Magento الخاص بك صغيرًا أو غير مفهرس، فإن وقت استجابة الخادم يبقى كما هو بعد Hyvä. Hyvä أسرع في المتصفح، وليس أسرع على الخادم.
- صور المنتجات الكبيرة. إذا كنت تقدم صور بطول 2 ميغابايت، فلن تقوم Hyvä بضغطها. تحسين الصور هو شيء منفصل.
- عبء العلامات الخارجية الثقيلة. تعطيك Hyvä ميزانية أكبر ولكن لا تلغي العبء.
- استعلامات قاعدة البيانات البطيئة على PDP. يبقى عرض PDP البطيء على جانب الخادم بطيئًا.
- مشكلات ملاءمة البحث. البحث الافتراضي في Magento هو ما هو عليه؛ تستخدم Hyvä نفس خلفية البحث.
تحتاج هذه إلى إصلاحات منفصلة. الحجة لصالح Hyvä هي انتصارات حمولة JavaScript + نمط العرض، وهي أكبر اختناقات محددة للهاتف المحمول لمعظم متاجر Magento.
ما بعد Hyvä، النقاط العشر التالية من Lighthouse
بعد أن تأخذك Hyvä من 40 إلى 88، تأتي النقاط الأربع إلى السبع التالية لدفعك إلى 90+ عادةً من:
- تضمين CSS الحرج، قم بإنتاج CSS فوق الطي من الخادم حتى لا ينتظر الطباعة الأولى ملف CSS
- تحسين الخطوط،
font-display: swap، تحميل مسبق للخطوط الحرجة، أوزان خط أقل - تلميحات أولوية الصورة،
fetchpriority="high"على صورة LCP،srcsetالمناسب للصور المتجاوبة - تدقيق العلامات الخارجية، تأجيل العلامات غير الحرجة عبر GTM، نقل التحليلات إلى جانب الخادم عبر Stape
- تقسيم كود JavaScript، تحميل كسول لأي شيء تحت الطي
هذا هو ضبط الأداء القياسي الذي ينطبق على أي موقع حديث. تجعل Hyvä من الممكن الوصول إلى الأهداف؛ لكنها لا تفعل ذلك تلقائيًا.
ماذا عن Hyvä Checkout؟
تعتبر صفحة الدفع في Magento الافتراضي هي السطح الأقل أداءً، بتدفق متعدد الخطوات مع JavaScript Knockout ثقيل وبدون أي توازي. غالبًا ما يسجل Lighthouse على الدفع الافتراضي في Magento في العشرينات.
تقوم Hyvä Checkout (منتج منفصل عن Hyvä Theme) بإعادة بناء عملية الدفع كعملية صفحة واحدة باستخدام Alpine.js. عادةً ما يسجل Lighthouse على Hyvä Checkout 88-95. يرتفع معدل إكمال الدفع على الهاتف المحمول بنسبة 8-15% عبر التطبيقات.
إذا كانت عملية الدفع على الهاتف المحمول هي عنق الزجاجة في التحويل، فإن Hyvä Checkout هو أعلى استثمار عائد على الاستثمار في Hyvä.
الخلاصة
مشكلة أداء Magento على الهاتف المحمول مفهومة جيدًا: حمولة JavaScript + نمط حجب العرض + عبء Knockout. تعالج Hyvä كل واحدة من هذه من خلال استبدال طبقة الواجهة الأمامية بكتلة أخف بشكل أساسي.
تتراوح تكاليف الترحيل من 12,000 إلى 35,000 جنيه إسترليني وتستغرق من 6 إلى 10 أسابيع. عادةً ما يكون تحسين Lighthouse على الهاتف المحمول +35 نقطة. رفع معدل إكمال الدفع على الهاتف المحمول (مع Hyvä Checkout) عادةً ما يكون +8-15%.
لمتجر Magento يحقق أكثر من 1 مليون جنيه إسترليني في الإيرادات السنوية مع حركة مرور ثقيلة على الهاتف المحمول، فإن الترحيل يسترد تكلفته في 6-9 أشهر فقط من التحويل + رفع SEO وحده.
الخطوات التالية
- راجع صفحة خدمة ترحيل Hyvä
- اقرأ لماذا سجل Lighthouse الخاص بك في Magento عالق عند 40 لقائمة التحقق من تحسين الأداء
- اقرأ هل تفشل مؤشرات الأداء الأساسية في Magento؟ إليك الحل للدليل الخاص بمؤشرات الأداء الأساسية
- احجز مكالمة تحديد نطاق للحصول على عرض سعر ثابت