كيفية تحقيق نقاط أداء عالية على Google PageSpeed ​​Insights for WooCommerce

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

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

لماذا سرعة موقع الويب مهمة؟

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

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

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

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

أهمية الأجهزة والإعداد

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

تم تصميم منصة الاستضافة الخاصة بنا وبناؤها وإدارتها بواسطة خبير البنية التحتية ، جون أرونديل ، من شركة Bitfield Consulting ، وتوفر استضافة WordPress عالية الأداء مع استعادة البيانات عند الكوارث على مستوى مركز البيانات. نقوم بتوزيع المواقع عبر Digital Ocean و Linode ، اللذان يوفران خوادم افتراضية خاصة موثوقة وقابلة للتطوير تعمل على أجهزة سريعة مع محركات أقراص SSD وشبكة 40 جيجابت.

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

من الأفضل تجنب الاستضافة المشتركة لمواقع الأعمال ويجب تجنبها بالتأكيد في التجارة الإلكترونية.

تقوم خوادم Herdl بتشغيل مكدس LEMP (Ubuntu LTS و Nginx و MySQL و PHP) مع إدارة التكوين بواسطة Puppet. تمكننا Puppet من أتمتة إعداد الخادم وتثبيت التطبيقات وإدارة النظام ، مما يقضي على الأخطاء البشرية أثناء هذه المهام المتكررة. يتم استخدامه أيضًا لأتمتة النسخ الاحتياطية اليومية للخادم ، وتوفير قاعدة البيانات الكاملة والنسخ الاحتياطية المتزايدة للموقع إلى Amazon S3. من خلال حفظ النسخ الاحتياطية خارج الموقع إلى S3 ، نضمن إمكانية الوصول إليها حتى في حالة تعطل مركز البيانات.

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

سيعمل التكوين القياسي الذي يأتي مع MySQL ( my.cnf ) ، لكنك ربما تريد تعديل ذلك قليلاً بناءً على مواصفات الخادم الخاص بك. هناك الكثير من المقالات الجيدة حول تحسين MySQL لـ WordPress والتي تتضمن اقتراحات مفيدة وأمثلة لملفات التكوين ، ولكن الخيار الأفضل هو ضبطها وفقًا لاستخدامك الفعلي للموقع - لهذا ، نستخدم برنامج Perl النصي الممتاز.

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

إذا كنت تنشر المحتوى بانتظام ، فقد تصبح قاعدة بيانات WordPress منتفخة للغاية بسبب كل الصفحة وتنشر المراجعات التي تحفظها تلقائيًا. افتراضيًا ، لا توجد حدود لعدد المراجعات التي يحفظها WordPress - نقصر هذا الرقم على خمسة عن طريق إضافة السطر التالي إلى ملف تهيئة WordPress ( wp-config.php ):

define( 'WP_POST_REVISIONS', 5 );

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

ادوات التطوير

لتطوير WordPress ، نعتمد على "نكهة" WordPress الخاصة بنا باستخدام سمة Sage starter (وسير العمل) بواسطة فريق Roots. يتضمن ذلك Gulp لمهام الإنشاء الآلية المتقدمة ، Composer للتحكم في التبعيات ، بما في ذلك استخدام مكونات WordPress الإضافية (والإصدارات) ، و npm لإدارة الحزم.

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

للتحكم في الإصدار ، نستخدم Git عبر Bitbucket ، باتباع سير عمل NVIE git. يتم إنشاء الكود ونشره تلقائيًا عبر DeployHQ ، وهو أمر سهل الإعداد ويوفر جميع الخيارات اللازمة لتطوير WordPress. بالإضافة إلى ذلك ، فإن دعمهم من الدرجة الأولى.

بمجرد تشغيل التطبيق الخاص بك ، حان الوقت لقياس وقياس الإحصائيات الحيوية حتى تتمكن من ضبط الأداء وتحسينه. لهذا ، نستخدم مجموعة من أدوات Pingdom و GT Metrix و Google PageSpeed ​​Insights. هناك الكثير من المقاييس التي يجب النظر إليها في التقارير التي تنتجها هذه الخدمات - في النهاية ، يجب التركيز على وقت التحميل وحجم الصفحة ، بهدف تقليلهما قدر الإمكان. يضمن ذلك حصول جميع المستخدمين على جميع الأجهزة (واتصالات الشبكة) على أفضل تجربة ممكنة.

عندما يتعلق الأمر باختبار المستعرضات والجهاز ، فإننا نختار LambdaTest. إنه سهل الاستخدام ، ويقدم مجموعة اختبار شاملة ، ولديه خطط تناسب جميع الميزانيات. يتكامل أيضًا مع Trello و Slack ، مما يشكل جزءًا أساسيًا من سير العمل لدينا.

WP Rocket هو البرنامج المساعد المفضل للتخزين المؤقت في WordPress ، وسيحسن الأداء بشكل كبير على أي موقع. من السهل تكوينها وتوفر عناصر تحكم دقيقة للغاية للمستخدم الأكثر تقدمًا ، مما يعني أنه يمكنك ضبط تكوين ذاكرة التخزين المؤقت. تتكامل WP Rocket بشكل جيد مع شبكات CDN ، ونموذج الترخيص الخاص بها مثالي للوكالات.

اعتمادًا على ميزانية العميل وموقعه ، يتم تقديم الأصول الثابتة إما مباشرة بواسطة خادم الويب ، أو من CDN (مثل Beluga و BunnyCDN) ، أو من خلال خدمات تحسين الصور في الوقت الفعلي (Piio و Imagekit). بالنسبة لأداء الأجهزة المحمولة ، يعد Piio (يُنطق pie-o) خيارًا ممتازًا لأنه يكتشف الصور ويحسنها ويغير حجمها أثناء الطيران قبل التحميل البطيء - وهذا يعني أن كل جهاز يتلقى صورًا محسّنة ومُغيّرة حجمها بشكل صحيح (بدون تغيير الحجم في المتصفح).

إذا كنا لا نستخدم خدمة تحسين الصور ، فإن Short Pixel هو المكون الإضافي الموصى به. يوفر تحسينًا ممتازًا للصور باستخدام ضغط ضياع أو لامع أو بدون فقدان البيانات ويمكنه أيضًا تحويل الصور إلى تنسيق WebP. يمكنه أيضًا تحسين مكتبة الوسائط بالكامل بشكل كبير ، كما أن الأسعار تنافسية للغاية أيضًا.

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

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

يتولى Mabl و Sentry و Fluxguard مراقبة التطبيق ، وينبهنا إلى أي مشكلات على مستوى التطبيق. يمكنهم أيضًا اكتشاف التغييرات على مستوى المحتوى - وهو مؤشر جيد على مشكلات مستوى التعليمات البرمجية الأساسية بعد التحديث. تقوم Mabl بعمل الكثير من الأشياء الرائعة أيضًا ، بما في ذلك الاختبار الآلي. إنها إحدى الخدمات المفضلة لدينا ، وهي بالتأكيد خدمة تستحق الزيارة.

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

اجعل الأداء جزءًا من عمليات التصميم والتطوير الخاصة بك

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

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

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

نشعر أنه من المهم اعتبار جميع الأجهزة جزءًا من هذه العملية ، مع الأخذ في الاعتبار كيف يمكن أن تختلف تجارب الأجهزة المحمولة وسطح المكتب.

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

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

قم بتحسين سرعة وأمان مواقع WooCommerce الخاصة بك

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

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