تحسين سرعة Magento 2: أثبت البحث أن الوظيفة الافتراضية كافية

مقدمة

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

في الجزء الأول من هذه المقالة ، سنحاول معرفة وعرض ما إذا كان من الممكن تسريع وقت تحميل صفحة Magento 2 باستخدام الوسائل القياسية أم لا ، والأهم من ذلك ، تحديد مدى فعالية هذه الوسائل.

في الجزء الثاني ، سنقدم نظرة ثاقبة على فعالية حلول ومناهج الطرف الثالث.

بيئة الاختبار

سيتم إجراء جميع القياسات في Chrome Audit باستخدام قيود "For mobile device with simulation Fast 3G":

سيتم استخدام Magento 2.3.1 المكشوف في حاوية Docker في المراجعة. سيسمح لنا هذا بعزل الموارد.

سنقوم بقياس الأداء في وضع الإنتاج باستخدام ذاكرة التخزين المؤقت المدمجة الممكّنة بالكامل.

سيتم إجراء الاختبار على ثلاث صفحات موقع: الصفحة الرئيسية والمنتج والفئة. لكل صفحة من هذه الصفحة ، سنقوم بإجراء فحوصات تدقيق ثلاث مرات. سيتم تحديد متوسط ​​نتيجة الاختبار.

نظرًا لأننا لن نجري اختبار التحميل - بينما سيتم تغطية وقت تحميل الصفحات على جانب العميل في المستعرض بشكل أساسي في هذه المقالة - لن يتم تحديد إصدارات MySQL و PHP. لن تكون النتيجة بشروطها المطلقة ولكن الاختلاف في الأداء بين التكوينات المختلفة سيكون ذا أهمية قصوى بالنسبة لنا.

كيف يمكن تسريع وقت تحميل الصفحة باستخدام وسائل Magento القياسية والخادم؟

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

الفصل 1. إعداد Magento وتكوين الخادم

Gzip

كما يتضح من الجدول أدناه ، فإن أول وأهم شيء يجب القيام به - أنت على حق ، لا علاقة له بإعداد Magento - هو تمكين الضغط على الخادم. حجم البيانات هو العامل الرئيسي الذي يحدد سرعة التحميل في شبكات المحمول البطيئة. مع تمكين الضغط ، يتم تصوير الموقع بشكل أسرع. يتضمن العيب الذي لا مفر منه زيادة في معلمة First CPU Idle كنتيجة للتفريغ على جانب الخادم.

بدون Gzip:

مع تمكين Gzip:

تصغير Js و CSS

ماذا لو حاولنا تقليل حجم البيانات المرسلة بشكل أكبر؟ في المقام الأول ، لنقم بتمكين Minify Js و Minify CSS. ثم قم بإجراء مقارنة.

يمكن العثور على جميع التكوينات المتعلقة بالتحسين في المتاجر -> التكوين -> المطور:

علامة التبويب متاحة فقط في وضع المطور . أثناء وجودك في وضع الإنتاج ، تأكد من التبديل إلى وضع المطور أولاً ، باستخدام الأمر التالي:

 > bin/magento deploy:mode:set developer

بعد ذلك ، ستتمكن من رؤية قسم Developer ، وإجراء تغييرات التكوين اللازمة ، ومسح ذاكرة التخزين المؤقت ، والعودة إلى وضع الإنتاج مرة أخرى:

 > bin/magento deploy:mode:set production

بناءً على ذلك ، يتم نشر المحتوى الثابت.

تتم إضافة اللاحقة min إلى ملفات js / css:

لقد انخفض حجم البيانات بالفعل! للصفحة الرئيسية ، تم نقل 1 ميغا بايت بدلاً من 1.3 ميغا بايت.

إذا كنت تعتقد أن هذا قد أدى إلى تحسين معاييرنا بمقدار الثلث ، فأنت مخطئ. لقد تحسن الوضع ، لكن ليس بشكل ملحوظ.

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

دمج Js ودمج CSS

الآن ، سيكون من المنطقي افتراض أن المزيد من التحسينات يجب أن تكون مرتبطة بانخفاض عدد الطلبات بدلاً من أحجام البيانات.

