عالم التكنولوجيا

كيفية تقليل طلبات HTTP / S في WordPress

إليك قصة ستحبها إذا كنت تريد تسريع موقع WordPress الخاص بك .

في ذلك اليوم أنشأت موقعًا لامعًا. لقد بذلت قصارى جهدي وأضفت WooCommerce و Google Tag Manager و OneSignal ومكتب المساعدة و Yoast والراديو المباشر (أوه نعم فعلت) و Cookie Notice والوسائط الاجتماعية ومجموعة من المكونات الإضافية الأخرى.

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

لقد رأيت هذا مما أثار فزعي:

هل أعجبت؟ الجحيم ل NAW! كنت أرغب في الحصول على درجة ممتازة وتقليل وقت تحميل الصفحة إلى أقل من ثانيتين.

لذلك ، قمت بالضغط على زر إعادة الاختبار ، لكن خمن ماذا؟ لا تزال نفس النتيجة المقززة.

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

هل تعلم ماذا فعلت بعد ذلك؟ لقد اختبرت موقع الويب على Pingdom لأن GTMetrix يمكنه امتصاصه. لكن فيما يلي النتائج الكئيبة مرة أخرى:

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

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

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

لكن التصميم المرئي الرائع والسرعات البطيئة لا يسيران جنبًا إلى جنب. كنت بحاجة لحل وبسرعة.

كيف يمكنني تقليل طلبات HTTP على موقع WordPress الخاص بي؟

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

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

إذا كان موقع WordPress الخاص بك يتطلب تحميل الكثير من العناصر ، فسيكون لديك المزيد من طلبات HTTP والعكس صحيح.

تعني المزيد من طلبات HTTP موقع ويب بطيئًا وتجربة مستخدم سيئة (UX) ونتائج سيئة لتحسين محركات البحث ومعدلات تحويل منخفضة.

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

وفي منشور اليوم ، تتعلم بالضبط كيف!

عادة ما تظهر لك التقارير الواردة من GTMetrix و Pingdom أين تكمن المشكلة.

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

الخطوة 1: تخلص من الفوضى

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

بذلك ، أعني التخلص من جميع المكونات الإضافية التي لا تحتاجها.

تأتي مكونات WordPress الإضافية مع الكثير من الملفات ، سواء كانت PHP أو CSS أو JavaScript (JS).

كل ملف يقوم بتشغيله كل مكون إضافي سيُنشئ طلب HTTP.

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

ماذا أفعل؟

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

لتقليل طلبات HTTP ، قم بإلغاء تثبيت جميع المكونات الإضافية التي لا تحتاج إليها.

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

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

يمكنك الذهاب إلى الميل الإضافي وتحميل المكونات الإضافية بشكل انتقائي.

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

سيكون ذلك رائعا ، ألا توافق؟ وتعتقد أنك تحتاج فقط إلى البرنامج الإضافي Asset CleanUp WordPress .

معلومات وتحميل

البرنامج المساعد سهل الاستخدام وفعال للغاية. أو كما يقول المطور:

يقوم “Asset CleanUp” بمسح صفحتك واكتشاف جميع الأصول التي تم تحميلها.

كل ما عليك فعله عند تحرير صفحة / منشور هو تحديد CSS / JS غير الضرورية للتحميل ، وبهذه الطريقة تقلل من الانتفاخ.

تنظيف التثبيت الخاص بك بالفعل hombre ؛ تخلص من الرسائل غير المرغوب فيها – تتضمن التعليقات غير المرغوب فيها. 

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

دعنا نعود إلى تقليل طلبات HTTP.

الخطوة 2: تحسين الصور

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

ومع ذلك ، لا يمكننا تجاهل حقيقة أن معظم سمات WordPress (مواقع القراءة) تعتمد على الصور والعديد من الصور لهذه المسألة. لذا ، في ضوء ذلك ، كيف يمكنك تقليل طلبات HTTP عن طريق تحسين صورك؟

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

معلومات وتحميل

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

 بالإضافة إلى أنه يمكنك الحصول على 100 صورة مجانًا – لذا يمكنك على الأقل تجربتها.

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

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

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

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

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

نصيحة للمحترفين : يمكنك نسيان كل ما يتعلق بصور CSS إذا كان موقع الويب الخاص بك يستخدم HTTP / 2 الذي يدعم التحميل غير المتزامن للصور والنصوص. لا تأخذ GTMetrix في الاعتبار HTTP / 2 عند تسجيل الأداء ، لذلك لا تقلق إذا بدا أن صورك تنشئ عددًا كبيرًا من طلبات HTTP.

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

بعد كل شيء ، يتطلب ملف صورة واحد طلب HTTP واحدًا. تحتاج عشر صور منفصلة إلى 10 طلبات HTTP وما إلى ذلك. أعلم أنك حصلت على الانجراف.

