كيفية تسريع WooCommerce باستخدام WP Rocket و Botiga

هل تكافح كيفية تسريع WooCommerce وإنشاء متجر سريع التحميل؟

يعد امتلاك متجر سريع أمرًا ضروريًا لأن أوقات تحميل متجرك ستؤثر على تجارب المتسوقين وتصنيفات مُحسّنات محرّكات البحث وحتى معدلات التحويل في متجرك.

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

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

ومع ذلك ، هذا لا يعني أنه ليس لديك خيارات لإنشاء متجر أسرع.

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

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

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

بحلول النهاية ، يجب أن يكون لديك متجر سريع التحميل - ولن تحتاج إلى شهادة في علوم الكمبيوتر لإعداد كل شيء.

يبدو جيدا؟ دعنا نسرع ​​WooCommerce معًا.

اثنين من التكتيكات التأسيسية لتحسين سرعة WooCommerce قبل WP Rocket

في القسم التالي ، سأخبرك بكل شيء عن كيفية استخدام WP Rocket لتسريع WooCommerce والحصول على متجر سريع التحميل.

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

في الأساس ، ستظل WP Rocket تجعل متجرك أسرع . ولكن إذا كانت مؤسستك بطيئة جدًا في البدء ، فلا يزال لديك متجر بطيء. سيكون الأمر قليلاً ... "أقل بطيئًا".

إذن - ما هو الأساس القوي لأداء WooCommerce؟

تحتاج إلى تثبيت هاتين التفاصيتين:

1. اختر سمة WooCommerce أسرع

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

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

لدينا منشور مخصص حيث اختبرنا مجموعة من الخيارات للعثور على أسرع ثيمات WooCommerce. ولكن ، إذا كنت تريد توفير الوقت ، فيمكنك استخدام سمة Botiga المجانية الخاصة بنا:

من الألف إلى الياء ، تم تصميم Botiga للأداء. إنه يستخدم فقط لغة JavaScript الفانيليا (بدون تبعيات jQuery) ، ويقلل الكود الخاص به تلقائيًا ، ويقل حجمه عن 44.3 كيلوبايت.

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

في الوقت نفسه ، يقدم Botiga مجموعة من ميزات التجارة الإلكترونية المفيدة ، بما في ذلك ما يلي:

• متعددة أنماط صفحة الخروج والعربة
• البحث الفوري عن المنتج لمساعدة المتسوقين في العثور على المنتجات بسرعة
• توصيات المنتج الأنيقة
• حوامل تنوع المنتج
• تخطيطات معرض المنتجات المتعددة
• قوائم الامنيات
• شريط الإضافة إلى عربة التسوق اللاصق

يحتوي Botiga على إصدار مجاني كامل الوظائف بالإضافة إلى إصدار Pro بقيمة 69 دولارًا يضيف المزيد من الميزات.

لهذه الأسباب ، سنستخدم Botiga كمثال لتسريع متجرنا.

يمكنك تنزيل Botiga هنا أو تصفح العروض لمشاهدة بعض الأمثلة.

2. استخدم استضافة WooCommerce المحسّن للأداء

بالإضافة إلى استخدام سمة سريعة ، سترغب أيضًا في اختيار استضافة WordPress المحسّنة للأداء.

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

هنا مرة أخرى ، لدينا مقال حيث اختبرنا مجموعة من مزودي الاستضافة للعثور على أسرع استضافة WordPress. إذا كنت في عجلة من أمرك ، فإليك بعض الخيارات الجيدة التي يجب وضعها في الاعتبار:

• Kinsta - اقرأ مراجعة Kinsta الكاملة
• WP Engine - أوصي بشكل خاص بخطط استضافة التجارة الإلكترونية المخصصة والتي تتضمن Elasticsearch (والتي ستحسن أداء البحث عن منتج متجرك بشكل كبير)
• Cloudways - اقرأ تقييمي الكامل لـ Cloudways

كيفية تسريع WooCommerce باستخدام WP Rocket

الآن ، حان الوقت لاستخدام WP Rocket للتثبيت على التعزيزات وجعل WooCommerce تحميل أسرع.

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