لنجربها ونمكّن تكوينات Merge Js و Merge CSS.

لاحظ أن Magento نفسها تصف هذه الميزة بأنها ميزة قديمة:

لا نوصي باستخدام الإعدادات المهملة مثل دمج ملفات JS و CSS ، حيث تم تصميمها فقط من أجل JS التي يتم تحميلها بشكل متزامن في قسم HEAD من الصفحة. قد يؤدي استخدام هذه التقنية إلى التجميع ويتطلب عمل منطق JS بشكل غير صحيح.

ومع ذلك ، فلنجرّب الأمر:

التغييرات في عدد الطلبات ليست مثيرة للإعجاب ، أليس كذلك؟

على الرغم من تحسين معلمات مثل "First Contentful Paint" و "First Meaningful Paint" ، إلا أنه يوجد بالتأكيد مجال للتحسينات.

حزمة JS

دعونا نجرب تقنية JS Bundle ، حيث يتم تجميع ملفات js بناءً على حجم ثابت. يتيح لنا ذلك إدارة عدد الطلبات بينما يظل حجم البيانات الإجمالي دون تغيير.

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

نعم ، يمكنك استبعاد بعض ملفات js من الحزم (يتم استبعاد بعضها افتراضيًا). ومع ذلك ، لا يمكنك القيام بذلك لصفحة معينة.

لا توصي Magento أيضًا بتمكين Bundle JS في وضع الإنتاج. يبدو أنه خيار ثانٍ متاح ، لكن في الواقع - ليس حقًا.

حزمة JS المتقدمة

يتعرف Magento على الصعوبات التي تواجهها Bundles JS ولكنه يعرض عليك تجنب معالجتها بنفسك. في الدليل الرسمي ، ستجد مثالاً عن كيفية إمكانية تجميع ملفات js المطلوبة فقط في الصفحة الحالية. نعم ، هذا أصعب قليلاً من تغيير معلمة في config. بالنسبة إلى الحزمة المتقدمة ، سيتعين عليك استخدام Nodejs و Require JS و Phantom JS. بالطبع ، هذا ليس حلاً جاهزًا. ولكن بعد اختبار الآلية المعروضة ، سيكون لدينا فكرة عن كيفية قيام "الحزمة المتقدمة" بتسريع وقت تحميل الصفحة ، من المنظور النظري.

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

في النهاية ، تتم كتابة الحزم المجمعة في تتطلب js وتحميلها على الصفحة:

في كل نوع صفحة (بطبيعة الحال ، التي تم جمع حزمة لها) ، يتم تحميل حزمة معينة. سيكون هذا مثالاً للصفحة الرئيسية:

يبدو أنه بعد تقليل عدد الطلبات ، لا يتم تحميل البيانات الإضافية ويجب أن يزيد الأداء بشكل كبير ... ولكن الأهمية الحاسمة لـ SEO First Contentful Paint و First Meaningful Paint قد زادت بشكل كبير أيضًا. منطقي. حتى يتم تحميل ملف الحزمة ، لن يحدث أي تعقب.

________________

يبدو أننا بذلنا قصارى جهدنا أم لا؟ أعتقد أن الوقت قد حان للمضي قدمًا وتجربة التقنيات الحالية.

HTTP / 2

لنقم بتعطيل Bundle JS في Magento وتمكين HTTP / 2 على الخادم.
في حالتنا ، إنها مجرد nginx. ما قمنا به هو تغيير بضعة أسطر - تمت إضافة دعم http2 لمنفذ 443.

 listen 80; listen 443 ssl http2; server_name md201.local; ssl_certificate /etc/nginx/ssl-certificates/md201.local/localhost.crt; ssl_certificate_key /etc/nginx/ssl-certificates/md201.local/localhost.key;

للاختبار في Chrome ، سنحتاج إلى إضافة الشهادة الموقعة ذاتيًا إلى مرجع الجذر الموثوق (MacOS في حالتنا).

إليك كيف يبدو اتصال HTTP / 2:

لقد أدى هذا إلى تحسين جميع المعلمات دون أي استثناء! يعود الأمر كله إلى ميزات تقنية HTTP / 2.

