تحسين سرعة الموقع: قم بإزالة JS & CSS التي تحظر العرض

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

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

ما المقصود بحظر جافا سكريبت و CSS؟

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

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

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

لماذا يُعد حظر تجسيد JavaScript و CSS أمرًا سيئًا لصفحات الويب؟

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

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

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

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

كيفية التخلص من JavaScript و CSS يحظران العرض

قبل أن تتمكن من التخلص من البرامج النصية التي تمنع العرض ، ستحتاج إلى تحديد البرامج النصية التي تسبب المشاكل. للقيام بذلك ، نوصي باستخدام PageSpeed ​​Insights من Google. ما عليك سوى إدخال عنوان URL الخاص بك ، وسوف يخبرك Google بالضبط بالبرامج النصية التي تؤدي إلى إبطاء أداء صفحتك:

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

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

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

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

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

الإضافات لتقليل حظر تجسيد JavaScript و CSS

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

1. صاروخ الفسفور الابيض

تساعد WP Rocket في تحسين الموقع من خلال مهام مثل تصغير CSS و JavaScript ، وتحميل الصور البطيئة ، وتأجيل طلبات JavaScript عن بُعد ، والمزيد. إنها "سكين الجيش السويسري" من المكونات الإضافية للتحسين.

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

هناك بعض الإضافات المجانية التي يمكنك الحصول عليها لـ WP Rocket في دليل WordPress Plugin. ومع ذلك ، فإن سعر المكون الإضافي الأساسي نفسه يبلغ 49 دولارًا سنويًا لموقع ويب واحد وسنة واحدة من الدعم ، مع مستويات إضافية توفر المزيد من الخيارات.

2. التحسين التلقائي

تم تصميم Autoptimize خصيصًا لمعالجة المشكلات التي تثيرها أدوات التوصية مثل PageSpeed ​​Insights. سيتم تضمين جميع الإعدادات التي تمكنك من تكوين المكون الإضافي لموقع الويب الخاص بك في قائمة جديدة في لوحة معلومات WordPress الخاصة بك.

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

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

3. JCH الأمثل

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

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

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

4. حزمة سرعة الداعم

تقدم Speed ​​Booster Pack تحسين CSS و JavaScript ، والتحميل البطيء ، وميزة إزالة الفوضى. يحافظ المطورون في Optimocha على المكون الإضافي محدثًا بقاعدة كود متطورة باستمرار ، حتى تعرف أنك ستستخدم دائمًا أحدث الطرق. هناك أيضًا ميزة تحسين WooCommerce مضمنة تعمل على حل الاختناقات.

تتمثل إحدى مزايا استخدام حزمة Speed ​​Booster Pack في أنها تحتوي على ميزة تكامل شبكة توصيل المحتوى (CDN). هذا يجعل من السهل استخدام CDN الذي تختاره في WordPress ، مع التحسين أيضًا باستخدام المكون الإضافي. يكمن الجانب السلبي لهذا المكون الإضافي في عملية التجربة والخطأ التي قد تحتاج إلى اتباعها لتهيئتها بشكل صحيح.

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

قم بتحسين سرعة موقعك باستخدام WP Engine

مهما كان أسلوبك في تحسين سرعة موقعك ، فنحن هنا لمساعدتك. لدينا أداة السرعة لاختبار موقع الويب الخاص بك ، وأفضل موارد المطورين لمساعدتك في طريقك إلى تجربة محسّنة.
في الواقع ، تعد منصة التجربة الرقمية (DXP) الخاصة بنا مكانًا رائعًا لبدء إنشاء موقع ويب WordPress أفضل. تحقق من خطط الأسعار لدينا اليوم!