كيفية جعل طلبات HTTP أقل على WordPress وتسريع موقعك

نشرت: 2021-10-13

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

قلل طلبات HTTP باستخدام WP Rocket

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

ما هي طلبات HTTP؟

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

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

طلبات HTTP بين متصفح الويب والخادم
طلبات HTTP بين متصفح الويب والخادم


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

قد تتساءل ، كم عدد طلبات HTTP التي تمثل "عددًا كبيرًا جدًا" من طلبات HTTP؟ دعنا نتعرف على بعض الشخصيات الرئيسية حتى تعرف مكان وضع موقع WordPress الخاص بك:

  • أداء متميز: الحصول على طلبات HTTP أقل من 25 لكل صفحة
  • أداء سليم: إبقاء طلبات HTTP أقل من 50 لكل صفحة
  • متوسط ​​طلبات HTTP على الويب: 70 طلب HTTP
الطلبات لكل صفحة على الأجهزة المحمولة وسطح المكتب بين عامي 2017 و 2021 - المصدر: HTparchive.org
الطلبات لكل صفحة على الأجهزة المحمولة وسطح المكتب بين عامي 2017 و 2021 - المصدر: HTparchive.org
لتلخيص:

طلبات HTTP ليست كلها سيئة.

يحتاج موقع WordPress الخاص بك إلى تقديم المحتوى والظهور بشكل جيد.

لا تحتاج إلى العديد من طلبات HTTP كما لديك (احتفظ بها أقل من 50 لكل صفحة).

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

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

لماذا يجب عليك تقليل طلبات HTTP

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

إنها مكون رئيسي لعرض المحتوى ، لكن الدردشة بين الخادم والمستخدم تستغرق وقتًا للتحميل. يُطلق على هذه الرحلة ذهابًا وإيابًا اسم وقت الاستجابة ذهابًا وإيابًا (RTT):

RTT: الوقت الذي يستغرقه الخادم للرد على طلب ملف عندما يزور شخص ما موقعك.
RTT: الوقت الذي يستغرقه الخادم للرد على طلب ملف عندما يزور شخص ما موقعك.


سبب آخر لتقديم عدد أقل من طلبات HTTP هو الحفاظ على صحة Core Web Vitals ، خاصةً أكبر محتوى لطلاء المحتوى (LCP) KPI.

يحدد LCP مدى سرعة تحميل أول جزء ذي معنى من المحتوى. الأمر كله يتعلق بإدراك السرعة من قبل المستخدمين.

إليك دليل يجب أن تقرأه: كيفية تحسين درجة LCP الخاصة بك على WordPress.

هناك ثلاثة عوامل تؤثر على درجة LCP لموقعك على WordPress: أوقات استجابة الخادم البطيئة ، وحظر عرض JavaScript و CSS ، وبطء وقت تحميل الموارد. لذلك ، فإن تقليل عدد طلبات HTTP هو المفتاح لصفحات أسرع. كلما قل عدد طلبات HTTP التي يقدمها موقع الويب الخاص بك ، زادت سرعة تحميل المحتوى الأكثر أهمية (LCP) للمستخدم.

لتلخيص:

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

ملفات كبيرة وثقيلة؟ → تحصل على طلبات HTTP أطول

طلبات HTTP الأطول ← زيادة وقت التحميل الفعلي

قلل طلبات HTTP الخاصة بك ← التأثير الإيجابي على LCP الخاص بك

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

يأخذنا هذا إلى السؤال الحاسم التالي: كم عدد طلبات HTTP التي يقوم بها موقع WordPress الخاص بك ؟

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

هناك بعض الأدوات عبر الإنترنت التي تحاكي طلبات HTTP على موقع WordPress الخاص بك ، وهي:

  • GTmetrix ( تحتاج إلى أن يكون لديك حساب مجاني للوصول إلى تفاصيل صفحتك ) - ما عليك سوى وضع عنوان URL لموقعك ، وقم بإجراء التدقيق وافتح علامة التبويب " الملخص". قم بالتمرير لأسفل إلى القسم الأخير المسمى "تفاصيل الصفحة" لمعرفة عدد الطلبات التي تقدمها صفحتك.