تقليل التأخيرات في الوصول لتسريع وقت تحميل الصفحة ، ولا سيما عن طريق:

• ضغط البيانات في رؤوس HTTP ،
• استخدام تقنيات puch من جانب الخادم ،
• طلبات نقل ،
• قرار حظر بروتوكولات HTTP 1.0 / 1.1 من رأس الخط ،
• تعدد إرسال العديد من الطلبات في اتصال TCP واحد.

باستخدام HTTP / 2 ، لن يمثل عدد كبير من الطلبات مشكلة نظرًا لعدم فتح اتصال TCP لكل طلب.

HTTP / 2 مدعوم بإصدارات حديثة من nginx و apache في غالبية المتصفحات الفعلية: https://caniuse.com/#search=http2

في هذا الصدد ، قد يكون لديك السؤال التالي: ماذا لو قمنا بدمج حزمة JS المتقدمة و HTTP / 2؟

نظريًا ، لن يؤدي ذلك إلى تسريع وقت تحميل الصفحة نظرًا لأن HTTP / 2 لا يتمتع بمزايا كبيرة في تحميل ملفات js ذات الحزم الكبيرة. ولكن لمعرفة ذلك بالتأكيد ، دعنا نتحقق منه.

كما نرى ، فإن استخدام Advanced Bundle JS ضمن اتصال HTTP / 2 لا يؤدي إلى تحسين السرعة.

تعد محاولة ضبط الحزم عملية تستغرق وقتًا طويلاً. يتطلب إعادة إنشاء الحزم بعد تحديث Magento أو ملحق جهة خارجية (يضيف JS على الواجهة الأمامية) ، وكذلك بعد إضافة أنواع منتجات جديدة تربط js الخاصة بهم أو التي لا تستخدم js لمنتج آخر أنواع. في الأساس ، هناك المزيد من الفروق الدقيقة التي يجب مراعاتها. في رأيي ، لن يؤدي الانتقال إلى Bundle JS إلى نتائج مهمة إذا كان لديك إمكانية لاستخدام HTTP / 2.

ما هي الوسائل الأخرى لتحسين السرعة الموجودة؟ هل من الممكن جعل وقت تحميل الصفحة أسرع؟

_______________

انقل كود JS إلى أسفل الصفحة

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

عند التمكين ، يتم نقل بعض ملفات js من قسم <head> إلى نهاية </body> ، مما يؤدي إلى تسريع بداية تصور الموقع نظريًا.

هذا ما كان لدينا في البداية:

إليك ما حصلنا عليه بعد تمكينه:

لإجراء مثل هذا الاختبار ، كان علينا تحديث إصدار Magento الخاص بنا إلى 2.3. تم تغيير كمية وحجم الملفات المتصلة. لذلك ، يمكن أن تكون نتائج الاختبار تقريبية. لفهم كيفية تأثير إصدار Magento نفسه على النتائج ، قمنا بمقارنة إصدارات M2.3.1 مقابل M2.3.2 مع تركيبة HTTP / 2 + Minify JS / CSS أولاً - وكانت النتائج التي تم الحصول عليها متساوية عمليًا ، والتي لا تتجاوز الارتياب في القياس.  

كما نرى ، تم تحسين First Contentful Paint و First Meaningful Paint في جميع الحالات بنسبة 10-15٪.

ضمن جميع الوسائل التي تم استعراضها لتحسين سرعة Magento ، يبدو أن المتغيرات التالية في الصدارة:

Gzip + Minify JS / CSS + HTTP / 2 + انقل كود JS إلى أسفل الصفحة

دعنا نعتبرها نقطة انطلاق ونتحرك إلى أبعد من ذلك. في السابق ، كنا نلعب مع التكوينات التي تمس JS / CSS فقط. وبالتالي ، هناك جوانب معينة يمكن تحسينها.

تصغير Html

يمكن العثور على الإعداد هنا:

جزء HTML من الصفحة الرئيسية - 89 كيلوبايت قبل و 88.7 بعد HTML تصغير / مع الضغط على الخادم - 12.2 مقابل 12.1 كيلوبايت.

جزء HTML من صفحة الفئة - 155 كيلوبايت قبل و 100 بعد HTML Minify / مع الضغط على الخادم - 16،8 مقابل 15،2 كيلوبايت.