ومع ذلك ، مع WP Rocket ، لا يزال بإمكاننا جعله يتم تحميله بشكل أسرع. هناك الكثير من الإضافات الرائعة لتحسين أداء WordPress ، فلماذا أوصي بـ WP Rocket لـ WooCommerce؟

حسنًا ، يمكنك قراءة مراجعتي الكاملة لـ WP Rocket لمعرفة سبب إعجابي بها ، ولكن إليك ملخصًا سريعًا للنقاط الرئيسية:

1. لديها توافق WooCommerce خارج الصندوق . إذا رأى WP Rocket أنك تستخدم WooCommerce ، فسيقوم تلقائيًا بتهيئة نفسه بالطريقة المثلى عندما يتعلق الأمر بالأساسيات مثل التخزين المؤقت. هذه ميزة كبيرة ، حيث يمكن أن يؤدي تكوين التخزين المؤقت بشكل غير صحيح في متجر WooCommerce إلى تعطيل الوظائف الرئيسية.
2. إنه سهل الاستخدام للغاية . بالإضافة إلى النقطة أعلاه ، يحتوي WP Rocket بشكل عام على واجهة بسيطة ووثائق مفصلة ودعم ممتاز.
3. يجعل موقعك أسرع . انني أنقذت أفضل لآخر. WP Rocket يعمل فقط بشكل عادي ، ويقوم بعمل رائع في جعل متاجر WooCommerce يتم تحميلها بشكل أسرع (ومواقع WordPress الأخرى أيضًا). كما أن لديها ميزات فريدة مثل القدرة على إزالة CSS غير المستخدمة وتأخير تنفيذ JavaScript.

يعد WP Rocket مكونًا إضافيًا متميزًا ، ولكن دفع 49 دولارًا هو سعر بسيط لدفعه مقابل متجر WooCommerce أسرع. هناك علاقة مباشرة بين أوقات تحميل الصفحة ومعدلات التحويل ، لذا فإن تسريع متجرك يمكن أن يكسب بسهولة أموالك في شكل معدلات تحويل متزايدة.

للبدء ، تأكد من شراء نسخة من WP Rocket. بعد ذلك ، إليك كيفية إعداده لـ WooCommerce.

1. قم بتثبيت البرنامج المساعد لتفعيل التحسينات الأساسية

للبدء ، توجه إلى متجر WooCommerce (أو قم بإعداده أولاً إذا لم يكن لديك واحدًا حتى الآن) ، وقم بتثبيت وتفعيل WP Rocket:

بمجرد تنشيط المكون الإضافي WP Rocket ، سيقوم تلقائيًا بتنشيط الميزات التالية لتسريع متجرك:

• التخزين المؤقت للصفحة - سيقوم WP Rocket أيضًا تلقائيًا باستبعاد محتوى WooCommerce الرئيسي لتجنب المشكلات أثناء تخزين أكبر قدر ممكن من المحتوى في ذاكرة التخزين المؤقت. على سبيل المثال ، ستستبعد صفحات عربة التسوق والدفع ، من بين تعديلات التوافق الأخرى.
• المتصفح التخزين المؤقت
• ضغط GZIP
• دعم Cross-Origin لخطوط الويب
• تحسين ملفات خطوط جوجل

في متجر WooCommerce ، سيعمل WP Rocket أيضًا على تحسين طلب get_refreshed_fragments AJAX تلقائيًا. هذا ما تستخدمه WooCommerce لتحديث محتويات عربة التسوق ديناميكيًا.

مرة أخرى ، تحدث كل هذه التحسينات تلقائيًا ، لذلك يجب أن يتم تحميل متجرك بشكل أسرع بمجرد تنشيط WP Rocket.

إليك كيفية تحميل الصفحة الرئيسية لمتجرنا الآن دون لمس إعداد واحد في WP Rocket:

يمكنك أن ترى أن الوقت للبايت الأول قد تم تقليله بحوالي 450 مللي ثانية (من 0.509 إلى 0.043 ثانية) ، مما يؤدي إلى انخفاض مماثل في جميع المقاييس الأخرى تقريبًا ، بما في ذلك Largest Contentful Paint (LCP). انخفض وقت الرسم الأكبر للمحتوى من ~ 1.1 ثانية إلى ~ 0.7 ثانية.

