كيف حققت 100 درجة من Google PageSpeed ​​Mobile على WooCommerce مع WP Rocket

هل تهدف إلى الحصول على 100 مثالية على Google PageSpeed ​​Fears for Mobile مع متجر WooCommerce الخاص بك؟

في هذه المقالة ، سأريكم بالضبط كيف حققناها مع femme-fatale.gr ، وهو متجر جمال إلكتروني تم تشغيله في الأصل على Magento. في ذلك الوقت ، استغرقت أحمال صفحة الهاتف المحمول ما بين 5 و 15 ثانية ، وكان الموقع ينزف المبيعات ، على الرغم من كتالوج 35000 منتج مع 500 فئة منتج و 450 من سمات المنتج.

أنا Dimitris Vayenas ، مؤسس Metadata Oxford. على مدار العقود الثلاثة الماضية ، كنت مهووسًا بكل ميلي ثانية من أداء الويب. في أوائل عام 2022 ، طلب مني صديقي نيكوس أورفانوس المساعدة في متجره على الإنترنت ، واتصلتنا إلى العمل.

بعد الترحيل إلى WooCommerce والتركيز بالكامل على السرعة - باستخدام صاروخ WP كسلاح سري - قمنا بحطم درجات PagePeed Mobile مع درجة ثابتة بين 99 و 100/100. الأهم من ذلك ، أن الموقع انتقل من راكد إلى آلة الإيرادات.

استمر في القراءة وستتعلم كيف تمكنا من الحصول على مثل هذه النتائج وكيف ساعدنا WP Rocket في الوصول إلى أكثر من 95 درجة ، بالإضافة إلى التعديل النهائي الذي دفعنا إلى 100 مثالية. والأهم من ذلك ، ستكتشف تأثير العمل الذي تلاها بمجرد بدء الموقع في 300 مللي ثانية فقط.

لماذا التركيز على الأداء ، وخاصة على الهاتف المحمول

في femme - fatale.gr ، تحدث أكثر من 90 ٪ من عمليات الشراء على الهاتف المحمول. هذا جعل الأداء المتنقل أولوية لدينا أعلى من اليوم الأول.

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

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

كما أحب أن أقول: "إذا لم تكن تجربة هاتفك المحمول فوريًا ، فأنت تفقد أموالًا حقيقية مع كل ميلي ثانية إضافية".

نقطة التحول: الهجرة من Magento إلى WooCommerce

في ديسمبر 2021 ، تواصلت نيكوس مع تحد واضح. "بلغ متجري ذروته أثناء القفل عند 0.81 يورو لكل جلسة. ثم انخفضت المبيعات إلى 0.15 يورو لكل جلسة. هل يمكننا العودة إلى مستويات تأمين؟"

كنا نعلم أن الخطوة الأولى كانت تغيير المنصات.

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

ذهبنا مباشرة في مارس 2022 دون تغيير بيانات المنتج أو زيادة الإنفاق على التسويق. كان الفرق الوحيد السرعة. قمنا بقطع تحميل الصفحة من 5 إلى 10 ثوان إلى 1 إلى 2 ثانية فقط.

هذه هي لقطة شاشة GTMetrix التي توضح نتائج وقت التحميل قبل الترحيل من Magento: 5.8 ثانية للصفحة الرئيسية و 7.9 ثانية للفئة ، التي تم التقاطها بينما كنا لا نزال نطور موقع الويب الجديد.

من ناحية أخرى ، هذا هو الأداء الحالي ، مع جميع أنحاء الويب الأساسية في الأخضر:

ما هي القيمة الحقيقية للسرعة لـ WooCommerce؟

كان من المستحيل تجاهل تأثير العمل على الأداء ، وأجعلت الأرقام واضحة.

قبل الترحيل ، كانت Femme - fatale.gr عالقة في شبق الأداء. في Magento ، تراوحت دوران شهري بين 7000 يورو إلى 10،000 يورو مع حوالي 40،000 جلسة ، بمتوسط ​​0.15 يورو إلى 0.20 يورو لكل جلسة. حتى خلال ذروة الإغلاق في عام 2020 ، عندما ارتفعت حركة المرور إلى 62500 جلسة ، كان أفضل أداء في 0.81 يورو لكل جلسة.

بحلول فبراير 2022 ، قبل أن نتراجع مباشرة إلى WooCommerce ، تحسن الموقع قليلاً إلى 0.29 يورو لكل جلسة ، لكنه كان لا يزال بعيدًا عن إمكاناته.

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