الخطوة 3: دمج وتصغير HTML و CSS و JavaScript

كان السبب الرئيسي للعديد من طلبات HTTP على موقع WordPress الخاص بي هو ملفات CSS و JavaScript الخارجية. نعم ، كنت أتعامل مع 43 نصًا من نصوص JS و 22 ملفًا من ملفات CSS. هذا ضخم 66 طلب HTTP.

من بين حوالي 130 طلب HTTP ، شكلت طلبات CSS و JavaScript الخارجية حوالي 51٪ من المشكلة ! هذا مجرد سخيف. شكرًا ، GTMetrix ، اصطدم بقبضتي.

إذا قمت بدمج هذه الملفات الـ 44 JS و 22 CSS وتقليلها ، فيمكنني تقليل طلبات HTTP الخاصة بي بشكل كبير ، وحجم موقع الويب ، والوقت الذي يستغرقه التحميل. ولكن ما هو هذا العمل “الدمج” و “التصغير”؟

وفقًا لـ Raelene Morey of Words by Birds (أنا معجب كبير 🙂) ، فإن التصغير هو عملية “… إزالة أي أحرف غير ضرورية ، مثل التعليقات والتنسيق والمسافة البيضاء والأسطر الجديدة من ملفات HTML و CSS و JavaScript الموجودة” ر ضروري لتنفيذ الكود “.

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

مرة أخرى ، يقول رائلين:

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

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

هل توجد مكونات إضافية؟ نعم بالطبع!

معلومات وتحميل

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

خيار آخر شائع (  ومجاني ) هو المكون الإضافي Autoptimize .

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

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

الخطوة 4: ضبط ملفات CSS و JavaScript التي تحظر العرض

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

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

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

كيف؟ انقل جميع النصوص البرمجية التي تمنع العرض من أعلى صفحة الويب إلى أسفلها. لكن كن حذرًا هنا ؛ لست بحاجة إلى نقل جميع البرامج النصية إلى الأسفل. أقول هذا لأن صفحتك قد تحتاج إلى CSS و JS لتقديم تجربة تفاعلية شاملة.

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

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

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

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

بالمناسبة ، قد يؤدي إصلاح CSS & JS لحظر العرض إلى الكشف عن الملفات والنصوص البرمجية التي لا تحتاجها لإنشاء صفحة ويب.

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

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

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

هل هناك خيارات مجانية؟ بالتاكيد! نحن نعمل مع WordPress ، تذكر؟ يمكنك استخدام Async JavaScript ، من بين المكونات الإضافية الأخرى.

الخطوة 5: استخدم Caching & CDN

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

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

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

شبكة CDN (أو C ontent D elivery  N etwork  ) هي شبكة من الخوادم الموجودة حول العالم. يستخدم CDN التخزين المؤقت أيضًا ، ولكن للحصول على سرعات أعلى ، يقدم مزود CDN  المحتوى المخزن مؤقتًا من خادم أقرب إلى الزائر.

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

معلومات وتحميل

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

المكافأة: تأكد من دعم HTTP / 2

ربما تفعل كل شيء لتقليل طلبات HTTP ، لكن مضيف الويب الخاص بك قد يكون سبب مشاكلك. لا تتفاجأ. يسأل ويفكر ، من – في هذا الوقت وهذا العصر – يستخدم أي شيء سوى HTTP / 2؟

ربما لا تعرف حتى ما هو HTTP / 2 . حسنًا ، بالنسبة للمبتدئين ، يدعم HTTP / 2 التحميل غير المتزامن للملفات ، من بين أشياء أخرى. له فوائد أخرى على HTTP 1.0 ، ولكن هذا درس ليوم آخر.

إذا كنت تستخدم HTTP 1.0 أو أقل ، فستلاحظ عددًا كبيرًا من طلبات HTTP.

لا تسرع في الحكم. لقد رأيت موفري استضافة الويب الذين ما زالوا يستخدمون HTTP 1.0 والإصدارات الأقدم من PHP. نعم ، حتى مع الفوائد الواضحة لـ HTTP / 2 و PHP 7. أنا لست مخادعًا ؛ يأتي بعض عملائهم إلي عندما لا تعمل بعض المكونات الإضافية الخاصة بهم ، وهذا أمر مزعج!

لكن لماذا حقا؟ حقيقة أن بعض مزودي خدمات استضافة الويب لا ينزعجون من حقيقة أن PHP 5.6 مهمل ولديه ثغرات أمنية هي مجرد شيء آخر. وإذا كانوا لا يدعمون HTTP / 2 ، فهذه صفقة رابحة لك حقًا.

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

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى
error: Content is protected !!