هذا التخفيض ناتج بشكل أساسي عن التخزين المؤقت للصفحة الملائمة لـ WooCommerce الذي ينفذه WP Rocket ، على الرغم من أن التعديلات الأخرى تساعد أيضًا.

2. إعداد ملف التحسينات

بينما يقوم WP Rocket بتنشيط الكثير من الميزات المفيدة افتراضيًا ، هناك أيضًا بعض الميزات المهمة التي ستحتاج إلى تمكينها يدويًا.

للبدء ، انتقل إلى علامة التبويب File Optimization في منطقة إعدادات WP Rocket ( الإعدادات → WP Rocket ).

هذا هو المكان الذي يمكنك فيه تحسين كود CSS و JavaScript لمتجرك ، والذي يمكن أن يحدث فرقًا كبيرًا في أداء متجرك (خاصة عندما يتعلق الأمر بـ Core Web Vitals و Lighthouse Performance Score).

فيما يلي الإعدادات التي أرشحها:

ملفات CSS :

• تصغير ملفات CSS - تعمل سمة Botiga بالفعل على تصغير رمزها افتراضيًا ، ولكن يمكن أن يكون ذلك مفيدًا في تصغير الكود من المكونات الإضافية التي تستخدمها.
• تحسين تسليم CSS → إزالة CSS غير المستخدمة - سيؤدي هذا إلى إزالة CSS غير الضرورية على أساس صفحة بصفحة لتقليص حجم ملف كل صفحة.

لا أوصي بدمج ملفات CSS ، لأن هذا ليس مفيدًا حقًا الآن لأن معظم المضيفين ذوي الجودة يستخدمون HTTP / 2.

ملفات JavaScript :

• تصغير ملفات JavaScript
• تم تأجيل تحميل JS
• تأخير تنفيذ JavaScript

كما هو الحال مع CSS ، لا أوصي بدمج ملفات JavaScript.

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

يعد هذا أمرًا رائعًا لتحسين أكبر وقت لرسومات المحتوى ، ولكن قد يكون لديك بعض جافا سكريبت الذي تريد تحميله على الفور ، مثل نصوص التتبع (مثل Google Analytics أو Google Tag Manager) أو بعض المكونات الإضافية التي قد تستخدمها.

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

على سبيل المثال ، إذا كنت تريد استبعاد Google Analytics ، فيمكنك تهيئته على النحو التالي:

بعد إجراء هذه التعديلات ، يمكنك رؤية المزيد من التحسينات. تم تقليل حجم صفحة صفحتنا الرئيسية بحوالي 80 كيلو بايت وانخفض أكبر وقت لطلاء المحتوى بشكل أكبر من ~ 0.7 ثانية إلى ~ 0.5 ثانية.

3. تحسين وسائل الإعلام الخاصة بك

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

في علامة تبويب الوسائط ، أوصي بتمكين التحميل البطيء وأبعاد الصورة المفقودة. سيساعدك الأول في الأداء ويمكن للأخير تقليل المشكلات المتعلقة بتغيير التخطيط التراكمي (CLS) لتحسين أداء "أساسيات الويب الأساسية":

4. إضافة شبكة توصيل المحتوى (للمتاجر العالمية)

تتيح لك شبكة توصيل المحتوى (CDN) تسريع أوقات تحميل متجرك عن طريق التخزين المؤقت للأصول الثابتة مثل الصور والبرامج النصية على شبكة من الخوادم العالمية.

بعد ذلك ، يمكن للزوار تنزيل هذه الملفات الثابتة من الخادم الأقرب إليهم فعليًا ، مما يقلل من أوقات التنزيل ويسرع متجرك.

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

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

في قسم CDN ، يمنحك WP Rocket خيارين لإضافة CDN إلى متجرك:

1. يمكنك استخدام خدمة RocketCDN الرسمية ، والتي تكلف 7.99 دولارًا فقط شهريًا لعرض نطاق ترددي غير محدود. يعتمد على شبكة StackPath العالمية. هذا هو أبسط خيار لأنه يوفر تكوينًا تلقائيًا.
2. يمكنك التكامل مع أي CDN تابع لجهة خارجية من خلال إعادة كتابة WP Rocket عناوين URL الخاصة بك. الخيارات الشائعة هي StackPath و KeyCDN و Bunny CDN و CloudFront وغيرها.

