كيفية جعل طلبات HTTP أقل في WordPress (11 نصيحة)

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

لحسن الحظ ، من الممكن تقليلها ، وهذا ما يدور حوله هذا المنشور.

مقدمة لطلبات HTTP

عندما يزور المستخدم موقع الويب الخاص بك ، يتعين على متصفحه تنزيل الموارد من الخادم الخاص بك. للتواصل معه ، يرسل المستعرض طلبات باستخدام HTTP (بروتوكول نقل النص التشعبي).

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

فيما يلي الخطوات المتبعة عندما يتصفح شخص ما الإنترنت:

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

لماذا قد ترغب في أن يقوم موقع WordPress الخاص بك بتقديم طلبات HTTP أقل

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

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

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

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

من خلال تقليل طلبات HTTP على موقع الويب الخاص بك ، ستعمل على تحسين "أساسيات الويب الأساسية" الخاصة بك ، لا سيما نتيجة "أكبر محتوى في الرسم" (LCP). في المقابل ، يمكن أن يؤدي ذلك إلى تحسين تجربة المستخدم (UX) لأن الزوار سيرون المحتوى بسرعة أكبر.

كيفية اختبار طلبات HTTP الخاصة بموقعك على الويب

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

للقيام بذلك ، يمكنك استخدام أداة تحليلات الأداء مثل GTmetrix. ابدأ بإدخال عنوان URL لموقع الويب الخاص بك واضغط على Test your site :

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

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

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

كما ترى في الرسم البياني أعلاه ، لكل طلب HTTP حجم مختلف ويستغرق وقتًا مختلفًا للتحميل.

إذا كنت تريد أكبر عائد لجهودك ، فحاول التركيز على التخلص من أكبر وأبطأ طلبات HTTP.

يجب عليك أيضًا التركيز على إزالة طلبات HTTP التابعة لجهات خارجية ( الموارد التي يقوم موقعك بتحميلها من خادم شخص آخر ، مثل البرامج النصية لبرنامج Google Analytics ). تتطلب طلبات الجهات الخارجية عمليات بحث إضافية عن DNS ولها عيوب أخرى في الأداء.

كيفية إنشاء عدد أقل من طلبات HTTP في WordPress وتسريع موقعك (11 نصيحة)

بمجرد اختبار موقع الويب الخاص بك ، حان الوقت لتقليل طلبات HTTP الخاصة به.

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

1. احذف المكونات الإضافية غير الضرورية
2. تأجيل عرض JAVASCRIPT و / أو تأخير تنفيذ JAVASCRIPT
3. نصوص ذات تحميل مشروط
4. التقليل من طلبات الطرف الثالث
5. تحسين صورك
6. تنفيذ تحميل كسول
7. استخدم نظام FONT STACK
8. اجمع بين CSS و JAVASCRIPT
9. استخدم رموز CSS لتجميع الصور
10. تصغير رمز الموقع الخاص بك
11. تعطيل الرموز التعبيرية

1. حذف الإضافات غير الضرورية

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

لتحليل طلبات المكون الإضافي ، ابحث عن "المكونات الإضافية" في تقرير GTmetrix Waterfall. سيعرض هذا فقط طلبات HTTP التي تنشأ من مجلد wp-content / plugins الخاص بك:

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

2. تأجيل حظر عرض JavaScript و / أو تأخير تنفيذ JavaScript

إذا كنت ترغب في إنشاء عدد أقل من طلبات HTTP وتحسين طلبات HTTP ، فإن التركيز على JavaScript يعد أسلوبًا رائعًا آخر.

هناك طريقتان رئيسيتان لتحسين كيفية تحميل JavaScript لموقعك:

1. تأجيل حظر عرض JavaScript
2. تأخير تنفيذ JavaScript

تأجيل حظر عرض JavaScript

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

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

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

لتنفيذ ذلك ، يمكنك استخدام مكون إضافي خاص بميزة مثل البرنامج الإضافي Async JavaScript الإضافي المجاني.

أو ، تقدم العديد من المكونات الإضافية للأداء العام / التخزين المؤقت هذه الميزة أيضًا ، بما في ذلك WP Rocket و FlyingPress.

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