المكاسب لم تتوقف عند هذا الحد. بحلول ديسمبر 2023 ، قمنا بمطابقة ذروة تأمين قدرها 0.81 يورو لكل جلسة. اليوم ، ارتفع هذا الرقم إلى أعلى: يربح الموقع الآن 1.11 يورو لكل جلسة مع 40،000 زيارة شهرية.

Nikos ، صاحب Femme - fatale.gr ، وضعها على أفضل وجه:

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

مؤسسة الأداء التي يحتاجها كل موقع WooCommerce

قبل أن تتمكن Rocket WP من تقديم إمكانات أداءها الكاملة ، يجب أن يكون الأساس القوي في مكانه. كان لهذه القرارات المبكرة تأثير كبير على نتائجنا ، وهذا أيضًا ما أوصي به بشدة لأي شخص يدير متجر WooCommerce:

1. اختر موضوع الأداء الأول: قمنا باختبار عشرات الموضوعات قبل الاستقرار على أفضل الخيارات. سجل Botiga (مقره غوتنبرغ) من ATHEMES و RAY موضوع (قائم على Elementor) كلاهما 90+ في العروض التجريبية للبائعين. أي شيء أقل من 70؟ لقد تجنبنا ذلك.

2. اختر مضيفًا سريعًا حقًا: نستخدم Cloudways ، مدعومًا بواسطة Linode و Vultr و Digitalocean عبر المناطق الأوروبية الرئيسية مثل لندن وفرانكفورت وأمستردام وميلانو وستوكهولم. إنه يمنحنا ترقيات PHP ونقرة واحدة من PHP وقواعد البيانات ، الورنيش المدمج و redis ، بالإضافة إلى اكتشاف الأجهزة المحمول السلس. هذا يضمن مكالمات API غير المتجانسة دائمًا ضرب المحتوى المحسّن. لم يكن لدينا سوى وقت توقف في ثلاث سنوات ، وفريق دعمهم رائع.
   
   في التجارة الإلكترونية ، لا يكون القرب من عملائك غير قابل للانتقاء: كل استعلام منتج ، وتحديث العربة ، والتحقق من المخزون يلمس أصلك. مع وجود المتسوقين في أثينا أو الجزر اليونانية ، و Cloudways التي لا تحتوي على عقدة محلية ، يتعين علينا نشر FastPath . إنه ينظر مباشرة مع جميع مشغلي الهواتف المحمولة اليونانية الرئيسية و CloudFlare ، مما يوفر TTFBs Sub -50 MS وتجربة محلية حقًا.

3. شريك مع البائعين الداعمين: لقد اخترنا البائعين الذين يقدمون دعمًا سريعًا وسريعًا للإجابة على الأسئلة واستكشاف الأخطاء وإصلاحها من جانبك ، من Athemes و Fibosearch إلى Welaunch ، وبكسل موقعك ، وأشكال الجاذبية ، و Aioseo ، وصارخ WP نفسه.

4. قم بتحسين المحتوى الخاص بك: قمنا بتحويل جميع الصور إلى WebP وتنظيمها في مجلدات قائمة على التاريخ ، مع التأكد من أن كل مجلد يحتوي على أقل من 10000 ملف. بالنسبة للخطوط ، فإننا نستضيف ملفات Woff2 ونشملها لتضمين الشخصيات التي يحتاجها جمهورنا فقط. هذا خفض أحجام ملفات الخط بنسبة 70 إلى 80 في المئة. ساعدهم في تقديمها محليًا والتحويل المسبق في وقت مبكر على التخلص من عمليات البحث الخارجية وتجنب التحولات في التصميم.

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

ميزات صاروخ WP التي نقلتنا إلى 99/100 على PageSpeed

بمجرد وضع الأساس في مكانه ، ساعدنا WP Rocket في زيادة السرعة وتحقيق نتائج الأداء المتميزة بسرعة. لعبت هذه الميزات دورًا رئيسيًا في الحصول على 95+ نقاط على Google PageSpeed ​​على الهاتف المحمول:

• ذاكرة التخزين المؤقت للهاتف المحمول و sitemap التحميل المسبق: يكتشف Rocket WP الأجهزة المحمولة تلقائيًا ويبني ذاكرة التخزين المؤقت المخصصة لهم. هذا يعني أن مستخدمي الهواتف الذكية يحصلون دائمًا على لقطة HTML المحملة مسبقًا. يزحف التحميل المسبق المستند إلى Sitemap أيضًا صفحاتك مباشرة بعد أي تطهير ذاكرة التخزين المؤقت ، مما يزيل التأخير الذي يحدث غالبًا في الزيارات الأولى.
  
• CSS و JS Minification : WP Rocket يخرج من مساحة البيضاء والتعليقات لتقليص أحجام الملفات. يمكن أن يجمع أيضًا بين ملفات JavaScript في واحدة ، مما يقلل من عدد طلبات HTTP. هذا مهم بشكل خاص لمستخدمي الأجهزة المحمولة على شبكات أبطأ.  
  
• قم بإزالة CSS غير المستخدمة (RUCSS): على عكس التصغير البسيط ، تقوم RUCSS بتحليل HTML صفحاتك وتطرد كل قاعدة CSS لم يتم استخدامها على الواجهة الأمامية. غالبًا ما تقطع أوراق الأنماط التي تقطع عشرات الكيلوبايت ، وبالتالي فإن المتصفح يجعل بشكل أسرع مع عدد أقل من البايتات. لقد رأينا بشكل مباشر أن تمكين Rucss وحدها حلق 200 كيلو بايت من حمولة الصفحة الرئيسية ، مما يؤدي إلى صفحات التحميل بشكل أسرع.
  
• تأخير تنفيذ JavaScript : عادة ما لا تحتاج البرامج النصية مثل التحليلات أو أدوات الدردشة أو عناصر واجهة المستخدم الطرف الثالث إلى الجري على الفور. يقوم Rocket WP بتخزينهم حتى يقوم المستخدم بتمرير أو صنابير أو نقرات. هذا يجعل الصفحات تفاعلية بشكل أسرع ويحسن التفاعل مع الاستجابة الشاملة للطلاء والصفحة لتفاعلات المستخدم.

بعد تمكين هذه الميزات ، حصلنا على 99 درجة أداء PageSpeed:

المكافأة: إضافات الصواريخ WP للحالات الخاصة

في بعض الأحيان ، تحتاج إعدادات Box إلى دفعة صغيرة. للحصول على إعدادات محددة مثل أجهزة الجداول المعقدة ، أو قواعد الخطوط المخصصة ، أو اكتشاف الأجهزة غير المعتاد - قمنا بتثبيت خمسة إضافات مجانية لـ WP Rocket بعد استشارة مهندسي Rocket Senior WP:

• قم بتغيير معلمات RUCSS: قمنا بتعديل عدد المرات وكيف تعمل Rocket WP بعمق على إزالة CSS غير المستخدمة. كان هذا أمرًا ضروريًا للتوافق مع الإضافات مثل AutomateWoo ، والتي قد تفرط في تحميل جدولة المهمة.
• قم بإلغاء تنشيط شظايا عربة WooCommerce: نظرًا لأن قاعدة البيانات الخاصة بنا قد تم تحسينها بالفعل ، فقد قمنا بتعطيل ذاكرة التخزين المؤقت لعربة WP Rocket لتسريع مكالمات الخروج إلى أبعد من ذلك.
• تعطيل خطوط CSS المستخدمة المسبقة: استخدمنا خطوط Woff2 المستضافة ذاتيا مع قواعد التحميل المسبق اليدوي. ضمنت هذه الوظيفة الإضافية هذه القواعد لم يتم تجاوزها بواسطة التحميل المسبق لخط Font التلقائي لـ WP Rocket.
• قم بإزالة قواعد انتهاء صلاحية HTML: ينتهي CDN والخادم الذي تم معالجته بالفعل رؤوس ذاكرة التخزين المؤقت ، لذلك قمنا بإزالة قواعد HTML الخاصة بـ WP Rocket لتجنب النزاعات.
• قم بتعيين الأجهزة اللوحية كمحمول: لقد تعاملنا مع الأجهزة اللوحية مثل الأجهزة المحمولة للتأكد من أنها استفادت من التخزين المؤقت للهاتف المحمول والتحسينات المستجيبة. كان هذا مهمًا للوظائف المخصصة التي تعتمد على فحص WP_IS_Mobile ().

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

سر 100/100: إتقان Lazyloading وصورة LCP تلك

كان الوصول إلى 99 على Google PageSpeed ​​Insights معلمًا كبيرًا ، لكننا لم نكن راضين. وقفت نقطة واحدة بيننا وبين الكمال.