جزء HTML من صفحة المنتج - 80 كيلوبايت قبل و 67 بعد HTML تصغير / مع الضغط على الخادم - 15 مقابل 14،1 كيلوبايت.

نظرًا لاستخدام الضغط على جانب الخادم ، فإن الاختلاف بين 1-2 كيلو بايت ليس بالغ الأهمية ويقع ضمن عيوب المراجعة.

الفصل 2. أدوات إضافية

ملحقات الطرف الثالث: تصغير / دمج JS / CSS / HTML | حزمة JS

في غضون ذلك ، لا فائدة من البحث عن حلول الجهات الخارجية لـ JS / CSS / HTML وحزمة JS. حتى إذا حصلت على نتائج ضغط إضافية ، فستقتصر على نسبة واحد بالمائة في الواجهة الأمامية. في المقابل ، ستحصل على واحد أو أكثر من امتدادات Magento في النظام. تتطلب حقيقة وجودهم وتشغيل الخوارزميات الخاصة بهم موارد إضافية ، فضلاً عن زيادة مخاطر فشل النظام بشكل عام. إذا لم تكن متأكدًا من أن الفوائد المحتملة تفوق المخاطر ذات الصلة ، فمن المستحسن الانسحاب من استخدامها .

إذا كنت تعرف أي حل تابع لجهة خارجية يعمل على تحسين سرعة التحميل بشكل كبير من خلال الضغط والتجميع ، فنحن نشجعك على مشاركته في التعليقات أو إبلاغنا مباشرةً على [البريد الإلكتروني المحمي] . سنكون سعداء للتحقيق في الأمر  

الآن ، دعنا نحاول إجراء تحسينات باستخدام وسائل غير متوفرة في Magento افتراضيًا.

تصغير حجم الصورة

يعد استخدام الصور على الويب دائمًا بمثابة حل وسط بين الجودة وحجم ملف الصورة.

شاغلنا الرئيسي هو تقليل حجم الصورة دون فقد الجودة. حسنًا ، باستخدام وظيفة Magento الافتراضية ، من الممكن تقليل حجم الصورة بالفعل. لكن جودة الصور ستعاني بشكل كبير.

لنقم بتقليل حجم الصور القياسية ، والتي قام Magento بتحويلها وتغيير حجمها بناءً على التكوينات ، على سبيل المثال ، نحن مهتمون في الغالب بالصور الموجودة في magento_root_directory / pub / media /atalog / product / cache.

يمكن العثور على تكوينات Magento هنا:

كبداية ، دعنا نحاول القيام بذلك يدويًا ونستخدم الأداة المساعدة jpegoptim. يتم تشغيل الوحدات المتعددة التي تهدف إلى تسريع Magento (بما في ذلك الوحدات المدفوعة) بواسطة هذه الأداة المساعدة.

لا توجد نتائج للصور من ذاكرة التخزين المؤقت إلا إذا قللنا من جودة الصورة:

يبدو أن هناك خطأ ما في ذلك. لأغراض الاختبار ، قمنا بتطبيقه على الصورة الأصلية ، والتي لم يتم عرضها على الصفحة في الواقع. لقد تمكنا من تحقيق نتائج معينة ، وإن كانت غير مهمة:

ماذا عن الذهاب للحلول الآلية؟

لنجرب مُحسِّن الصور المجاني التالي: https://github.com/justbetter/magento2-image-optimizer.

لقد قمنا بتثبيت جميع الأدوات المساعدة المعروضة التي يستخدمها الامتداد:

• JPEGOptim
• Optipng
• بابوا نيو غينيا الكمية 2
• SVGO
• جيفسيكل

تم ضبط إعدادات ضغط الصور على 80 لـ JPEG. هذا يتوافق مع إعدادات Magento الافتراضية. بعد ذلك ، قمنا بإجراء التحسين لكل دليل الوسائط .

حجم دليل الوسائط الكامل قبل الضغط هو 353 ميجا بايت ، بعد - 340.1 ميجا بايت

حجم دليل الوسائط / الكتالوج / المنتج / ذاكرة التخزين المؤقت هو 194.7 ميجا بايت ولم يتغير بعد الضغط.