لتنفيذ سمة defer ، ستحتاج ببساطة إلى فتح ملف function.php والعثور على علامة <script> للمورد. هنا ، أدخل سمة مؤجلة:

 <script src="resource.js" defer></script>

إليك ما تبدو عليه السمة غير المتزامنة:

 <script src="resource.js" async></script>

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

تأخير تنفيذ JavaScript

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

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

من خلال نقل طلبات HTTP هذه إلى وقت لاحق من الزيارة ، يمكنك تقديم طلبات HTTP أقل للتحميل الأولي وتسريع المقاييس التي تركز على تجربة المستخدم بشكل كبير مثل Largest Contentful Paint.

لإعداد هذا ، يمكنك استخدام أحد مكونات الأداء الإضافية التالية:

• صاروخ الفسفور الابيض
• فلاينج برس
• Perfmatters

إليك ما يبدو عليه في FlyingPress - يمكنك إما تأخير جميع البرامج النصية الخاصة بك باستثناء البرامج النصية المحددة أو تأخير البرامج النصية المحددة فقط :

3. تحميل البرامج النصية بشكل مشروط

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

لتحميل الإضافات بشكل مشروط ، فكر في تثبيت أداة مثل Perfmatters. يأتي مع مدير نصوص مدمج لتعطيل المكونات الإضافية أو البرامج النصية الفردية على صفحات أو منشورات معينة:

للحصول على خيار مجاني ، يمكنك أيضًا التفكير في المكون الإضافي Asset CleanUp.

قم بتحميل الإضافات الخاصة بك بشكل مشروط ثم قم بتشغيل موقع الويب الخاص بك من خلال GTmetrix مرة أخرى. إذا كنت لا تزال تلاحظ زيادة في طلبات HTTP ، فقد حان الوقت للمتابعة إلى الطريقة التالية.

4. تقليل طلبات الطرف الثالث

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

فيما يلي بعض الأمثلة على البرامج النصية لجهات خارجية:

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

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

بالنسبة لخدمات مثل Google Analytics و Google Fonts ، يمكنك أيضًا التفكير في استضافتها محليًا باستخدام مكونات إضافية مثل هذه:

• OMGF - استضافة Google Fonts محليًا.
• CAOS - استضافة Google Analytics محليًا.

5. تحسين الصور الخاصة بك

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

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

يعد Optimole أحد أفضل برامج تحسين الصور. يقدم هذا المكون الإضافي Freemium مجموعة شاملة من ميزات تحسين الصورة بما في ذلك:

• تقديم الصور التكيفية التي تم تحسينها لتناسب جهاز كل مستخدم.
• ضغط الصور.
• تغيير حجم الصور.
• تحويل الصور إلى الصيغ المثلى.
• خدمة الصور عبر شبكة توصيل المحتوى المضمنة (CDN).

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

6. تنفيذ التحميل البطيء

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

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

أضاف WordPress 5.5 تحميلًا كسولًا مدمجًا للصور باستخدام التحميل البطيء للمتصفح الأصلي.

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

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

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

يمكنك أيضًا ضبط سلوك التحميل البطيء من إعدادات البرنامج المساعد.

7. استخدم مجموعة خطوط النظام

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

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

بدلاً من ذلك ، يمكنك التمسك بمكدس خطوط النظام ، والذي يستخدم الخطوط الأصلية من نظام تشغيل الزائر.

تتيح لك بعض السمات ، مثل Neve أو GeneratePress أو Astra ، الرجوع إلى خطوط النظام. ومع ذلك ، يمكنك أيضًا تغيير مجموعة الخطوط باستخدام CSS.

8. اجمع بين CSS و JavaScript

هناك طريقة أخرى لتقديم طلبات HTTP أقل لملفات CSS و JavaScript وهي دمج ملفات CSS و JavaScript منفصلة في ورقة أنماط أو ملف واحد.

باستخدام المكون الإضافي Autoptimize ، ستتمكن من تجميع ملفات الموقع بسهولة في بضع خطوات فقط:

ضمن الإعدادات > التحسين التلقائي ، قم بتمكين المكون الإضافي لتحسين JavaScript و CSS code. بعد ذلك ، حدد المربعات المجاورة لملفات JS المجمعة وملفات CSS المجمعة :

سيؤدي ذلك إلى تجميع CSS في ملف وجافا سكريبت في ملف آخر. بدلاً من إرسال العديد من الطلبات لملفات متعددة ، يتيح Autoptimize لموقعك تقديم طلبات HTTP أقل.

ملاحظة - أثناء الجمع بين CSS و JavaScript هي طريقة مؤكدة لتقليل طلبات HTTP ، فقد لا يكون لها أي تأثير على الأداء في العالم الحقيقي اعتمادًا على مضيف الويب الخاص بك.

إذا كان مضيفك يستخدم HTTP / 2 أو إصدارًا أحدث (وهو ما يفعله معظم المضيفين في الوقت الحاضر) ، فقد يكون من الأفضل بالفعل عدم دمج الملفات لأن HTTP / 2 يدعم تعدد الإرسال (مما يعني أنه يمكنه تنزيل ملفات متعددة من الخادم دون طلبات خادم متعددة).

إذا لم تكن متأكدًا مما إذا كان مضيفك يستخدم HTTP / 2 ، فيمكنك التواصل مع الدعم.

9. استخدم النقوش المتحركة CSS لدمج الصور

على موقع WordPress نموذجي ، كل صورة هي ملف فردي. في حالة وجود صور متعددة على الصفحة ، يرسل المتصفح عدة طلبات HTTP. ومع ذلك ، فإن كائن CSS المتحرك سيجمع هذه الصور في ملف واحد.

أداة CSS Sprites هي برنامج مجاني لإنشاء وتخصيص النقوش المتحركة CSS. للبدء ، أفلت صورك في صندوق التحميل:

بمجرد إنشاء كائن CSS ، قم بإضافته إلى مكتبة وسائط WordPress. بعد ذلك ، يمكنك استخدام كود HTML و CSS الذي تم إنشاؤه لوضع كل صورة على موقع الويب الخاص بك.

10. تصغير كود موقعك

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

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

أسهل طريقة لتقليل رمز موقع WordPress الخاص بك هي باستخدام مكون إضافي مثل المكون الإضافي Autoptimize الذي ذكرناه سابقًا.

تتضمن معظم مكونات التخزين المؤقت في WordPress أيضًا ميزات تصغير التعليمات البرمجية ، بما في ذلك WP Rocket و FlyingPress و WP Fastest Cache والمزيد.

أو ، إذا كنت تستخدم CDN الخاص بـ Cloudflare ، فيمكنك أيضًا جعل Cloudflare يصغر الرمز الخاص بك.

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

11. تعطيل الرموز التعبيرية

بشكل افتراضي ، تضيف الرموز التعبيرية لـ WordPress طلب HTTP إضافيًا إلى موقعك. للتخلص من طلب HTTP آخر ، يمكنك تعطيل WordPress emojis.

لأبسط خيار ، يمكنك فقط تثبيت البرنامج المساعد Disable Emojis خفيف الوزن.

بدلاً من ذلك ، يمكنك إضافة هذا الرمز إلى ملف function.php الخاص بسمة الطفل أو البرنامج المساعد لمدير الكود مثل Code Snippets:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

بعد تنفيذ كل هذه النصائح ، يجب أن يكون لديك موقع به عدد أقل من طلبات HTTP!

قم بإجراء عدد أقل من طلبات HTTP على موقع الويب الخاص بك 🎯

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

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

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

👉 ومع ذلك ، تذكر أن تحسين طلبات HTTP لموقعك ليس سوى جزء واحد من لغز الأداء. ستحتاج أيضًا إلى استضافة WordPress عالية الجودة إذا كنت تريد تحميل موقعك بسرعة - تحقق من أفضل تقرير عن استضافة WordPress لمعرفة أفضل الخيارات.

هل لديك أي أسئلة حول تقليل عدد طلبات HTTP في WordPress؟ اسألنا في قسم التعليقات أدناه!