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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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