كيفية تسريع دليل أو موقع ويب سوق تم إنشاؤه باستخدام HivePress

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

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

لأغراض الاختبار ، سنستخدم موقع ويب دليل WordPress تم إنشاؤه باستخدام HivePress وبعض الامتدادات مع سمة ListHive الافتراضية الخاصة بها. ومع ذلك ، إذا لم يتم إنشاء موقع الويب الخاص بك باستخدام المكون الإضافي HivePress ، فيمكنك اتباع نفس الخطوات لأي موقع ويب آخر يعمل بنظام WordPress.

لذلك ، لنبدأ بتثبيت LiteSpeed ​​Cache.

تثبيت LiteSpeed ​​Cache

بادئ ذي بدء ، تحتاج إلى تثبيت المكون الإضافي LiteSpeed ​​Cache. يمكنك القيام بذلك بسهولة مباشرة من لوحة معلومات WordPress الخاصة بك بالانتقال إلى قسم الإضافات> إضافة جديد . ابحث عنه عبر شريط البحث وتابع بتثبيته. عند انتهاء التثبيت ، ما عليك سوى النقر فوق الزر "تنشيط" لتمكين المكون الإضافي.

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

تحسين ذاكرة التخزين المؤقت

لضبط إعدادات ذاكرة التخزين المؤقت الأساسية ، انتقل إلى LiteSpeed ​​Cache> صفحة ذاكرة التخزين المؤقت. هناك العديد من الأقسام المختلفة داخل هذه الصفحة ، لكننا سنتطرق إلى أهم الإعدادات فقط.

إعدادات ذاكرة التخزين المؤقت

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

كائن ذاكرة التخزين المؤقت

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

يجب ألا تكون هناك مشكلة في اجتياز اختبار الاتصال إذا كان موقع الويب الخاص بك يعتمد على خادم OpenLiteSpeed ​​أو إذا كان موفر الاستضافة يدعم التخزين المؤقت للكائنات.

مخبأ المتصفح

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

تحسين الصفحة

خطوتك التالية هي الانتقال إلى LiteSpeed ​​Cache> قسم تحسين الصفحة من أجل تحسين الأنماط والبرامج النصية والخطوط.

تحسين CSS

لنبدأ بقسم إعدادات CSS . نوصي هنا بتشغيل إعدادات CSS Minify و CSS Combine .

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

تحسين الخط

إذا كان موقعك يستخدم خطوط Google ، فهناك بعض الخيارات لتحسين تحميل الخط. في نفس قسم إعدادات CSS ، يمكنك التمرير لأسفل وتعيين خيار تحسين عرض الخط على Swap حتى يتم استخدام الخط الاحتياطي لعرض النص حتى يتم تنزيل الخط المخصص بالكامل.

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

تحسين JS

الآن دعنا ننتقل إلى قسم إعدادات JS لتحسين ملفات JavaScript. نوصي هنا باتباع نفس الخطوات المتبعة في إعدادات CSS. ما عليك سوى تمكين خياري JS Minify و JS Combine بحيث يتم أيضًا تصغير ملفات JS ودمجها في ملف واحد.

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

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

تحسين الوسائط

أخيرًا ، تحتاج إلى تحسين محتوى الوسائط الخاص بك. نظرًا لأن الصور غالبًا ما تمثل حوالي نصف حجم محتوى صفحة الويب ، فإن تحويل جميع الصور إلى تنسيق WebP (وهو في المتوسط ​​أصغر بنسبة 30٪ من التنسيقات الأخرى) يمكن أن يحسن بشكل كبير سرعة تحميل صفحتك.

في قسم LiteSpeed ​​Cache> تحسين الصورة> الإعدادات ، يمكنك تحويل صور موقع الويب الخاص بك إلى تنسيق WebP عن طريق تمكين إعدادات إنشاء إصدارات WebP واستبدال صورة WebP .

بعد التحقق من هذه الخيارات ، انتقل إلى قسم ملخص تحسين الصورة للحصول على مفتاح المجال وتحسين الصور بالنقر فوق الزر "إرسال طلب التحسين" حتى تصل درجة تحسين الصورة إلى 100٪.

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

انتقل إلى LiteSpeed ​​Cache> Page Optimization> Media Settings (إعدادات الوسائط) وقم بتمكين خيار Lazy Load Iframes .

تغليف

يوجد أدناه لقطة شاشة لنتائج Google PageSpeed ​​على الأجهزة المحمولة وأجهزة سطح المكتب بعد أن قمنا بتحسين أداء موقع الويب باتباع الخطوات الواردة في هذا البرنامج التعليمي.

هذا هو! إذا قمت ببناء دليلك أو موقع الويب الخاص بالسوق باستخدام HivePress (أو أي حل آخر قائم على WordPress) ، فيمكنك اتباع نفس الخطوات لإعداد التخزين المؤقت وتحسين الأنماط والبرامج النصية والخطوط ، بالإضافة إلى محتوى الوسائط مثل الصور أو التضمينات. نتيجةً لذلك ، ستحصل على درجة عالية على Google PageSpeed ​​(وبالتالي تعزيز تصنيفات مُحسّنات محرّكات البحث) وتحسين تجربة المستخدم الإجمالية لموقعك على الويب.

بالإضافة إلى ذلك ، لا تتردد في مراجعة المقالات التالية:

• أفضل ملحقات دليل WordPress
• موضوعات دليل WordPress الشائعة
• أخطاء عند إنشاء موقع ويب قائمة WordPress