Render-Blocking JavaScript و CSS في WordPress: 5 ملحقات لإصلاحها

لم يمض وقت طويل عندما أعلنت Google أن مواقع الويب التي تستغرق أكثر من ثلاث ثوانٍ للتحميل ليست صديقة للسيو.

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

يعني تشغيل موقع WordPress على الويب عددًا كبيرًا من البرامج النصية التي تعمل في نفس الوقت لتسهيل الوصول إلى موقعك.

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

سنتحدث اليوم عن هذه الملفات الدخيلة ونطلعك على الطرق التي يمكنك من خلالها إزالتها لتحسين موقعك.

 

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

باختصار ، حظر عرض JavaScript و CSS عبارة عن سلسلة من أوراق الأنماط والبرامج النصية الضرورية للتشغيل بالكامل قبل تحميل الموقع وتصبح مرئية.

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

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

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

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

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

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

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

 

ابحث عن JavaScript و CSS يحظران العرض

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

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

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

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

 

إصلاح JavaScript و CSS يحظران العرض

هناك الكثير من الاستراتيجيات للتخلص من حظر جافا سكريبت. الطرق الرئيسية هي Async و Defer. تسمح الطريقة الأولى لمتصفح المستخدم بتنزيل JavaScript أثناء تحليل أجزاء HTML الأخرى.

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

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

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

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

 

أفضل ملحقات WordPress لإصلاح جافا سكريبت و CSS التي تحظر العرض

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

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

 

Autoptimize

• Autoptimize تم تصميم المكون الإضافي بشكل صريح لمعالجة المشكلات التي تقترحها أدوات تحليل موقع الويب مثل Google PageSpeed ​​Insights. إنه يحسن تسليم ملفات JavaScripts و CSS دون التركيز كثيرًا على الجوانب الأخرى لأداء موقع الويب.

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

بمجرد تثبيت وتفعيل Autoptimize ، ستحتاج إلى تحديد مربعي الخيار Optimize JavaScript Code و Optimize CSS Code الموجود في إعدادات البرنامج المساعد. احرص على عدم تحديد المربعات الموجودة أسفل هذين الخيارين التي تجمع ملفات CSS وملفات النص البرمجي.

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

 

WP Rocket

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

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

ولكن يمكنك بسهولة تشغيل هذه الميزة من خلال التوجه إلى إعدادات البرنامج المساعد والبحث عن الخيارات ذات الصلة في قسمي "ملفات CSS" و "ملفات جافا سكريبت".

يكلف المكون الإضافي الرئيسي 49 دولارًا سنويًا يأتي مع دعم لمدة عام أيضًا. علاوة على ذلك ، يمكنك أن تجد عدة إضافات مجانية للمكوِّن الإضافي الأساسي في WordPress أيضًا.

 

RabbitLoader

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

على غرار WP Rocket المشهور على نطاق واسع، لا يرتقي RabbitLoader بأداء موقعك إلى آفاق جديدة فحسب، بل يقدم أيضًا بعض الميزات المبتكرة التي تميزه عن اللاعبين الآخرين في اللعبة.

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

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

تحميل كسول: يوفر كل من WP Rocket وRabbitLoader تحميلًا بطيئًا للصور وإطارات iframe، لكن RabbitLoader يذهب إلى أبعد من ذلك من خلال تقديم تحميل JavaScript مؤجل.

التوافق: تم تصميم RabbitLoader للعمل بشكل لا تشوبه شائبة مع مجموعة واسعة من سمات WordPress والمكونات الإضافية، تمامًا مثل WP Rocket. سواء كان لديك مدونة بسيطة أو موقع تجارة إلكترونية معقد، فقد تم تصميم RabbitLoader لتحسين أداء موقعك دون تعارضات.

 

W3 المشاركات الكاش

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

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

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

يحتوي W3 Total Cache على أكثر من مليون تثبيت نشط ، ويمكنك تنزيله على موقعك مجانًا من موقع WordPress.org.

 

حزمة تعزيز السرعة

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

إذا كنت تبيع منتجات وخدمات عبر الإنترنت ، فإن التحسين الخاص بـ WooCommerce ستساعدك ميزات Speed ​​Booster Pack كثيرًا في زيادة ظهور متجرك على الإنترنت.

يمكنك إصلاح JavaScript و CSS الذي يحظر التجسيد بسرعة على موقع WordPress الخاص بك عن طريق النقر فوق علامة التبويب "خيارات متقدمة" من قائمة Speed ​​Booster Pack بلوحة الإدارة.

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

حزمة Speed ​​Booster هي حل مجاني متاح على موقع WordPress.org.

 

تحسين JCH

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

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

باستخدام JCH Optimize ، يمكنك إزالة JavaScript و CSS التي تحظر التجسيد إذا قمت بالترقية إلى خطة متميزة. كل ما تحتاجه هو تفعيل خيارات "Premium" أو "Optimum" من قسم "Automatic settings". تتوفر أيضًا إعدادات تسليم CSS فقط في إصدار Pro.

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

 

نبذة عامة

تعد سرعة تحميل موقع الويب من أهم العناصر لجذب الجماهير وإشراكهم والاحتفاظ بهم. يجب أن تمنحه أولوية عالية عند تحسين موقع الويب الخاص بك لمحركات البحث واستخدام أداة Google PageSpeed ​​Insights لقياس مدى جودة أدائك في هذا المجال.

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

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