البحث عن إجمالي طلبات الصفحة - المصدر: GTmetrix
البحث عن إجمالي طلبات الصفحة - المصدر: GTmetrix


تعد علامة التبويب الشلال طريقة رائعة لمعرفة المدة التي تستغرقها طلبات HTTP الفردية على موقعك:

الطلبات مع أوقات التحميل - المصدر: GTmetrix
الطلبات مع أوقات التحميل - المصدر: GTmetrix


يمكنك أيضًا إلقاء نظرة على طلبات HTTP الواردة من مكون إضافي محدد ، مثل Elementor:

تحديد أثقل الملفات عن طريق البرنامج المساعد - المصدر: GTmetrix
تحديد أثقل الملفات عن طريق البرنامج المساعد - المصدر: GTmetrix
GTmetrix مدعوم بتقنية Lighthouse. إذا كنت تريد معرفة المزيد حول مؤشرات الأداء الرئيسية لـ Lighthouse ، فلدينا برنامج تعليمي مفصل يركز على كيفية تحسين درجة أداء Lighthouse.
  • Pingdom - ما عليك سوى وضع عنوان URL في المربع لمعرفة عدد طلبات HTTP التي تطلبها صفحتك:
طلبات HTTP - المصدر: Pingdom
طلبات HTTP - المصدر: Pingdom
  • مراقبة الاستعلام - أداة تصحيح أخطاء مجانية لتحديد المكونات الإضافية أو البرامج النصية التي تؤدي إلى إبطاء تحميل الصفحة. تعرض لك لوحة مكالمات HTTP API معلومات حول طلبات HTTP التي تم إجراؤها أثناء تحميل الصفحة.
لوحة الإدارة - المصدر: مراقبة الاستعلام
لوحة الإدارة - المصدر: مراقبة الاستعلام

10 طرق لتقديم طلبات HTTP أقل إلى موقع الويب الخاص بك (يدويًا وبواسطة البرنامج المساعد)

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

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

التأثير: مرتفع

طريقة سهلة لتقليل طلبات HTTP تتمثل في الجمع بين عدة ملفات JS و CSS.

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

دمج JS و CSS - المصدر: KeyCDN
دمج JS و CSS - المصدر: KeyCDN

الجمع بين CSS و JS باستخدام أدوات عبر الإنترنت:

  • تصغير - يجمع بين عدة ملفات CSS أو JavaScript.
  • دمج - برنامج نصي PHP مدمج مع إعادة كتابة عنوان URL لربط وضغط ملفات CSS و JavaScript.
  • csscompressor.net (CSS فقط) - ضاغط CSS عبر الإنترنت ، سريع ومجاني للاستخدام.
  • jscompress.com (JS فقط) - تتيح لك أداة ضغط JavaScript هذه دمج ملفات JavaScript في ملف واحد.
  • SmartOptimizer - مكتبة PHP تعمل على تحسين أداء موقع الويب الخاص بك عن طريق تحسين الواجهة الأمامية باستخدام تقنيات التسلسل.
  • CSS-JS-Booster - يربط بين ملفات CSS و JavaScript وتصغيرها و gzips.
  • CSS Crush - يربط ويصغر ملفات CSS.
  • csscompressor.net (CSS فقط) - ضاغط CSS عبر الإنترنت ، سريع ومجاني للاستخدام.
  • jscompress.com (JS فقط) - تتيح لك أداة ضغط JavaScript هذه دمج ملفات JavaScript في ملف واحد.

تحميل ملفات CSS & JS المدمجة الجديدة إلى موقع WordPress الخاص بك:

هدفنا هو وضع كل الطلبات المنفصلة معًا في ملف واحد.

  • ما عليك سوى نسخ / لصق كل كود CSS الخاص بك في ملف رئيسي واحد وإعادة تحميل الملف إلى الخادم (قم بذلك فقط إذا كنت مرتاحًا لملفات WordPress الخاصة بك)
  • إذا كنت تستخدم لوحة C:
    • قم بتسجيل الدخول إلى cPanel الخاص بك
    • انتقل إلى "مدير الملفات" الخاص بك
    • انقر فوق المجلد الذي يحتوي على موقع WordPress الخاص بك
    • قم بإنشاء مجلد في الدليل الجذر الخاص بك باستخدام الملف المدمج الجديد

الجمع بين ملفات CSS و JS باستخدام مكون إضافي (الطريقة الأسرع والأكثر أمانًا):

  • WP Rocket: يجمع الملفات المصغرة في ملف واحد لكل نوع ملف (CSS أو JavaScript)
اجمع ملفات CSS - WP Rocket
اجمع ملفات CSS - WP Rocket
اجمع ملفات JS - WP Rocket
اجمع ملفات JS - WP Rocket
  • تحسين تلقائي: يساعدك في تسلسل البرامج النصية الخاصة بك (CSS أو JavaScript).

2. دمج الصور مع CSS Sprites

التأثير: مرتفع

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

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

يمكنك معرفة المزيد في مقالتنا المخصصة حول الجمع بين الصور باستخدام رموز CSS في WordPress.

الصور المرشحة الجيدة باللون الأحمر - المصدر: صفحة Yahoo الرئيسية
الصورة الجيدة المرشحة باللون الأحمر - المصدر: صفحة ياهو الرئيسية

دمج الصور مع CSS sprites باستخدام الأدوات المستندة إلى الويب:

  • CSS Sprite Generator ، Editor ، و Code
  • CSSspritestool
    • انتقل إلى موقع CSSspritestool لدمج صور متعددة في صورة واحدة باستخدام أداة إنشاء السحب والإفلات.
    • تحصل على ملف صورة مدمج ، جنبًا إلى جنب مع بعض أكواد CSS لكل صورة تقوم بتحميلها.
    • قم بتحميل ملف الصورة المدمج إلى موقع WordPress الخاص بك
    • أضف كود CSS إلى موقع WordPress الخاص بك باستخدام Customizer
    • اعرض كل صورة في المكان الذي تريده باستخدام HTML

3. تحسين الصور (وحذف العناصر غير المهمة)

التأثير: مرتفع

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

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

فيما يلي بعض أدوات تغيير الحجم التي يمكنك استخدامها:

  • محل تصوير
  • GIMP - مجاني ، Windows و Mac
  • IrfanView - مجاني لنظام التشغيل Windows
  • معاينة لنظام التشغيل Mac - مثبتة بالفعل!

لتحسين صورك تلقائيًا ، نوصيك باستخدام مكون WordPress الإضافي:

  • تخيل - بواسطة WP Media ، نفس الشركة التي تقف وراء WP Rocket. يمكنك تحسين ما يصل إلى 20 ميغابايت من الصور مجانًا شهريًا.
  • Optimole (تحسين الصورة والتحميل البطيء بواسطة Optimole)

اقرأ مقالنا المخصص لاكتشاف المزيد من المكونات الإضافية لتحسين الصور.

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

4. قم بتمكين التحميل الكسول على الصور

التأثير: مرتفع

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

تنفيذ برنامج التحميل البطيء يدويًا:

أولاً ، تحتاج إلى تحديد كيفية تحميل صورك: هل تستخدم علامة <img> أم CSS؟ يشرح Web.Dev جيدًا كيفية تنفيذ برنامج التحميل البطيء لكلتا الطريقتين. تحتاج أيضًا إلى التحقق مما إذا كان العنصر موجودًا في منفذ العرض باستخدام واجهة برمجة تطبيقات Intersection Observer.

هذه هي الطريقة التي يمكن أن يبدو بها التحميل البطيء على صورة وعلى إطار iframe على التوالي:

<img src = ”image.jpg” alt = ”…” loading = ”كسول”> <iframe src = ”video-player.html” title = ”…” loading = ”lazy”> </iframe>