إذا كنت لا تشعر بالثقة في إعداد CDN الخاص بك ، فإنني أوصي باستخدام خدمة RocketCDN ، حيث إنها تقدم قيمة جيدة جدًا نظرًا لأنك تحصل على نطاق ترددي غير محدود بسعر ثابت:

استكشاف المشكلات وإصلاحها مع WP Rocket على WooCommerce

بينما يجب أن يؤدي اتباع الإرشادات المذكورة أعلاه إلى متجر WooCommerce أسرع دون أي مشاكل ، إلا أن هناك بعض السيناريوهات النادرة التي قد تواجه فيها مشكلات بسيطة.

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

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

إذن - كيف يمكنك إصلاح هذا؟ لنستعرض بعض النصائح.

أولاً ، حاول استخدام المكونات الإضافية للمحتوى الديناميكي التي تم ترميزها بطريقة متوافقة مع ذاكرة التخزين المؤقت. يعني هذا أساسًا أن المكون الإضافي ينشئ محتواه الديناميكي باستخدام JavaScript أو AJAX بدلاً من PHP.

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

أنشأ فريق WP Rocket أيضًا بعض المكونات الإضافية / أدوات التوافق لمكونات WooCommerce الإضافية التي قد تسبب مشكلات:

• YITH WooCommerce Wishlist المكون الإضافي
• عنصر واجهة مستخدم منتجات WooCommerce الأصلي الذي تم عرضه مؤخرًا
• YITH WooCommerce البرنامج المساعد للمنتجات التي تم عرضها مؤخرًا

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

يمكنك محاولة العثور على معلومات ملفات تعريف الارتباط من وثائق البرنامج المساعد أو استئجار مطور لمعرفة ذلك من أجلك. بعد ذلك ، يمكنك إعداد قواعد استبعاد ذاكرة التخزين المؤقت لملفات تعريف الارتباط في منطقة القواعد المتقدمة في WP Rocket:

إضافات أخرى مفيدة لتحسين سرعة WooCommerce تتجاوز WP Rocket

يمكن لـ WP Rocket فعل كل ما تحتاجه تقريبًا لتحسين أداء WooCommerce. لكن هناك استثناء رئيسي واحد:

الصور!

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

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

لدينا منشور كامل حول أفضل المكونات الإضافية لتحسين صور WordPress ، ولكن إليك بعض أفضل الخيارات:

• تخيل - يأتي هذا المكون الإضافي من نفس مطور WP Rocket
• ShortPixel - هذا هو المكون الإضافي الذي أستخدمه على مواقعي الخاصة
• WP Compress - خيار آخر عالي الجودة ؛ تعرف على المزيد في مراجعة WP Compress الخاصة بنا

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

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

يمكنك إصلاح ذلك باستخدام حلول البحث خارج الخادم مثل Elasticsearch (عبر المكون الإضافي ElasticPress) أو Jetpack Search (الذي يعتمد أيضًا على Elasticsearch ولكنه أبسط في التنفيذ).

تسريع متجر WooCommerce اليوم

إذا كنت تريد أن ينجح متجر WooCommerce ، فمن المهم أن يتم تحميله بسرعة.

لإعداد متجرك للنجاح ، من المهم أولاً وضع أساس قوي:

1. اختر سمة WooCommerce سريعة التحميل مثل سمة Botiga المجانية.
2. استخدم استضافة WordPress المحسّنة للأداء مثل Kinsta أو WP Engine.
3. قم بإعداد أساس موقع التجارة الإلكترونية الخاص بك.

من هناك ، يمكن أن يساعدك WP Rocket في تنفيذ عدد من تحسينات أداء WooCommerce ، بما في ذلك التخزين المؤقت المتوافق مع WooCommerce وتحسين CSS و JavaScript والمزيد.

إذا أضفت أيضًا مكوّنًا إضافيًا لتحسين الصور لتحسين صور منتجك ، فيجب أن تكون مضبوطًا على الطيران باستخدام متجر WooCommerce خفيف الوزن وسريع.

هل لا يزال لديك أي أسئلة حول كيفية تسريع WooCommerce باستخدام WP Rocket و Botiga؟ اسمحوا لنا أن نعرف في التعليقات!