أولاً ، تعاملنا مع element bloat ، مما يعني تقليل عدد عناصر HTML على الصفحة. تعاقب Google الصفحات بأكثر من 810 عناصر DOM ، وقوائمنا ، وشرائح ، وتذييل وحدها دفعتنا إلى ما بعد 1000.

هذا ما فعلناه:

• المحتوى الثابت المحمّل كسول : قمنا بتأجيل العناصر غير الحرجة مثل قوائم الرأس ، وشرائح فئة المنتجات ، و carousels العلامة التجارية ، وتذييل حتى بعد الطلاء الأولي.

• تم إزالة العناصر غير الضرورية : قمنا بتقليم مستويات القائمة العميقة ومناطق عنصر واجهة مستخدم غير نشطة المعوقين على الهاتف المحمول. ساعدنا ذلك في الحصول على إجمالي عدد DOM دون عتبة عقوبة Google.

حتى مع وجود صفحة أنظف ، ما زلنا لا نستطيع كسر 100. العدد النهائي كان صورة البطل.

في الأصل ، كانت صورة 350 × 622 بكسل مع التراكبات والظلال والنص - معقدة للغاية بحيث لا يمكن تحميلها بسرعة. قمنا بتبسيطها وصولاً إلى ويب 350 × 350 بكسل / تم تحميلها مسبقًا بأولوية عالية باستخدام الكود التالي:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

وهكذا ، من خلال تبسيط صورة البطل والتحويل مسبقًا ، حققنا درجة 100/100 PSI مثالية من Mobile.

تأثير الأعمال: السرعة كمحرك نمو

كما أوضحت ، لم تحسن Speed ​​فقط درجة PageSpeed. عززت مباشرة خلاصة القول لدينا.

بعد تحسين الأداء والاستفادة من ميزات صاروخ WP ، رأينا مكاسب قابلة للقياس في النتائج:

• قفزت معدلات التحويل بنسبة 33 ٪.

• زادت الإيرادات لكل جلسة أكثر من خمس مرات ، من 0.20 يورو إلى 1.11 يورو.

تُرجمت هذه النتائج إلى إيرادات إضافية بقيمة 384،000 يورو خلال أول 18 شهرًا بعد الهجرة .

لم تكن هذه تحسينات بسيطة. لقد تطابقوا وتجاوزوا في نهاية المطاف أداء قفل الذروة ، مما يثبت أن سرعة الموقع كانت الرافعة الرئيسية للنمو .

كما أحب أن أقول: "أضافت كل ميلي ثانية حلق اليورو الحقيقي إلى الخلاصة".

3 نصائح عملية لأصحاب الأعمال

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

1. تتبع المستخدمين الحقيقيين: استخدم مراقبة المستخدم الحقيقية (Rum) لمراقبة بيانات الحقل. درجات المختبرات مفيدة ، ولكن ما يهم حقًا هو كيفية أداء موقعك للزوار الفعليين. فقط تأكد من تعطيله عند تشغيل اختبار PageSpeed ​​Insights لتجنب النتائج المنحرفة.
2. Geolocation أصلك: استضف موقعك بالقرب من عملائك. عندما يكون خادم Origin الخاص بك بالقرب من جمهورك ، يصبح كل شيء من عمليات البحث عن المنتج إلى الخروج أسرع وأكثر موثوقية.
3. تميل على صاروخ WP: ابدأ بالإعدادات الافتراضية. إنهم يتعاملون تلقائيًا مع معظم مشكلات الأداء على الفور. بمجرد أن يكون خط الأساس الخاص بك صلبًا ، يمكنك ضبطها من خلال تمكين بعض الميزات الإضافية ، على سبيل المثال لتحسين ملفات CSS و JS. وإذا لم تكن ذكاءً للتكنولوجيا ، تذكر: "المواقع الأسرع تعني إحباطًا أقل ، ومزيد من المبيعات ، والعملاء الأكثر سعادة".

اختتام

انتقلنا من Magento إلى WooCommerce ، ورفعنا درجة PageSpeed ​​المتنقلة من 55 إلى 100 مثالية ، وزيادة الإيرادات لكل جلسة من 0.20 يورو إلى 1.11 يورو. أثبتت تلك الرحلة شيئًا واحدًا بوضوح: السرعة أكثر من مجرد معلم فني. إنه سائق حقيقي لنمو الأعمال.

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