ما المقصود بموارد حظر العرض وكيفية إصلاح مشكلات حظر العرض

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

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

ما المقصود بموارد حظر العرض؟

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

من منظور الشخص العادي ، هذا يعني أن بعض الأحداث يجب أن تحدث حتى يقوم متصفحك بعرض (تقديم) العرض الأولي لأي صفحة ويب بشكل صحيح. فيما يلي مثال على كيفية عمل مسار العرض الأساسي:

• يقوم المتصفح بتنزيل صفحة ويب تتكون من ملف HTML يحتوي على بنية صفحة الويب
• يقوم المتصفح بعد ذلك بقراءة HTML ويلاحظ 3 ملفات إضافية: ملف css وملف جافا سكريبت وصورة
• سيقوم المتصفح أولاً بتنزيل الصورة
• يدرك المتصفح بعد ذلك أنه لا يمكنه الاستمرار في عرض الصفحة دون الحصول على CSS و JavaScript
• يقوم المتصفح بتنزيل ملف CSS وقراءته للتأكد من عدم استدعاء أي شيء آخر
• يقوم المتصفح بتنزيل ملف JavaScript وقراءته للتأكد من عدم استدعاء أي شيء آخر
• يمكن للمتصفح أخيرًا عرض صفحة الويب

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

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

كيفية إصلاح مشكلات حظر العرض

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

Render-Blocking CSS

هناك ثلاث طرق لإصلاح مشكلات CSS لحظر العرض:

• اتصل بشكل صحيح بملفات CSS - يجب ربط ملف CSS في ملف HTML الخاص بك مثل: <link rel="style.css" href=“style.css"> بدلاً من الاعتماد على استخدام طريقة @import . طريقة @import عادةً ما يكون بالقرب من الجزء العلوي من ورقة الأنماط العادية الخاصة بك ويتسبب في عودة المتصفح والعثور على الملف الذي تم استيراده قبل أن يتمكن من قراءة بقية ملف CSS وينتج عنه تأخير أكبر عندما يتعلق الأمر بعرض صفحة الويب الخاصة بك
• قلل عدد ملفات CSS في المسار الحرج - إذا كان ذلك ممكنًا ، فقم بدمج جميع ملفات CSS المختلفة في ملف واحد وإزالة استدعاء هذه الملفات من HTML الخاص بك

Render-Blocking JavaScript

لإزالة حظر عرض JavaScript ، تحتاج إلى معرفة عدد ملفات JavaScript التي يتم تحميلها ومكان استدعائها في HTML الخاص بك. هناك طريقة جيدة لمعرفة ذلك وهي استخدام أداة Google PageSpeed ​​Insights. عندما كانت شركة التنظيف الأسترالية ، This Is Neat Cleaning ، تبني موقعها على الويب ، استخدموا PageSpeed ​​Insights من Google كمعيار لهم ، واختبروا السيناريوهات المختلفة لمعرفة ما يحتاجون إليه بالضبط لكل من الأجهزة المحمولة وسطح المكتب.

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

باستخدام البرنامج المساعد

بالطبع ، كما هو الحال مع أي شيء متعلق بـ WordPress ، يمكنك استخدام مكون إضافي لإصلاح مشكلات حظر العرض. مع أكثر من مليون عملية تثبيت نشطة ، كان من غير المنطقي أن يستخدم هذا التنظيف الأنيق W3 Total Cache للتخزين المؤقت ، والتصغير ، وتحسين الأداء.

إليك كيفية استخدام W3 Total Cache لإصلاح مشكلات حظر العرض.

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

لمعرفة مكان وجود البرامج النصية وأوراق الأنماط التي تمنع العرض ، انتقل إلى Google Page Speed ​​Insights Tool وقم بتحليل موقع الويب الخاص بك. بعد ذلك ، انظر إلى علامة تبويب الاقتراحات وابحث عن القسم الذي يقرأ: تخلص من حظر جافا سكريبت و CSS في محتوى الجزء المرئي من الصفحة . انقر فوق إظهار كيفية الإصلاح وتحديد ونسخ عنوان URL للملف.

ارجع إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى W3 Total Cache> Performance> Minify . قم بالتمرير لأسفل إلى قسم جافا سكريبت وتحت العمليات في المناطق ، تأكد من تعيين نوع التضمين على عدم الحظر باستخدام تأجيل <head> . ثم ، انقر فوق الزر " إضافة برنامج نصي " والصق عنوان URL الذي نسخته من أداة Google PageSpeed.

بمجرد إضافة جميع ملفات البرامج النصية ، قم بالتمرير لأسفل إلى قسم CSS ، وانقر فوق إضافة ورقة أنماط وأضف عناوين URL لملفات ورقة الأنماط التي تم نسخها من Google PageSpeed ​​Insights.

عند الانتهاء ، انقر فوق الزر حفظ الإعدادات ومسح ذاكرة التخزين المؤقت .

افكار اخيرة

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