لقد وجدنا الحلول ملائمة ومفيدة ، خاصة إذا لم تجهز الصور قبل تحميلها على موقعك.

ومع ذلك ، عندما يتعلق الأمر بتقليل الحجم الإجمالي للصورة على صفحات المنتج والفئات ، لم يتم تحقيق أي تحسينات كبيرة.

ربما ، يتم استخدام تنسيقات الصور الأخرى بشكل أساسي في حالتك. وبالتالي ، قد تكون النتائج أكثر أهمية.

عمدًا لا نلقي نظرة عامة على تنسيق صورة webp هنا لأن متصفحات Apple لا تدعم هذا التنسيق: https://caniuse.com/#feat=webp.

____________________

حسنًا ، إذا لم نتمكن من تقليل حجم ملف الصورة بشكل كبير ، فلنحاول تحميلها فقط للمنطقة المرئية.

تحميل صورة كسول

لنجرب أول حل مجاني لطرف ثالث نواجهه - تحميل Magento 2 Lazy.

كما في السابق ، أجرينا تدقيقًا على المنتج والفئة والصفحات الرئيسية.

لم يتم تحقيق تغييرات كبيرة. الاختلافات في نطاق الارتياب في القياس.

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

وصف المنتجات لا يحتوي على صور. لا تحتوي الفئة على وصف على الإطلاق.
لنفعل ذلك بأسهل طريقة ونزيد ببساطة عدد المنتجات (بما في ذلك عدد الصور التي يتم تحميلها) على صفحة الفئة في جهاز النداء - أولاً من 9 إلى 30 ، ثم حتى 48 وقم بإدراج النتائج.

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

_________________

بدلا من الكلمات النهائية

لقد قمنا بإلقاء نظرة عامة على كل من ميزات Magento القياسية وبعض حلول الجهات الخارجية التي تسمح بتحسين أداء تحميل الصفحة.

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

ومع ذلك ، فإن أكثر الميزات المفيدة التي لها تأثير مفيد هي Magento الافتراضي Gzip + Minify JS / CSS + HTTP / 2 + تحميل الصور الكسولة

حول حزمة JS

وبالتالي ، فإن الإصدارات المتقدمة من هذه الحزمة من مطوري ملحقات الطرف الثالث لن تسمح بالكاد بزيادة سرعة التحميل بشكل كبير دون ضبط إضافي مخصص للموقع.

هناك بالتأكيد المزيد من الوسائل التي يمكنك تجربتها والتي يمكن أن تساعد في زيادة وقت التحميل. ومع ذلك ، فإن العديد منها ليس حلًا واحدًا يناسب الجميع. على سبيل المثال ، الارتباط بين زوار الموقع من مختلف البلدان في جميع أنحاء العالم والموقع الفعلي للخادم / الخوادم مهم أيضًا. من المنطقي نقل الموقع إلى خادم ، حيث سيكون نقل البيانات منه أسرع بالنسبة لغالبية مستخدمي الموقع / استخدام CDN للملفات الثابتة. إذا كان زوار الموقع من منطقة واحدة بشكل أساسي ، فيمكنك محاولة تخزين الملفات الثابتة مؤقتًا باستخدام Varnish: https://devdocs.magento.com/guides/v2.3/config-guide/varnish/config-varnish-magento.html# ملفات ذاكرة التخزين المؤقت الثابتة.

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

PS AMP

(https://amp.dev/about/websites)

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

هذه التقنية ليست تقنية مبسطة وتفترض استخدام مكتبات amp js الخاصة فقط. بالإضافة إلى ذلك ، تحصل على فرصة الحصول على إصدار صفحات منفصل غير متصل بموضوعك الحالي بأي شكل من الأشكال.

قد يكون هذا اختيارًا صعبًا. من ناحية أخرى ، يتعلق الأمر كله بتحسين سرعة التحميل والتحويلات. من ناحية أخرى ، تفرض تقنية AMP قيودًا ، على سبيل المثال ، يمكنك استخدام js و HTML فقط من مكتبات AMP. نتيجة لذلك ، تصبح الوظائف محدودة.