استخدام البرنامج المساعد lazy load لتطبيق البرنامج النصي تلقائيًا:

  • Lazy Load by WP Rocket (مجاني) - يعرض المحتوى فقط عندما يكون مرئيًا للمستخدم.
  • WP Rocket - يأتي مع ميزات التحميل البطيء. إنه مكون إضافي ممتاز يأتي مع العديد من المزايا الأخرى مثل التخزين المؤقت وتنظيف الكود الخاص بك وما إلى ذلك)
  • إذا كنت تبحث عن المزيد من الإضافات ذات التحميل البطيء ، فقم بإلقاء نظرة على مقالتنا.

5. تصغير HTML و CSS و JavaScript

التأثير: متوسط

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

مثال على JS غير المصغرة مثال مصغر JS

تصغير الكود يدويًا :

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

  • تصغير HTML: افتح ورقة التعليمات البرمجية وأزل التعليقات (<! - ... ->) والمسافات الزائدة وفواصل الأسطر والمحتوى المشابه
  • تصغير CSS: إزالة المسافات الزائدة والتعليقات من ملفات CSS (/ * ... * /) تقصير المعرف أو الفئة أو أسماء المتغيرات قدر الإمكان
  • تصغير JS: قم بإزالة تعليقات JS (//) والمسافات الزائدة من شفرة المصدر. حوّل المصفوفات إلى كائنات كلما أمكن ذلك ، وحسّن عباراتك الشرطية ، واعثر على إجابات للتعبيرات الثابتة الأساسية.

تصغير الكود الخاص بك باستخدام أداة عبر الإنترنت :

  • استخدم محرر كود مثل Sublime text لتحرير الملف
  • الصق الكود الخاص بك في إحدى تلك الأدوات عبر الإنترنت: Closure Compiler و CSS nano و JS nano و UNCSS. (لدينا قائمة كاملة بأكواد التصغير المجانية لكي تسحبها).
  • استبدل الرمز القديم الخاص بك بالرمز المصغر الجديد وقم بتحميله مرة أخرى إلى موقعك

باستخدام مكون WordPress الإضافي لتقليل التعليمات البرمجية الخاصة بك :

  • WP Rocket - قم بتصغير CSS و JS تلقائيًا. كل ما عليك القيام به هو تحديد مربعين. يحتوي WP Rocket على قسم مخصص لتحسين الملفات.
تصغير ملفات CSS - WP Rocket
تصغير ملفات CSS - WP Rocket
تصغير ملفات JS - WP Rocket
تصغير ملفات JS - WP Rocket

6. استبدال الإضافات الثقيلة بأخرى خفيفة الوزن

التأثير: متوسط

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

كيف تحدد الإضافات البطيئة لموقع WordPress الخاص بك؟

لنفترض أنك متردد بين مكونين إضافيين لنماذج الاتصال (أ و ب). استخدم خطواتنا الخمس لإجراء تشخيصك:

  1. قم بإجراء اختبار أداء باستخدام Pingdom للتحقق من عدد طلبات HTTP - قم بتدوين درجاتك
  2. قم بتنشيط المكون الإضافي (أ) وقم بإجراء الاختبار مرة أخرى - اكتب درجاتك
  3. قم بإلغاء تنشيط المكون الإضافي A وتثبيت المكون الإضافي B لإجراء نفس المراجعة
  4. قارن عدد طلبات HTTP التي تمت إضافتها لكل مكون إضافي
  5. اختر واحدًا يحتوي على عدد أقل من طلبات HTTP واحذف الطلب البطيء!

استخدام مكون إضافي لتحديد المكونات الإضافية التي تعمل على إبطاء موقعك مع عدد كبير جدًا من طلبات HTTP:

  • يمكن استخدام المكون الإضافي Query Monitor لتحديد المكونات الإضافية التي تضر بموقعك ومساعدتك في إزالتها
تحديد المكونات الإضافية البطيئة باستخدام البرنامج المساعد Query Monitor - المصدر: Onlinemediamaster

7. تحميل البرامج النصية فقط عند الحاجة (وعلى صفحات معينة فقط)

التأثير: متوسط

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

استخدم مكون WordPress الإضافي لتحميل البرنامج النصي فقط عند الحاجة:

  • Perfmatters - يسمح لك بتعطيل برنامج نصي على صفحة أو منشور.
اختر مكان عدم تنفيذ البرنامج النصي باستخدام أداة مدير البرنامج النصي - المصدر: عرض شامل لـ Perfmatters
اختر مكان عدم تنفيذ البرنامج النصي باستخدام أداة مدير البرنامج النصي - المصدر: عرض شامل لـ Perfmatters
  • Asset Cleanup Pro - وهو أقل سهولة في الاستخدام ولكنه يؤدي المهمة أيضًا.
برنامج Asset Cleanup Pro
برنامج Asset Cleanup Pro

8. تقليل البرامج النصية الخارجية / طلبات HTTP

التأثير: متوسط

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

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

تأتي البرامج النصية الخارجية بشكل أساسي من علامات Google Analytics و Facebook Pixels ومقاطع فيديو YouTube وأزرار المشاركة الاجتماعية وعلامات اختبار A / B. يوصى بشدة بتحديد جميع الملفات التي تضيف الطلبات.

استخدام الأدوات لتحديد أثقل البرامج النصية الخارجية:

  • يمكن أن تساعدك أدوات الأداء مثل Chrome DevTools و PageSpeed ​​Insights و WebPageTest في التعرف عليها.
تحديد البرامج النصية الخارجية التي تبطئ موقعي - المصدر: Chrome DevTools
تحديد البرامج النصية الخارجية التي تبطئ موقعي - المصدر: Chrome DevTools

تحسين طلبات الجهات الخارجية يدويًا :

الآن بعد أن حددت البرامج النصية الخارجية التي تؤثر على الأداء ، يمكنك استخدام السمة غير المتزامن أو التأجيل عليها:

< برنامج نصي غير متزامن src = “script.js”> < تأجيل البرنامج النصي src = “script.js”>

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

استخدام مكون إضافي لتقليل تأثير البرامج النصية الخارجية على الأداء:

  • تساعدك WP Rocket على تقليل تأثير تعليمات الطرف الثالث بعدة طرق:
    • استضافة ملفات وعلامات Google Analytics محليًا.
    • الجلب المسبق لطلبات DNS ، مما يعني أن الملفات الخارجية سيتم تحميلها بشكل أسرع.
    • تحميل الخطوط مسبقًا لمساعدة المتصفحات على اكتشاف خطوط Google بشكل أسرع في ملفات CSS.
الجلب المسبق لخطوط DNS والتحميل المسبق - المصدر: WP Rocket
الجلب المسبق لخطوط DNS والتحميل المسبق - المصدر: WP Rocket
  • تأجيل JS التابع لجهة خارجية مثل الإعلانات والتحليلات ، ما عليك سوى إخبار متصفحك بما يجب عليه تحميله أولاً.

بالنسبة للقصة ، أجلت Telegraph مؤخرًا جميع نصوصها وحسنت وقت شحن الإعلان بمعدل أربع ثوانٍ.

9. استخدم CDN

التأثير: متوسط

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

أفضل شبكات CDN المتوفرة في السوق:

  • صاروخ CDN
  • Cloudflare CDN

لقد كتبنا أيضًا دليلًا لمساعدتك في اختيار CDN المناسب لك.

10. تأجيل تجسيد جافا سكريبت و CSS

التأثير: متوسط

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

إزالة موارد حظر العرض يدويًا :

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

قسم الفرص - المصدر: PSI
قسم الفرص - المصدر: PSI


للتخلص من هذه المشكلة يدويًا ، تحتاج إلى استخدام سمات التأجيل وغير المتزامن.

فيما يلي مثال على سمة التأجيل لتأجيل JS:

<script defer src = ”/ example-js-script”> </script>

اتبع برنامجنا التعليمي التفصيلي الذي يشرح كيفية التخلص من موارد حظر العرض باستخدام كلا البرنامجين يدويًا.

إذا كنت تريد شيئًا أكثر وضوحًا ، فما عليك سوى استخدام مكون WordPress الإضافي.

استخدام مكون WordPress الإضافي لتأجيل JS و CSS :

  • WP Rocket - الذي يساعدك في تأجيل ملفات JS بأبسط طريقة.   يوفر المكون الإضافي أيضًا ميزة "تحسين تسليم CSS" التي تشكل موارد حظر العرض. يمكنك أيضًا استبعاد أي ملف JS أو CSS من التأجيل إذا كنت بحاجة إليه.
تم تأجيل تحميل JS - WP Rocket
تم تأجيل تحميل JS لإزالة موارد العرض blockinbg - WP Rocket
تحسين تسليم CSS - WP Rocket
تحسين تسليم CSS للتخلص من موارد العرض blockinbg - WP Rocket
يعد إصلاح طلبات HTTP بداية ممتازة لتسريع موقع WordPress الخاص بك.

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

كيفية تقليل طلبات HTTP باستخدام البرنامج المساعد

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

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

سنستخدم GTmetrix لقياس مؤشرات الأداء الرئيسية التالية:

  • درجة الأداء العام (من أ إلى و)
  • نتائج Core Web Vitals (LCP و CLS و FID) + TTI و TBT (ملاحظة: إذا لم يكن FID متاحًا ، فسنقوم بقياس FCP)
  • عدد طلبات HTTP (إجمالي طلبات الصفحة)

فيما يتعلق بالمحتوى ، يحتوي موقع WordPress الخاص بي على بعض النصوص وبعض رموز الوسائط الاجتماعية و 8 صور وفيديو مضمن من YouTube وخريطة مع دبوس (من خرائط Google) و 3 شهادات من العملاء بصورهم.

موقع الاختبار

السيناريو 1 - قياس الأداء وطلبات HTTP - لا يوجد صاروخ WP

دعنا نلقي نظرة على نتائج الأداء باستخدام GTmetrix. إنها ليست مشجعة للغاية ، وحصلت على "E" عن درجة أدائي الإجمالي:

تقرير عام من الدرجة E (بدون صاروخ WP) - GTmetrix
تقرير عام من الدرجة E (بدون صاروخ WP) - GTmetrix


نلاحظ أن صفحتي تقدم 140 طلب HTTP وأن 42.9٪ منها يرجع إلى JS. يستغرق تحميل صفحتي بالكامل 10.2 ثانية ، ويبلغ حجم الصفحة 5.11 ميغابايت.

تفاصيل الصفحة (حجم الصفحة وطلبات HTTP) - المصدر: GTmetrix
تفاصيل الصفحة (حجم الصفحة وطلبات HTTP) - المصدر: GTmetrix
مؤشرات الأداء الرئيسية النتيجة (لا يوجد WP Rocket)
GTmetrix الدرجة الشاملة ه
أداء 55٪
أكبر طلاء محتوى (LCP) 2.7 ثانية
أول رسم مضمون (FCP) 2.4 ثانية
التحول في التخطيط التراكمي (CLS) 0.53 مللي ثانية
وقت التفاعل (TTI) 3.6 ثانية
إجمالي وقت الحظر (TBT) 51 مللي ثانية
الوقت إلى أول بايت (TTFB) 806 مللي ثانية
وقت التحميل بالكامل 10.2 ثانية
مقاس الصفحه 5.11 م
إجمالي طلبات الصفحة 140 (الدرجة الأفضل في فئتها: <50 )

التوصيات الرئيسية من GTmetrix هي كما يلي:

  • تحميل JS التابع لجهة خارجية بكفاءة (تأجيل JS ، وإنشاء اتصالات مبكرة بالأصول المطلوبة وتطبيق الحمل البطيء على موارد الطرف الثالث المضمنة)
  • تخلص من موارد حظر العرض (ضع في اعتبارك تقديم CSS و JS الهامة مضمنة وتأجيل جميع أنماط JS / الأنماط غير الهامة. تعرف على المزيد حول ماهية CSS الهامة في مقالتنا)
  • تحسين الكود الخاص بي (قم بدمج وتقليل JS و CSS / تحسين تسليم CSS)
  • تنفيذ التخزين المؤقت للصفحة
المشكلات التي تم وضع علامة عليها بواسطة GTmetrix أثناء تدقيق موقعي
المشكلات التي تم وضع علامة عليها بواسطة GTmetrix أثناء تدقيق موقعي


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

السيناريو 2 - قياس الأداء وطلبات HTTP - باستخدام WP Rocket

الآن بعد أن تم تنشيط WP Rocket ، فلنقم بإجراء تدقيق أداء آخر باستخدام نفس الصفحة.

هذه المرة ، كانت النتائج مشجعة للغاية ، وانتقلنا من "E" إلى "A" فيما يتعلق بدرجة أدائي الإجمالي:

نتيجتي الجديدة "A" بفضل WP Rocket - المصدر: GTmetrix
نتيجتي الجديدة "A" بفضل WP Rocket - المصدر: GTmetrix


تقدم رائع آخر هو عدد طلبات HTTP الخاصة بي التي انخفضت من 140 إلى 18 عند تنشيط WP Rocket (-87٪).

عدد طلبات HTTP مع WP Rocket - المصدر: GTmetrix
عدد طلبات HTTP مع WP Rocket - المصدر: GTmetrix


على الصعيد العالمي ، جميع مؤشرات الأداء الرئيسية لدي أفضل ، وموقع الويب الخاص بي أسرع بكثير عند استخدام WP Rocket:

مؤشرات الأداء الرئيسية النتيجة - لا يوجد صاروخ WP يسجل مع WP Rocket
GTmetrix الدرجة الشاملة ه أ
أداء 55٪ 91٪
أكبر طلاء محتوى (LCP) 2.7 ثانية 1.5 ثانية
أول رسم مضمون (FCP) 2.4 ثانية 542 مللي ثانية
التحول في التخطيط التراكمي (CLS) 0.53 مللي ثانية 0.37 مللي ثانية
وقت التفاعل (TTI) 3.6 ثانية 1 ثانية
إجمالي وقت الحظر (TBT) 51 مللي ثانية 20 مللي ثانية
الوقت إلى أول بايت (TTFB) 806 مللي ثانية 487 مللي ثانية
وقت التحميل بالكامل 10.2 ثانية 2.3 ثانية
مقاس الصفحه 5.11 م 604 كيلو بايت
إجمالي طلبات الصفحة 140 (الدرجة الأفضل في فئتها: <50 ) 18 ( الدرجة الأفضل في فئتها: <50)

لقد تحسن أداؤنا عالميًا مع تنشيط المكون الإضافي WP Rocket لذاكرة التخزين المؤقت.

طبق WP Rocket تلقائيًا جميع التقنيات المدرجة في قسم "كيفية إنشاء عدد أقل من طلبات HTTP إلى موقع الويب الخاص بك".

من لوحة معلومات WP Rocket ، يمكنك أن ترى أن كود CSS الخاص بي قد تم تصغيره ودمجه وتحسينه:

تحسين CSS - المصدر: WP Rocket dashboard
تحسين CSS - المصدر: WP Rocket dashboard


تم تطبيق نفس التحسين تلقائيًا على JS الخاص بي:

تحسين JS - المصدر: WP Rocket dashboard
تحسين JS - المصدر: WP Rocket dashboard

تغليف

ساعد WP Rocket في تقليل طلبات HTTP لموقع WordPress الخاص بي بنسبة 87٪ . في دراسة الحالة الخاصة بنا ، رأينا أن طلباتنا انتقلت من 140 إلى 18 بمجرد تنشيط المكون الإضافي. أنت توفر الوقت والجهد!

بدون صاروخ الفسفور الابيض مع صاروخ الفسفور الابيض
140 طلبات HTTP 18 طلبات HTTP (-87٪)

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

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