جميع الطرق الـ 36 لتسريع موقع WordPress الخاص بك
نشرت: 2023-03-23الإفصاح: قد يحتوي هذا المنشور على روابط تابعة. إن شراء منتج من خلال أحد هذه الروابط يولد عمولة لنا دون أن تتحمل أي نفقات إضافية.
نُشر هذا المنشور في الأصل في 3 ديسمبر 2019 ، وتم تحديثه ليشمل أدوات أكثر حداثة.
معظم منشورات المدونات حول تسريع WordPress هي عبارة عن فوضى عارمة.
في الجزء العلوي من القائمة ، تتضمن نصائح من شأنها فقط تسريع قائمة المسؤول الخاصة بك بمقدار 0.01 ثانية أو لن تؤدي حرفيًا إلى تحسين الأداء على الإطلاق.
ثم بالقرب من الجزء السفلي ، فإنها تتضمن بعضًا من أكثر تقنيات الأداء المتاحة تأثيرًا.
هذا مجرد جنون. إليك كيفية ترتيب دليل الأداء ...
ابدأ بالخطوات عالية التأثير .
لقد أدرجت أكثر 9 طرق تأثيرًا لتسريع موقعك أولاً. هذه هي إلى حد بعيد أهم الخطوات التي يمكنك اتخاذها لتسريع تحميل موقعك.
في الواقع ، إذا لم تستخدم أي تكتيكات تتجاوز التسعة الأولى ، فستكون على ما يرام.
ثم بعد ذلك ، ستجد 27 طريقة إضافية لتسريع WordPress. كل واحدة من هذه التكتيكات ستجعل موقعك أسرع قليلاً ، مما يزيد من النتائج التي حققتها بالفعل.
وهناك شيء آخر يجب أن تعرفه.
هذه هي التكتيكات الدقيقة التي أستخدمها
لا أدرج أي تكتيكات هنا لا أستخدمها الآن.
في الواقع ، قبل أن أكتب هذا المنشور ، توصلت إلى قائمة ضخمة من تقنيات الأداء ، بما في ذلك بعض الأشياء التي لم أجربها من قبل ، واختبرتها جميعًا.
تم تحميل موقع Competethemes.com بسرعة بالفعل ، ولكن بعد استخدام كل تكتيكات أداء مدرجة أدناه ، أصبح سريعًا بشكل لا يصدق.
فيما يلي نتائج GTMetrix:
منذ نشر هذا المنشور لأول مرة ، تغيرت مقاييس الأداء كثيرًا.
في الماضي ، كان إجمالي وقت التحميل يُعتبر مهمًا للغاية ، لكنه الآن ليس مصدر قلق كبير. والأهم من ذلك أن موقعك يبدو سريعًا للزائر .
حاولت Google تحديد هذه الفكرة من خلال Core Web Vitals. تدور مقاييس الأداء هذه حول السرعة الملحوظة لموقعك على الويب.
الحقيقة هي أنه لا يهم في الواقع ما إذا كان موقعك يستغرق 5 ثوانٍ للتحميل إذا كان كل شيء مرئيًا وتفاعليًا في ثانية واحدة.
لكن هناك مشكلة.
أساسيات الويب معقدة!
فهم أصعب بكثير من المقاييس القديمة ، بل إنه من الصعب تحسينها.
وهذا هو الشيء.
لتسريع موقعك ، لا يتعين عليك فهمهم جميعًا تمامًا. سوف تساعدك التقنيات الموضحة هنا بغض النظر عن فهمك لقواعد CWVs.
إذن هذا هو اقتراحي ...
قم بتنفيذ التكتيكات هنا وانظر إلى أين ستهبط. على الأرجح ، لن تضطر إلى قضاء أي وقت في البحث عن مقاييس الأداء هذه على الإطلاق لأن موقعك سيتم تحميله بالفعل بسرعة كافية.
- إنشاء قبل وبعد
- 1. قم بالتبديل إلى مضيف أسرع
- 2. إضافة التخزين المؤقت
- كيفية إضافة التخزين المؤقت إلى موقعك
- يجب عليك استخدام هذه الخطوات الثلاث التالية
- 3. ضغط الصور الخاصة بك
- 4. تغيير حجم الصور الخاصة بك
- 5. تحميل صورك كسول
- كيفية إضافة التحميل البطيء
- 6. تصغير الملفات الخاصة بك
- كيفية تصغير الملفات
- 7. سلسل ملفاتك
- كيفية إضافة التسلسل
- 8. تحميل الملفات مع CDN
- كيفية إضافة CDN إلى موقعك
- 9. اختر موضوعًا سريعًا
- تحسينات إضافية
- 10. التوقف عن استخدام برنامج Google Analytics
- 11. تأجيل جافا سكريبت
- 12. تحسين تسليم CSS
- 13. قم بإيقاف تشغيل دعم رموز تعبيرية WordPress
- 14. تعطيل تضمين WordPress
- 15. قم بتحديث إصدار PHP الخاص بك
- 16. قلل من الإضافات
- 17. استخدم صور webP
- 18. استخدام الجلب المسبق لنظام أسماء النطاقات
- 19. عدد المشاركات في كل صفحة
- 20. دمج طلبات خطوط Google
- 21. تحسين طلبات Gravatar
- 22. تحميل كسول تعليقاتك
- 23. تحميل جميع مقاطع الفيديو كسول
- 24. تقليل عمليات إعادة التوجيه
- 25. استخدام عدد أقل من الخطوط
- 26. استخدام أوزان أقل للخطوط
- 27. قم بتحميل مجموعة أحرف لغتك فقط
- 28. قم بإيقاف تشغيل ميزات OpenType في خطوط Adobe
- 29. استبدل Font Awesome بـ Fontello
- تحسينات أخرى
- 30. إيقاف تشغيل pingbacks و trackbacks
- 31. إبطاء Heartbeat API
- 32. تعطيل hotlinking
- 33. تحسين قاعدة البيانات الخاصة بك
- 34. تعطيل أو الحد من المراجعات اللاحقة
- 35. إزالة سلاسل الاستعلام
- 36. حذف الإضافات غير النشطة
- استمتع بموقعك الأسرع
إنشاء قبل وبعد
إذا كنت ترغب في اتباع هذا الدليل ، فابدأ بقياس أداء موقعك باستخدام GTMetrix وأداة سرعة الصفحة من Google.
التقط نتائجك على الشاشة واحفظها لوقت لاحق.
ثم قم بتنفيذ أول 9 تكتيكات هنا ، وأنا أضمن أنك سترى زيادة كبيرة في درجاتك. إذا كنت تريد أن تأخذ الأمور إلى أبعد من ذلك ، فيمكنك تجربة التكتيكات الـ 27 التالية أيضًا.
إذا كنت لا تزال غير راضٍ عن أدائك ، فمن المحتمل أن ترغب في التحدث إلى مطور متمرس يمكنه إجراء تلك التغييرات القليلة الأخيرة التي ستجعل موقعك يصل إلى درجة 100٪.
1. قم بالتبديل إلى مضيف أسرع
الاستضافة هي القوة الحصانية لموقعك.
مع استضافة أكثر قوة ، سيتم تحميل موقعك بالكامل بشكل أسرع.
يمكنك تنفيذ كل الأساليب الأخرى بتأثير كبير ، لكنها ستعمل جميعًا بشكل أفضل مع مضيف عالي الأداء. بالإضافة إلى ذلك ، يعد تبديل المضيفين في هذه الأيام أمرًا سهلاً حقًا.
لقد استخدمت الكثير من شركات الاستضافة على مدار العقد الماضي ، وأخيراً وجدت ما يناسبني.
أستخدم Rocket.net لاستضافة هذا الموقع وجميع مواقعي ، وهي إلى حد بعيد أفضل مضيف استخدمته على الإطلاق.
دعم العملاء الخاص بهم لا يصدق ، ولوحة القيادة بديهية ومليئة بالميزات ، والأداء من الدرجة الأولى.
بصفتك مضيف WP متميزًا ، هناك الكثير من الأشياء الجيدة داخل لوحة القيادة فوق عناصر الاستضافة القياسية.
على سبيل المثال ، يحتوي كل موقع على نسخ احتياطية يومية آلية ونسخ احتياطية يدوية ، وهناك أمان مدمج وحماية DDoS عبر Cloudflare Enterprise ، وستحصل على مواقع التدريج بنقرة واحدة.
ولديهم تجربة قاتلة 1 دولار للشهر الأول.
تعرف على المزيد حول Rocket.net
إذا كنت تريد نقل موقعك إلى المستوى التالي ، فلا يمكنني أن أوصي بهم بما فيه الكفاية.
2. إضافة التخزين المؤقت
ما هو 9،027 مقسومًا على 17؟
للإجابة على هذا السؤال ، عليك أن تسحب آلة حاسبة ، وتثقب الأرقام ، وبعد ذلك يمكنك بثقة أن تقول الإجابة ، وهي 531.
الآن إذا سألتك مرة أخرى ، فما هو 9،027 مقسومًا على 17؟
هذه المرة عرفت الإجابة على الفور لأنك قمت بتخزينها في ذاكرتك.
هذا ما يشبه التخزين المؤقت.
عندما يزور شخص ما موقع الويب الخاص بك ، فإنه يدير مجموعة من العمليات لإنشاء الصفحة. بدون التخزين المؤقت ، يحدث هذا في كل مرة يزور فيها شخص ما موقع الويب الخاص بك. يشبه استخدام الآلة الحاسبة للحصول على نفس الإجابة مرارًا وتكرارًا.
كما يمكنك أن تفهم ، هذا مضيعة للغاية.
باستخدام التخزين المؤقت ، يقوم موقعك بإنشاء صفحة مرة واحدة ثم حفظها تمامًا كما قمت بحفظ الرقم 531 في ذاكرتك. عندما يزور شخص ما موقعك ، يتم تقديم النسخة المخبأة على الفور دون الحاجة إلى تشغيل جميع العمليات المستخدمة في الأصل لإنشاء الصفحة.
منطقي؟
الآن دعنا نتحدث عن كيفية الاستفادة من هذه التقنية على موقع الويب الخاص بك.
كيفية إضافة التخزين المؤقت إلى موقعك
أولاً ، قد يوفر مضيفك تخزينًا مؤقتًا مدمجًا. هذا صحيح بالنسبة لـ Rocket.net والعديد من الأجهزة المضيفة الأخرى عالية الأداء.
إذا كان مضيفك لا يوفر التخزين المؤقت ، فهناك الكثير من المكونات الإضافية للاختيار من بينها. في رأيي ، الخيار الأفضل هو WP Rocket.
يوفر WP Rocket تخزينًا مؤقتًا فائق السرعة والعديد من تحسينات الأداء الأخرى. سأشير إلى هذا المكون الإضافي حوالي مائة مرة خلال هذا المنشور ، لذلك سترى كل ما يمكنه فعله.
على الرغم من أن Kinsta يوفر التخزين المؤقت ، إلا أنني أستخدم WP Rocket أيضًا بسبب أدوات الأداء الأخرى المضمنة.
يمكنك اتباع البرنامج التعليمي لإعداد WP Rocket الخاص بي للبدء:
تحقق من WP Rocket →
إذا كنت ترغب في الحصول على بديل مجاني ، فإنني أوصي بـ WP Super Cache إذا كنت تريد شيئًا سهل الاستخدام و W3 Total Cache إذا كنت تريد المزيد من الخيارات المتقدمة.
الاستضافة عالية الأداء والتخزين المؤقت هي بالتأكيد أهم ميزات السرعة التي يحتاجها موقعك. هكذا قال…
لم يتبق سوى شيء واحد يمكن أن يعرقل أداءك تمامًا.
يجب عليك استخدام هذه الخطوات الثلاث التالية
بمجرد الانتهاء من إعداد التخزين المؤقت ، وجه انتباهك إلى صور موقعك.
إذا لم تقم بتحسين صورك ، فلن يصل موقعك أبدًا إلى 2-3 ثوانٍ من التحميل ، ولن تحصل أبدًا على نتيجة PageSpeed محسّنة.
يمكن أن تكون الصور عبئًا كبيرًا للغاية في أوقات التحميل ، لذلك أقوم بتضمين الطرق الثلاث التي يمكنك من خلالها تحسينها هنا.
الطريقة الأولى لتحسين صورك هي ضغطها.
3. ضغط الصور الخاصة بك
خوارزميات ضغط الصور الحديثة مذهلة.
يمكنهم تقليص حجم ملف الصورة بنسبة 70٪ دون التأثير على جودتها بطريقة ملحوظة. النقطة المهمة هي أنه يمكنك جعل جميع الصور الموجودة على موقعك يتم تحميلها بشكل أسرع دون التقليل من جودتها. ليس هناك جانب سلبي - بجدية!
عندما يتعلق الأمر بتحسين الصورة ، فإن المكون الإضافي المفضل لدي هو Optimole.
ستتعلم المزيد عن Optimole في الخطوتين التاليتين ، ولكن إليك ما تحتاج إلى معرفته أولاً:
يستخدم Optimole خوارزمية ضغط فعالة للغاية لضغط صورك إلى جزء صغير من حجم ملفها السابق. والأفضل من ذلك أنه سهل الاستخدام.
تعمل المكونات الإضافية الأخرى لتحسين الصور على تحرير الصور الموجودة على موقعك واستخدام موارد الخادم الخاص بك. لا يلمس Optimole أصولك - فهم ينسخون صورك إلى الخادم الخاص بهم ثم يقومون بتحسينها هناك. هذا يحافظ على تنظيم مكتبة الوسائط الخاصة بك ولن يتباطأ موقعك عند ضغط الصور.
إذا كنت تريد معرفة كيفية إعداد Optimole على موقعك ، فيمكنك متابعة مقطع الفيديو الكامل الخاص بي:
بديل ممتاز هو البرنامج المساعد ShortPixel. يتطلب الإعداد مزيدًا من العمل ، ولكن لا يزال من السهل استخدامه بدرجة كافية.
لقد استخدمت ShortPixel بسعادة على هذا الموقع لسنوات وتحولت فقط إلى Optimole لهذا التكتيك التالي.
4. تغيير حجم الصور الخاصة بك
انتبه جيدًا لأن التفاصيل مهمة.
ها هي الفكرة الكبيرة:
كلما كانت أبعاد الصورة أكبر ، زاد حجم ملفها.
على سبيل المثال ، قد تكون الصورة التي يبلغ عرضها 3000 بكسل 900 كيلوبايت ، ولكن عند تغيير حجمها إلى 600 بكسل ، فإنها تبلغ 60 كيلوبايت فقط. هذا هو تقليل حجم الملف بمقدار 15 ضعفًا!
إليكم سبب أهميته.
سيتم عرض الصور في منشور المدونة هذا بعرض 600 بكسل فقط على أوسع نطاق لها. باستخدام مثالي ، تم تغيير حجم هذه الصورة إلى 600 بكسل وعرضها 60 كيلوبايت فقط.
إذا لم أقم بتغيير حجم الصورة واستخدمت إصدار 3000 بكسل ، فستظل تظهر فقط بعرض 600 بكسل في هذا المنشور . ستبدو الصورة متشابهة بالنسبة لك ، ولكن تحميلها سيستغرق وقتًا أطول بمقدار 15 ضعفًا.
بمعنى آخر ، يمكن أن يؤدي تغيير حجم الصور بشكل صحيح قبل إدراجها في مشاركاتك إلى إحداث فرق كبير في سرعة تحميل موقعك.
ها هي المشكلة.
ربما لا تعرف بالضبط مدى عرض صورك في مشاركاتك. علاوة على ذلك ، تجعل الأجهزة المحمولة هذه الطريقة أكثر تعقيدًا. عندما يتعلق الأمر بحجم الشاشة ، إذا أخذنا في الاعتبار جميع الشاشات والأجهزة المحمولة المختلفة ، فهناك الآلاف فعليًا التي يمكن حسابها.
إذا كنت ترغب في عرض الصور ذات الحجم المثالي للزائرين ، فيجب أن يتم تغيير حجمها ديناميكيًا ، ولهذا السبب بدأت في استخدام Optimole.
يقوم Optimole تلقائيًا بإنشاء نسخ ذات حجم مثالي من صورك. إذا قام شخص ما بزيارة موقعك وعرضت الصورة بعرض 400 بكسل ، فإن Optimole تمنحه نسخة من تلك الصورة بعرض 400 بكسل.
يمكن لزائر آخر الوصول إلى الصفحة بعد ثانية باستخدام جهاز لوحي يعرض الصورة بعرض 510 بكسل ، وسيقوم Optimole بتحميل نسخة مختلفة من الصورة بعرض 510 بكسل بالضبط.
مكاسب الأداء التي تحصل عليها من هذا ضخمة ، وأفضل جزء هو أنك لست مضطرًا لفعل أي شيء إلى جانب تثبيت المكون الإضافي Optimole. إنه يعمل لحظة تنشيطه دون حتى لمس أي إعدادات. شيء مذهل!
جرب Optimole على موقعك →
هناك طريقة أخرى لتحسين الصور على موقعك يمكن أن تحدث فرقًا كبيرًا.
5. تحميل صورك كسول
منشور المدونة هذا طويل جدًا ويحتوي على الكثير من الصور.
إذا كنت قد قرأت هذا حتى الآن ، فمن المحتمل أن تكون في هذه الصفحة لمدة دقيقة واحدة على الأقل. بمعرفة هذا ، ما مدى غباء جعلك تقوم بتحميل جميع الصور في المنشور بأكمله عند تحميل هذه الصفحة لأول مرة؟ ما زلت لم تصل إلى الكثير من الصور ، لذلك لا داعي لتحميلها بعد.
مع التحميل البطيء ، يتم تحميل الصور التي تظهر على الشاشة فقط. ثم أثناء التمرير لأسفل الصفحة ، يتم تحميل الصور المتبقية عند عرضها.
لقد قمت بعمل تصور في هذا الفيديو يوضح كيف يعمل هذا بشكل أكثر وضوحًا مما يمكنني شرحه في الكتابة:
الآن بعد أن فهمت كيفية عمل التحميل البطيء ، فلنتحدث عن التنفيذ.
كيفية إضافة التحميل البطيء
إن إضافة التحميل البطيء أمر سهل حقًا ، لذا فهو تكتيك لا بد منه ، في رأيي.
أولاً ، إذا قمت بتثبيت Optimole ، فإنه يضيف تلقائيًا تحميلًا كسولًا ، لذلك تكون قد انتهيت بالفعل من هذا التكتيك.
ثانيًا ، إذا كنت لا تستخدم Optimole ولكنك قررت استخدام WP Rocket ، فما عليك سوى تحديد هذا المربع هنا في الإعدادات:
أخيرًا ، يحتوي WordPress بالفعل على تطبيقه الخاص للتحميل البطيء الآن ، لذلك لا يتعين عليك استخدام أي من هذه المكونات الإضافية إذا كنت لا تريد ذلك.
أعتقد أن هذه المكونات الإضافية تقوم بعمل أفضل لأنها تحتوي على ميزات إضافية ، مثل التحميل البطيء للفيديو والقدرة على تحميل عنصر نائب منخفض الجودة أولاً ، ولكن يمكنك تقنيًا تخطي هذه الخطوة تمامًا.
التحسين التاليان يسيران جنبًا إلى جنب وهما مهمان بشكل خاص لمواقع WordPress.
6. تصغير الملفات الخاصة بك
لقد تعلمت للتو أن ضغط صورك يجعل تحميلها أسرع لأن الصور المضغوطة لها حجم ملف أصغر.
نشير أحيانًا إلى حجم الملف على أنه وزن ، لذا فإن ضغط الصورة يقلل من وزنها.
الفكرة الكبيرة هي أن تقليل وزن موقعك يجعل تحميله أسرع . هذا يعني أنك تريد تقليل حجم الملف لكل ملف يقوم موقع الويب الخاص بك بتحميله.
إلى جانب الصور ، يقوم موقع الويب الخاص بك بتحميل ملفات CSS وملفات Javascript وملفات الخطوط ، من بين أنواع الملفات الأخرى. احتفظ بهذه الفكرة للحظة ، ودعنا نتحدث عن التصغير.
Minification هو مصطلح برمجي فاخر يعني بشكل أساسي ضغط الملفات النصية. تقوم بضغط الصور وتصغير الملفات. لأغراضنا ، لا نحتاج إلى الحصول على تفاصيل أكثر من ذلك.
تمامًا مثلما تقوم بضغط صورك ، يمكنك تصغير ملفات CSS و Javascript (و HTML) لجعلها أصغر وتقليل وزن صفحتك.
كيفية تصغير الملفات
مرة أخرى ، تعد إضافة التصغير إلى موقعك أمرًا بسيطًا.
باستخدام WP Rocket ، توجد مربعات اختيار لتمكين التصغير لـ CSS و JS و HTML.
هذا كل ما عليك القيام به.
يعد التصغير مهمًا جدًا لمواقع WordPress لأنه من المحتمل أن يكون لديك ستة مكونات إضافية على الأقل وملفات تحميل موضوع على موقعك. في كثير من الأحيان ، لا يقوم المطورون بتصغير الملفات بأنفسهم ، لذلك يعتني WP Rocket بذلك نيابة عنك.
إذا كنت ترغب في الحصول على بديل مجاني للتصغير ، تحقق من المكون الإضافي Autoptimize.
7. سلسل ملفاتك
Concatenate هو مصطلح تقني آخر يعني "الجمع".
عند تجميع الملفات ، تقوم بدمجها.
مرة أخرى ، نظرًا لأن لديك كل هذه المكونات الإضافية على ملفات تحميل موقعك ، فمن المهم استخدام مكون إضافي مثل WP Rocket لدمجها في أقل عدد ممكن من الملفات. إليكم السبب ...
لقد تعلمت أن تقليل وزن صفحتك يجعل تحميلها أسرع ، ولكن هناك عامل أداء رئيسي آخر لتحسينه: طلبات HTTP.
أعلم أن هذا المنشور أصبح تقنيًا إلى حد ما ، لذلك سأبقي هذا بسيطًا قدر الإمكان.
يتطلب كل ملف تقوم بتحميله طلب HTTP. كل صورة ، ملف JS ، ملف CSS ، إلخ - تتطلب جميعها طلب HTTP واحدًا.
يحتوي موقع الويب الخاص بك على عدد ثابت من طلبات HTTP يمكنه التعامل معها في وقت واحد ، لذلك هناك تأثير معوق يحدث عند تحميل الملفات. لهذا السبب ، كلما قل عدد طلبات HTTP التي يقدمها موقعك ، زادت سرعة تحميله.
على سبيل المثال ، إذا كان موقع الويب الخاص بك يحتوي على 5 ملفات CSS يبلغ حجمها 5 كيلو بايت ، فسيتم تحميلها بشكل أسرع إذا قمت بدمجها في ملف CSS واحد بحجم 25 كيلو بايت.
باستخدام التصغير ، نقوم بتقليل وزن ملفات موقعك ، ثم باستخدام التسلسل ، نقوم بدمجها لتقليل طلبات HTTP.
كيفية إضافة التسلسل
يمكننا اللجوء إلى المكون الإضافي WP Rocket لهذا التحسين أيضًا.
توجد مربعات اختيار لسلسلة ملفات CSS وملفات JS.
تحتاج فقط إلى تحديد كلا المربعين ، وحفظ التغييرات ، والانتهاء من ذلك.
تتوفر هذه الخيارات أيضًا في المكون الإضافي Autoptimize.
قد تفاجئك هذه النصيحة التالية ، لكنها تحسين آخر لا بد منه في رأيي.
8. تحميل الملفات مع CDN
الإنترنت سحر.
يمين؟
لكن في الحقيقة ، لا ، ليس كذلك.
إنها شبكة من أجهزة الكمبيوتر ، وجميع الاتصالات في هذه الشبكة مادية في النهاية.
قد يبدو من الغريب التفكير في الأمر ، ولكن المسافة بين الخادم حيث يتم تخزين محتوى موقعك وموقع الزائر مهمة للغاية.
إذا كان خادمك في نيويورك وقام شخص ما من طوكيو بزيارة موقع الويب الخاص بك ، فسيستغرق وصول الملفات إليه وقتًا أطول مما لو قام شخص آخر في نيويورك بزيارته.
قلت أنه كان من الغريب التفكير فيه.
فماذا لو قمت بتخزين نسخة من موقعك على خادم في طوكيو أيضًا؟ ألن يتم تحميله بشكل أسرع للزوار في اليابان؟
نعم!
وهذا بالضبط ما يفعله CDN.
CDN تعني شبكة توصيل المحتوى ، وهي أساسًا شبكة من الخوادم التي تخزن نسخًا مخزنة مؤقتًا من موقع الويب الخاص بك في جميع أنحاء العالم.
بهذه الطريقة ، بغض النظر عن مكان وجود شخص ما عند زيارته ، يوجد خادم بالقرب منه لتقديم محتوى موقعك.
عند تنشيط CDN لأول مرة ، قد لا يبدو أنه يساعد إذا كنت تعيش بالقرب من الخادم الأصلي لمضيفك. ما هو أكثر أهمية هو مدى سرعة تحميل الموقع لبقية العالم.
كيفية إضافة CDN إلى موقعك
إذا كنت تستخدم Rocket.net ، فقد انتهيت بالفعل.
يقومون بتشغيل موقعك باستخدام Cloudflare Enterprise ، لذلك يتم تسليم موقعك بالفعل من الخوادم القريبة في جميع أنحاء العالم.
إذا كنت لا تستخدم Rocket.net ، فإنني أوصي بالاشتراك في الطبقة المجانية من Cloudflare بدلاً من ذلك.
ولكن ، إذا كنت لا تريد فعل أي شيء تقني ولا تريد إجراء تغييرات DNS على موقعك ، فيمكنك بدلاً من ذلك استخدام RocketCDN ، الذي تم إنشاؤه بواسطة فريق WP Rocket.
يتم تشغيله بواسطة CDN الخاص بـ Stackpath ، لذلك توجد شبكة عالمية من الخوادم لتقديم محتوى موقعك. يكلف 8 دولارات شهريًا ، لكن من السهل جدًا دمجها. بعد التسجيل ، كل ما عليك فعله هو تحديد المربع لتمكينه ، وتكون قد انتهيت.
9. اختر موضوعًا سريعًا
حسنًا ، يجب أن أعترف أن هذه النصيحة الأخيرة مختلفة بعض الشيء.
سيخبرك الكثير من مدوني WP باختيار سمة يتم تحميلها بسرعة ، ولكن بصفتك مطورًا للقوالب ، اسمح لي أن أشرح كيف يعمل هذا بالفعل.
لن يؤدي موضوع WordPress إلى تسريع موقعك. بدلاً من ذلك ، أنت تبحث عن موقع لا يبطئ موقعك. ومع ذلك ، ما لم يتم إنشاء السمة بشكل سيئ ، فلن يؤدي ذلك إلى إبطاء موقعك كثيرًا إذا كنت تستخدم التكتيكات التي ذكرتها أعلاه. سأشرح.
مع كل السمات الخاصة بي ، أقوم بتحميل الحد الأدنى مع الاستمرار في إنشاء تجربة مستخدم أنيقة وعصرية. هذا يعني تحميل السمات فقط:
- ملف CSS واحد
- ملف جافا سكريبت واحد مصغر
- طلب واحد لخطوط Google
- خط رمز Font Awesome (للرموز الاجتماعية)
بدون تقديم تضحيات في التصميم (مثل استخدام خط النظام) ، يكون هذا أقل ما يمكن أن تحصل عليه السمة.
ليست كل الموضوعات محسّنة بهذا الشكل ، لكنها ليست مصدر قلق كبير في رأيي. هذا لأنه حتى إذا لم يتم تحسين المظهر الخاص بك بشكل جيد وقام بتحميل ملفين CSS وثلاثة ملفات Javascript ، ولم يتم تصغير أي منها ، فسيظل المكون الإضافي مثل WP Rocket متسلسلًا ويصغرها من أجلك ، وبالتالي فإن النتيجة النهائية متشابهة.
في الأساس ، من غير المحتمل أن يؤدي موضوعك إلى إبطاء موقعك كثيرًا إذا كنت تستخدم استراتيجيات الأداء المذكورة أعلاه.
اختر سمة من مطور حسن السمعة ، ولن يكون أداء السمة مشكلة.
تحسينات إضافية
يا للعجب!
هذا المنشور هو بالفعل أطول بكثير مما توقعت ، وإذا كنت قد وصلت إلى هذا الحد ، آمل أن تكون متحمسًا لمعرفة المزيد عن تحسين الأداء.
في الجزء المتبقي من هذا المنشور ، سأغطي تحسينات أكثر تحديدًا وتقنية. لقد جعلت هذه النصائح سهلة للمبتدئين قدر الإمكان. بعضها سهل التنفيذ ، ولكن بصراحة ، بعضها متقدم جدًا ، وهذا هو بالضبط ما يجب أن يكون.
استخدم أكبر عدد ممكن على موقعك ، وتذكر ، إذا قمت بتنفيذ أول 9 تكتيكات وتتبع أفضل ممارسات الأداء ، فقد حصلت بالفعل على نصيب الأسد من النتائج.
10. التوقف عن استخدام برنامج Google Analytics
لقد ذكرت Google Analytics عدة مرات حتى الآن لأنه يمثل استنزافًا للأداء لا مفر منه.
على الأقل ، كان الأمر كذلك حتى وقت قريب.
الآن هناك خيارات أفضل بكثير لمستخدمي WordPress ، مثل Independent Analytics.
على عكس Google Analytics ، لا يقوم برنامج Independent Analytics بتحميل أي ملفات خارجية. في الواقع ، لا يتم تحميل أي ملفات على الإطلاق. إنها تقدم طلب REST API داخليًا واحدًا إلى موقعك الخاص ، وهذا كل شيء.
بمعنى آخر ، ليس له أي تأثير تقريبًا على موقعك. من خلال التبديل إلى التحليلات المستقلة ، ستعمل على تسريع موقع الويب الخاص بك على الفور ، بالإضافة إلى حصولك على تحليلات صديقة للخصوصية ولوحة معلومات أسهل في الاستخدام.
تعرف على المزيد حول التحليلات المستقلة.
11. تأجيل جافا سكريبت
إذا كنت تستخدم تكتيكًا واحدًا فقط من بقية هذه القائمة ، فاستخدم هذا الأسلوب.
دون الضياع في التفاصيل الفنية ، يعد ترتيب تحميل الملفات على موقعك أمرًا مهمًا للغاية. هذا المفهوم يسمى تحسين مسار العرض .
الفكرة هي أنه يجب تحميل CSS لموقعك أولاً لأن موقع الويب الخاص بك سيكون شاشة بيضاء فارغة حتى يحدث ذلك. بالنسبة لملفات Javascript ، فمن المحتمل أنها تستخدم لأشياء مثل التحليلات التي لا تحتاج إلى التحميل على الفور.
بدلاً من الاحتفاظ بصفحة بيضاء فارغة أثناء تحميل JS ، يمكنك تأجيل ملفات JS إلى ما بعد تحميل كل شيء آخر على موقعك. بهذه الطريقة ، يتم تحميل موقعك في نفس الوقت ولكنه يظهر بصريًا في وقت أقرب مما يجعله يظهر بشكل أسرع.
المفهوم متقدم إلى حد ما ، ولكن مرة أخرى ، ليس من الصعب تنفيذه.
كيفية تأجيل جافا سكريبت
ستحب هذا.
بقدر ما هو متقدم مثل التكتيك ، كل ما عليك فعله هو تحديد مربع في إعدادات WP Rocket.
ما لم تكن تعرف ما تفعله ، أوصي بشدة بترك خيار "الوضع الآمن" محددًا أيضًا.
هناك أيضًا طريقة يمكنك من خلالها تحسين CSS لمسار العرض.
12. تحسين تسليم CSS
تمامًا مثل Javascript ، تعمل CSS على حظر العرض ، لذا يمكننا تأجيلها أيضًا للحصول على أداء أفضل.
الآن أعرف ما تفكر فيه: ألم نؤجل فقط JS حتى يمكن تحميل CSS ، والآن نحن نؤجل CSS أيضًا ؟؟
هَذَا مَا يَحْدثُ…
لإزالة CSS لحظر العرض ، ستقوم بتضمين CSS المهم المستخدم لتصميم أجزاء موقعك التي تظهر على الفور. ثم يتم تحميل بقية CSS لموقعك لاحقًا. مرة أخرى ، هذا يعني أن موقعك سيظهر بصريًا في وقت أقرب.
هذا تكتيك متقدم للغاية ولن أزعجني حتى إذا لم يجعل WP Rocket الأمر سهلاً للغاية.
كيفية تحسين تسليم CSS
من المحتمل أنك تعتاد على هذا الآن ...
كل ما عليك فعله لتحسين تسليم CSS الخاص بك باستخدام WP Rocket هو تحديد هذا المربع:
يقوم WP Rocket بعد ذلك بإنشاء CSS الهامة اللازمة لكل صفحة ومضمنة في HTML. ثم يتم تأجيل باقي CSS.
لن أحاول أبدًا القيام بذلك يدويًا ، لذا فمن الأفضل أن تتم أتمتة هذه الطريقة.
بعد ذلك ، حصلت على فوزين سريعين آخرين لتسريع موقعك.
13. قم بإيقاف تشغيل دعم رموز تعبيرية WordPress
أضاف WordPress دعم الرموز التعبيرية مرة أخرى في الإصدار 4.2.
لضمان عمل الرموز التعبيرية على موقعك ، يقوم WordPress بتحميل ملف Javascript صغير في كل صفحة من صفحات موقعك. هنا الحاجة…
نحن في الواقع لا نحتاج إلى هذا الملف لدعم الرموز التعبيرية لأن كل جهاز تقريبًا يحتوي بالفعل على خط رموز تعبيرية مثبت. لقد قمت بإزالة دعم الرموز التعبيرية من هذا الموقع ، على سبيل المثال ، ولكن هل ما زلت ترى الرموز التعبيرية لأن جهازك مثبت عليها؟
من خلال إزالة دعم الرموز التعبيرية ، لن يقوم موقعك بتحميل ملف Javascript الإضافي مما يجعله أسرع قليلاً.
يمكنك تحديد هذا المربع في WP Rocket لإزالة دعم الرموز التعبيرية:
يعد المكون الإضافي Disable Emojis بديلاً بسيطًا ومجانيًا.
14. تعطيل تضمين WordPress
عند لصق رابط من Twitter في منشور ، سيقوم WordPress تلقائيًا بإنشاء مربع تضمين جميل.
هذا رائع ، لكن ما يزعجني هو أنه يفعل ذلك أيضًا عند لصق روابط لمواقع WordPress مثل هذا. لا أستخدم هذه الميزة مطلقًا ، لذا أفضل تعطيلها.
نظرًا لأن WordPress يقوم بتحميل ملف Javascript إضافي لميزة التضمين هذه ، فإن إزالته تقلل من وزن صفحتك وتتخلص من طلب HTTP آخر.
يحتوي WP Rocket على مربع اختيار آخر لإضافة هذا التحسين بسهولة إلى موقعك.
إنه تحسين صغير ، لكن كل جزء يساعد.
15. قم بتحديث إصدار PHP الخاص بك
لغات البرمجة الحديثة سريعة بشكل مذهل.
لا علاقة لمعظم أساليب الأداء بمدى سرعة تنفيذ الكود على موقعك. بدلاً من ذلك ، نقوم بتحسين سرعة تسليم محتوى موقع الويب الخاص بك إلى جهاز الزائر. هذا هو الجزء الذي يستغرق وقتًا.
هذا التكتيك مختلف لأنه في الواقع يسرع من سرعة تشغيل الكود على موقعك.
تزداد سرعة الإصدارات الأحدث من PHP ، لذا إذا كنت لا تزال تستخدم PHP 5 ، فسترى مكاسب هائلة من خلال التبديل إلى 7 أو 8.
فيما يلي نظرة على كيفية تحسين PHP 8 للأداء مقارنة بـ PHP 7 ، والمكاسب من 5 إلى 7 كانت هائلة أيضًا.
من المهم أن تفهم أن مضاعفة سرعة PHP لموقعك لن تجعل تحميل موقعك أسرع بمرتين. إنه يجعل كود PHP يعمل بسرعة مضاعفة ، وهو على الأرجح جزء صغير من وقت تحميل موقعك.
ومع ذلك ، من المحتمل أن يكون هذا مكسبًا سهلًا للغاية للأداء وهو أفضل للأمان وتوافق المكونات الإضافية أيضًا.
كيفية تحديث إصدار PHP الخاص بك
هذا شيء تعلمته على مر السنين.
يتضمن جميع مضيفي الويب تقريبًا خيارًا في لوحة المعلومات حيث يمكنك تبديل إصدار PHP لموقعك. على سبيل المثال ، إليك قائمة منسدلة في لوحة معلومات Rocket.net حيث يمكنك تغييرها ببضع نقرات.
يمتلك معظم المضيفين هذا التحكم في مكان ما في لوحة القيادة ، لذا يجب أن يكون التحديث بسيطًا.
ولكن قبل القيام بذلك ، تأكد من الاحتفاظ بنسخة احتياطية من موقعك واستعد للعودة إلى الإصدار السابق. إذا قمت بالتحديث إلى أحدث إصدار من PHP ، فهناك احتمال أن يكون هناك مكون إضافي واحد على الأقل على موقعك غير متوافق ، لذلك من الجيد إجراء هذا النوع من التغيير في وقت تكون فيه مستعدًا للعودة إلى PHP إصدار أو إجراء أي تغييرات ضرورية.
16. قلل من الإضافات
هل المكونات الإضافية تبطئ موقعك؟
نوعا ما. انه لامر معقد. سأعطيكم بعض الأمثلة.
قد تقوم بعض المكونات الإضافية بتحميل ملف أو اثنين على كل صفحة من صفحات موقعك ، مما يؤدي إلى إبطائها.
أستخدم ملحق WPForms لجميع نماذج الاتصال الخاصة بي ، والتي تم تصميمها بعناية أكبر. يقوم WPForms بتحميل ملف CSS وبناءً على الميزات التي تستخدمها ، هناك عدد قليل من ملفات JS أيضًا. ومع ذلك ، فإنه يقوم فقط بتحميل هذه الملفات على الصفحات التي تحتوي على نماذج جهات اتصال. هذا يعني أنه ليس له أي تأثير على أداء موقعي باستثناء صفحة الاتصال .
من ناحية أخرى ، أستخدم أيضًا مكونًا إضافيًا يسمى تنسيق Media Titles لإضافة عناوين إلى صوري تلقائيًا بناءً على اسم الملف. يعمل هذا المكون الإضافي قليلاً من PHP في لوحة تحكم المسؤول عندما أقوم بتحميل الصور ، وهذا كل شيء. ليس لها أي تأثير على أداء موقعي.
يمكنك الآن معرفة سبب عدم صحة قول "المكونات الإضافية تبطئ موقعك". أحيانًا يفعلون ، وأحيانًا لا يفعلون ، وأحيانًا يفعلون في ظل ظروف معينة.
كقاعدة عامة ، إذا غيّر المكون الإضافي أي شيء في الواجهة الأمامية لموقعك ، فسيؤثر ذلك على الأداء. على العكس من ذلك ، إذا كان المكون الإضافي يؤثر فقط على لوحة تحكم المسؤول ، فمن المحتمل ألا يؤدي إلى إبطاء موقعك.
"الواجهة الأمامية" لموقعك هي ما يراه الزوار. "النهاية الخلفية" هي لوحة تحكم المشرف الخاصة بك.
ألق نظرة على قائمة المكونات الإضافية واختر أي مكونات إضافية تُجري تغييرات على الواجهة الأمامية لموقعك. إذا وجدت أيًا نشطًا ، لكنك لا تستخدمه ، فمن المحتمل أن يؤدي ذلك إلى إبطاء موقعك ، لذا قم بإلغاء تنشيطه.
17. استخدم صور webP
أنا متأكد من أنك على دراية بتنسيقات الصور مثل JPG و PNG.
حسنًا ، أصدرت Google تنسيقًا جديدًا للصورة يسمى webP تم تصميمه لتحقيق الأداء الأمثل. عند استخدام تنسيق webP ، تبدو الصورة متطابقة ولكن يتم تحميلها بشكل أسرع.
يبدو الأمر رائعًا في البداية ، ولكن هنا يصبح الأمر معقدًا.
ليست كل المتصفحات تدعم صور webP حتى الآن. هذا يعني أنك إذا استخدمت webP لجميع صورك ، فقد لا تظهر على الإطلاق في متصفحات مثل Safari. في الوقت الحالي ، تحتاج إلى تقديم صور webP ولديك أيضًا نسخة احتياطية JPG أو PNG من كل صورة.
من الواضح أن هذا يبدو وكأنه عمل أكثر مما يستحق ، ولكن مرة أخرى ، هناك حل بسيط للغاية.
كيفية استخدام صور webP
إذا كنت تستخدم المكون الإضافي Optimole ، فسيتم التعامل معه بالكامل من أجلك.
في الواقع ، لا يوجد حتى إعداد لهذا الغرض.
يقوم Optimole تلقائيًا بإنشاء إصدارات webP من صورك ويقدمها للزوار إذا كان متصفحهم يدعمها. يتم تحميل ملف Javascript صغير مع polyfill لتقديم إصدارات JPG / PNG من الصور عندما لا يدعم مستعرض الزائر webP.
18. استخدام الجلب المسبق لنظام أسماء النطاقات
الجلب المسبق لنظام أسماء النطاقات رائع جدًا.
سيتم تحميل معظم الملفات الموجودة على موقعك من المجال الخاص بك. على سبيل المثال ، يستضيف موقع الويب الخاص بك ملف CSS في نسقك الذي يصمم موقعك على الويب.
إذا كنت تستخدم Google Analytics ، فسيقوم موقع الويب الخاص بك بتحميل ملفات Javascript المطلوبة من خوادم Google بدلاً من خوادمك. يستغرق هذا وقتًا أطول من تحميل الملفات المستضافة على نطاقك.
بشكل أساسي ، عند استخدام الجلب المسبق لـ DNS ، يبدأ موقع الويب الخاص بك في عملية تحميل الملفات الخارجية في وقت أقرب. في الواقع ، عندما يكتب شخص ما مجالك في شريط العناوين الخاص به ، يبدأ الجلب المسبق لـ DNS العمل لإعداد الملفات الخارجية قبل حتى زيارة موقع الويب الخاص بك.
التفاصيل فنية تمامًا ، لكن هذه هي الفكرة من وراء هذا التكتيك.
كيفية استخدام الجلب المسبق لنظام أسماء النطاقات
هناك خيار بسيط مقدم من WP Rocket للجلب المسبق.
في قائمة التحميل المسبق ، يمكنك إدخال عناوين URL لجميع الملفات الخارجية التي يقوم موقع الويب الخاص بك بتحميلها.
ربما يستخدم موقعك خطوط Google ، لذا فإن إضافة "//fonts.googleapis.com" ستمكّن الجلب المسبق لاسم النطاق هذا.
19. عدد المشاركات في كل صفحة
إذا كنت تدير مدونة نشطة ، فإن صفحة منشوراتك الرئيسية هي أهم صفحة في موقعك. يمكن أن تكون أيضًا واحدة من أبطأ.
لقد رأيت مدونين يعرضون كل واحدة من منشوراتهم على صفحتهم الرئيسية. عند زيارتك ، يدور مؤشر التحميل ويدور ، ولا يتم تحميل الصفحة بالكامل أبدًا. إنها تجربة مستخدم مروعة ، والأسوأ من ذلك ، أنها تكلفهم قدرًا هائلاً من النطاق الترددي.
في مرحلة ما ، يصبح مقدار HTML المطلوب للمشاركات مشكلة ، لكن المشكلة الرئيسية هي كل الصور. هذا هو سبب أهمية إضافة التحميل البطيء إلى موقعك.
بالإضافة إلى ذلك ، يجب عليك تعيين حد معقول لعدد المشاركات التي تعرضها على كل صفحة من صفحات مدونتك.
كيف تحد من مشاركاتك في كل صفحة
يحتوي WordPress على خيار مدمج للتحكم في مشاركاتك لكل صفحة في قائمة إعدادات القراءة.
طالما تم تمكين التحميل البطيء ، يمكنك عرض 10-30 مشاركة لكل صفحة دون مشكلة. ومع ذلك ، من المحتمل أن يكون الرقم 10 هو متوسط عدد المدونين الذين يستخدمهم ، ولن أتجاوز 10 دون استخدام التحميل البطيء.
20. دمج طلبات خطوط Google
أنا متأكد بنسبة 100٪ أن السمة الخاصة بك تقوم بتحميل خطوط Google.
إذا كانت سمة جيدة الترميز ، فيجب أن يكون هناك طلب واحد فقط لخطوط Google ، لذلك لا توجد مشاكل هناك.
ومع ذلك ، هناك احتمال أن تقوم المكونات الإضافية الموجودة على موقعك أيضًا بتحميل Google Fonts أو أنك قد أضفت المزيد من الخطوط بنفسك. إذا كانت هذه هي الحالة ، فإن موقعك يقوم بطلبات متعددة لخطوط Google مما يعني طلبات HTTP متعددة. Remember, the fewer HTTP requests, the better.
How to combine Google Fonts request
You're probably used to this by now…
To combine the Google Fonts requests on your site with WP Rocket, check this box:
If you're not sure if your site is making multiple Google Fonts requests, there's no harm in using this option, so I would recommend always turning it on.
21. Optimize Gravatar requests
When people leave comments on your site, their avatars show up automatically. That's because WordPress integrates with Gravatar to get the avatars.
Gravatar is a free service and all it does is associate an avatar with an email address. If you create an account and add an avatar, you'll see it show up on your site and all over the web automatically.
Here's the problem.
Every single one of those images makes another external request to the Gravatar servers. That means that if you get 10 comments on a post, your website is going to make up to 10 external HTTP requests – that's a lot!
There are three ways to optimize Gravatar, so it doesn't slow down your site.
How to optimize Gravatar avatars
The first option is very simple: lazy load Gravatar images.
Unfortunately, Optimole's lazy loading doesn't work with Gravatar images. In order to lazy load Gravatar images, you can use the free a3 Lazy Load plugin.
Alternatively, you can disable Gravatar entirely. In the Discussion settings, turn off avatars with this option:
As the setting implies, this disables avatars in the comments entirely. If you still want default avatars to show up, you can install the Disable User Gravatar plugin instead.
If commenters have their own accounts on your site, you can use the WP User Avatar plugin to let them upload their own avatars.
The third option is to cache the Gravatar images with a plugin like FV Gravatar Cache, but this plugin has been getting mixed user reviews.
While those three options are all viable, this next performance optimization is a fourth approach and the solution I use for this website.
22. Lazy load your comments
This is a really cool performance optimization I just started using.
Comments on your site don't show up until after all the post content, so why load them right away?
Since Optimole wasn't working to lazy load Gravatar images, I installed the Lazy Load for Comments plugin to lazy load the entire comments section. Problem solved!
Now when someone visits a post, none of the comments or Gravatar images are loaded until they scroll all the way down to the comments section. This removes all of the HTTP requests from Gravatar until well after the initial load.
While we're talking lazy loading , let's keep going with one more implementation.
23. Lazy load all videos
Do you embed Youtube videos in your posts?
Loading videos can be a major drag on performance, especially if you have more than one on the page.
يمكنك تحميل مقاطع الفيديو (و iframes) الخاصة بك كسول مثل الصور.
كيفية تحميل مقاطع الفيديو كسول
أستخدم ميزة التحميل البطيء من Optimole للصور ، لكن WP Rocket لديه خيار خاص لإطارات iframe ومقاطع الفيديو التي يمكنك تمكينها مثل هذا:
هناك أيضًا خيار لتحميل صورة مصغرة بدلاً من الفيديو ، لكنني شخصيًا لا أحب هذا الخيار لأنه يجعل الزائرين ينقرون على الفيديو مرتين ، وهو ما أجده مزعجًا.
24. تقليل عمليات إعادة التوجيه
إذا قمت بزيارة موقع الويب هذا باستخدام "http" ، فسيتم إعادة توجيهك إلى إصدار "https" بدلاً من ذلك.
بالإضافة إلى ذلك ، إذا قمت بزيارة الموقع بدون "www" ، فسيتم إعادة توجيهك إلى الإصدار الذي يحتوي على "www."
كلتا عمليتي إعادة التوجيه سريعة جدًا ، لكنهما لا يزالان يستغرقان وقتًا ، وعندما يتعلق الأمر بالأداء ، فإن كل جزء من الثانية مهم.
عند الارتباط بموقعك على الويب إما داخليًا أو من موقع ويب آخر ، تأكد دائمًا من استخدام رابط عنوان URL النهائي الذي يصل إليه الزوار. أستخدم دائمًا "https://www.competethemes.com/" حتى لا تكون هناك أي عمليات إعادة توجيه.
من خلال الارتباط دائمًا بالإصدار الصحيح من عنوان URL الخاص بك ، فإنك تتجنب إرسال الزوار من خلال عمليات إعادة التوجيه التي تجعل موقعك يبدو أبطأ.
25. استخدام عدد أقل من الخطوط
لقد قمت بالفعل بتحسين JS و CSS ، لذلك دعونا نتعامل بجدية مع تحسين الخطوط أيضًا.
عندما يتعلق الأمر بالأداء ، فإن الخطوط باهظة الثمن.
إذا قرأت رسالتي حول كيفية جعل موقعك أكثر جمالًا ، فستعرف أنني أدافع عن استخدام خط أو خطين على الأكثر. بالإضافة إلى كونها قاعدة تصميم جيدة ، فهي أيضًا قاعدة أداء جيدة.
يؤثر كل خط تقوم بتحميله على أداء موقعك ، لذا كلما قل استخدامك ، كان ذلك أفضل.
الآن دعنا نحصل على مزيد من التفاصيل.
26. استخدام أوزان أقل للخطوط
يضاعف وزن كل خط تكلفة الأداء التي تختارها الخط.
على سبيل المثال ، إذا كنت تستخدم خط Roboto ، فسوف تقوم بتحميل الوزن الافتراضي. إذا كنت تريد أيضًا أن تكون مائلة وجريئة ، فهذه مجموعات أحرف مختلفة تمامًا وهذا يعني أنك تقوم الآن بتحميل ثلاثة ملفات خط جميعها بنفس الحجم تقريبًا.
إذا كنت تستخدم أيضًا خط Playfair Display وتحمّل إصدارًا غامقًا ومائلًا ، فأنت تقوم الآن بتحميل ستة ملفات خط سيكون لها تأثير كبير على سرعة موقعك.
يمكن أن يبدو موقعك رائعًا ومتعدد الاستخدامات بخط واحد يتم تحميله بنمط افتراضي ومائل وجريء. إذا كنت تريد خطًا آخر تمامًا ، فاستخدمه للعناوين ، لذلك لا يلزم أن يكون له أوزان متعددة أو مائل.
27. قم بتحميل مجموعة أحرف لغتك فقط
لقد تعلمت للتو أن تحميل خط بأوزان مختلفة يضاعف عدد الملفات التي يحتاج موقعك إلى تحميلها.
باتباع نفس السلسلة ، كلما زاد عدد الأحرف في الخط ، زاد حجم الملف. النقطة المهمة هي أنك تريد فقط تحميل الأحرف التي تحتاجها.
تأكد من أنك تقوم بتحميل خطوط Google باللغة التي تستخدمها فقط. بالنسبة للمستخدمين الإنجليز ، فأنت تحتاج فقط إلى مجموعة الأحرف اللاتينية وليس Latin Extended ، والتي غالبًا ما يتم تحميلها افتراضيًا.
اعتمادًا على كيفية إضافة خطوط Google إلى موقعك ، قد تكون لديك القدرة أو لا تملك القدرة على تغيير ذلك ، لذا تحقق من خيارات السمة أو المكون الإضافي المتاحة.
28. قم بإيقاف تشغيل ميزات OpenType في خطوط Adobe
إذا كنت تستخدم Adobe Fonts (المعروفة سابقًا باسم TypeKit) لخطوطك ، فمن المحتمل أن يكون لديك حق الوصول إلى بعض ميزات OpenType.
بينما تعد ميزات OpenType رائعة لإضافة كسور جميلة وحروف كبيرة صغيرة والعديد من ميزات الطباعة الأخرى ، فأنت على الأرجح لست بحاجة إليها.
نظرًا لأن OpenType يتضمن الكثير من الحروف الرسومية الجديدة ، فإنه يجعل ملفات الخط أكبر مما يؤدي إلى أوقات تحميل أطول.
عند تحرير مشروعك ، قم بتعطيل ميزات OpenType هنا:
كما ترون في المثال الخاص بي ، أقوم فقط بتحميل أوزان الخطوط الثلاثة التي أحتاجها والمجموعة الفرعية باللغة الإنجليزية كما هو موضح في التكتيكات السابقة.
29. استبدل Font Awesome بـ Fontello
هذا التكتيك تقني للغاية ، ولكن نظرًا لأنه ساعدني ، فقد أدرجته لأي شخص آخر يقرأ كود الكتابة المريح.
إذا كنت تستخدم Font Awesome أو خط رمز آخر لموقعك ، فمن المحتمل أنك تقوم بتحميل الخط بالكامل ، أي أنك تقوم بتحميل مئات الرموز. على الأرجح ، أنت تستخدم فقط عددًا قليلاً من الرموز على موقعك.
باستخدام Fontello ، يمكنك إنشاء حزمة خطوط الأيقونة الخاصة بك باستخدام أيقونات Font Awesome التي تستخدمها بالفعل.
نظرًا لأنني أستخدم 26 رمزًا مختلفًا فقط على هذا الموقع ، فقد تمكنت بشكل كبير من تقليل حجم ملف الخط وورقة الأنماط الخاصة به (حوالي 100 كيلو بايت).
إذا كان لديك تحكم تقني كامل في موقعك ، فإن إزالة Font Awesome واستبداله بحزمة ويب مخصصة من Fontello هي طريقة ممتازة لتحسين أداء موقعك بشكل أكبر.
تحسينات أخرى
أرى مواقع ويب أخرى توصي بالنصائح التالية طوال الوقت ، ولكن هذا هو الشيء ...
هذه التكتيكات النهائية لن تجعل تحميل موقعك أسرع. سيعملون على تحسين أداء موقع الويب الخاص بك ، ولكن ليس بالطرق التي تعمل على تسريعه.
ستقلل من مقدار مساحة القرص التي يستخدمها موقعك ، ومن المحتمل أن تجعل موقعك أكثر أمانًا ، بل وتقلل من النطاق الترددي الذي تستخدمه. هذا يكفي لجعل هذه التكتيكات جديرة بالاهتمام في نظري ، ولهذا السبب قمت بإدراجها في نهاية هذا المنشور.
فيما يلي آخر 7 تكتيكات.
30. إيقاف تشغيل pingbacks و trackbacks
لا أحد يستخدم pingbacks أو trackbacks لأسباب مشروعة بعد الآن.
قبل وسائل التواصل الاجتماعي ، عندما كان الناس يديرون مدونات شخصية ، كانت pingbacks نوعًا ما مثل @ -ing شخص ما. بعبارة أخرى ، سيعلمونك عندما أشار مدون آخر إلى موقعك.
في الوقت الحاضر ، يتم استخدامها بشكل أو بآخر حصريًا للبريد العشوائي واستغلال الثغرات الأمنية (مثل DDoSing). من الأفضل تعطيلها ببساطة باستخدام هذين الخيارين في إعدادات المناقشة.
لا حاجة للمكونات الإضافية.
31. إبطاء Heartbeat API
تعمل واجهة برمجة تطبيقات Heartbeat في WordPress للحفاظ على تشغيل ميزات معينة في متصفحك. على سبيل المثال ، يقوم WordPress بحفظ منشوراتك تلقائيًا أثناء العمل عليها لمنعك من فقدان أي من المحتوى الخاص بك في حالة حدوث خطأ أو خطأ.
تعمل واجهة برمجة التطبيقات هذه عادةً مرة واحدة في الدقيقة ، وقد تجدها تبطئ من سرعتك قليلاً أثناء العمل على منشور أو استخدام ميزات أخرى في المسؤول لديك.
على الرغم من أنها ليست مشكلة كبيرة بالنسبة لمعظم الأشخاص ، إلا أنه يمكنك أيضًا إبطائها باستخدام هذا الإعداد في المكون الإضافي WP Rocket:
يؤدي تقليل النشاط ببساطة إلى إخبار Heartbeat API بالعمل مرة كل دقيقتين بدلاً من كل دقيقة.
32. تعطيل hotlinking
الارتباط السريع هو عندما يعرض شخص ما صورة على موقعه على الويب ، لكنه يستخدم عنوان URL للصورة من موقعك لخدمة الصورة. ما يحدث بعد ذلك هو أنه في كل مرة يزور شخص ما موقعه ، يتم طلب الصورة من خادمك بدلاً من خادمهم.
خلاصة القول هي عندما يقوم شخص ما بربط إحدى صورك ، فإنك تدفع مقابل عرض النطاق الترددي ولا تحصل على أي من الفوائد. إنها سرقة.
يتضمن Cloudflare خدمة ScrapeShield الخاصة بهم في المستوى المجاني ، والذي يحتوي على خيار منع الأشخاص من ربط صورك بشكل سريع.
لقد قمت بتشغيل هذا مؤخرًا ، ووفر لي الكثير من النطاق الترددي. أعتقد أن الارتباط السريع بدأ في إضافة ما يصل إلى نطاقي على مر السنين ، وهذا الخيار ألغى هذه الطلبات على الفور.
33. تحسين قاعدة البيانات الخاصة بك
من المحتمل ألا يؤدي تنظيف قاعدة البيانات إلى جعل موقعك أسرع ، ولكنه سيقلل من مساحة القرص التي تستخدمها.
إذا كان لديك الكثير من الانتفاخ في قاعدة البيانات الخاصة بك ، فمن المرجح أن يؤدي ذلك إلى إبطاء لوحة تحكم المسؤول لديك أكثر من الواجهة الأمامية لموقعك. على سبيل المثال ، إذا كان لديك عشرات الآلاف من التعليقات غير المرغوب فيها ، فقد يستغرق تحميل قائمة التعليقات وقتًا أطول بسبب الحجم الهائل للبيانات.
هناك الكثير من المكونات الإضافية المتاحة لتحسين قاعدة البيانات الخاصة بك ، ولكن هذا شيء أفعله مع WP Rocket أيضًا.
تتضمن قائمة قاعدة البيانات في إعدادات WP Rocket خيارات للحذف التلقائي لتعليقات البريد العشوائي وغيرها من البيانات غير المفيدة من قاعدة البيانات الخاصة بك أيضًا.
والأفضل من ذلك ، يمكنك جدولة هذه الأتمتة لتعمل من أجلك كل يوم أو أسبوع أو شهر.
34. تعطيل أو الحد من المراجعات اللاحقة
لقد تعلمت للتو أن WordPress يستخدم Heartbeat API لحفظ مسودات مشاركاتك بشكل روتيني. حسنًا ، يحفظ WordPress أيضًا المراجعات التي يمكنك استعادتها لاحقًا إذا لزم الأمر.
تكمن مشكلة تخزين الكثير من المراجعات في أنها تشغل مساحة في قاعدة البيانات الخاصة بك. المنشور الذي يحتوي على 19 مراجعة يشبه تخزين 20 مشاركة في قاعدة البيانات الخاصة بك. بينما يمكنك تعطيل المراجعات باستخدام مكون إضافي أو تقييدها ، يمكنك أيضًا حذفها ببساطة.
تتضمن قائمة قاعدة البيانات في WP Rocket خيارًا لحذف مراجعات المنشور.
يمكنك تشغيل هذا الخيار يدويًا أو جدولته.
وفقط تنبيه ، يجب عليك دائمًا الاحتفاظ بنسخة احتياطية من موقعك قبل تشغيل أي تحسينات لقاعدة البيانات.
لدي WP Rocket مجدول لتشغيل هذا التحسين كل يوم لأن Kinsta يقوم أيضًا بعمل نسخة احتياطية من موقعي يوميًا.
35. إزالة سلاسل الاستعلام
هناك الكثير لشرحه هنا ، ولكن نظرًا لأنه لن يؤدي إلى تسريع موقعك ، فسأنتقل مباشرة إلى المحصلة النهائية.
من المحتمل أن تمنع سلاسل الاستعلام الموجودة على عناوين URL الملفات من التخزين المؤقت. مع معظم ملحقات التخزين المؤقت ، مثل WP Rocket ، ليس هذا هو الحال ، لذا فإن وجود سلاسل الاستعلام ليس مشكلة.
علاوة على ذلك ، لا ينبغي إزالة سلاسل الاستعلام في كثير من الأحيان لأنها مطلوبة لكي تعمل المكونات الإضافية بشكل صحيح.
ما عليك سوى تنشيط هذا الخيار في WP Rocket والانتهاء من ذلك:
لقد قاموا بتحسين هذه الميزة حتى لا تؤدي إلى كسر الأشياء على موقعك ، ولن ترى تحذيرات من GTMetrix وأدوات تدقيق الأداء الأخرى التي تحتاجها لإزالة سلاسل الاستعلام من الموارد الثابتة.
36. حذف الإضافات غير النشطة
عندما تقوم بإلغاء تنشيط مكون إضافي ، فأنت تقوم ببساطة بإيقاف تشغيله. يمكنك إعادة تنشيطه ، وستتم استعادة إعداداتك السابقة.
ومع ذلك ، إذا قمت بحذف مكون إضافي ، فسيؤدي هذا عادةً إلى حذف الإعدادات والبيانات التي تم إنشاؤها بواسطة المكون الإضافي. هذا لأن معظم المكونات الإضافية لديها عملية تنظيف يتم تشغيلها عند حذفها ، لذلك لا تترك فوضى في قاعدة البيانات الخاصة بك.
إذا كانت لديك مكونات إضافية غير نشطة لم تحذفها بعد ، فيمكن أن يساعد حذفها في تحسين قاعدة البيانات الخاصة بك. أيضًا ، إنها مجرد ممارسة جيدة بشكل عام
استمتع بموقعك الأسرع
في أكثر من 7000 كلمة ، يعد هذا رسميًا أطول منشور مدونة كتبته على الإطلاق. كنت أرغب في تضمين كل شيء!
هناك شيء واحد آخر يجب أن أخبرك به ...
عندما يتعلق الأمر بتحسين الأداء ، فإن عملك لا ينتهي أبدًا. بعد تنفيذ التكتيكات التي تريد تجربتها على موقعك ، تأكد من العودة إلى هنا مرة أو مرتين سنويًا لتشغيل القائمة مرة أخرى وإعادة فتح موقعك.
أجد أنني بحاجة إلى إعادة تحسين موقعي مرة واحدة على الأقل سنويًا لإبقائه في أفضل حالاته.
قد تجد أيضًا أنه في المرة الأولى التي استخدمت فيها هذه القائمة ، كانت بعض التكتيكات تقنية للغاية بحيث يتعذر اكتشافها. عندما تصبح محترفًا في WordPress ، قد تعود لتجد أن هذه التكتيكات أبسط بكثير في التطبيق.
إذا كان لديك أي أسئلة ، سأترك قسم التعليقات مفتوحًا ، لذا يرجى النشر أدناه!