كيفية التخلص من موارد حظر العرض في WordPress [Plugins or Manually]

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

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

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

تتخلص من الموارد التي قد تمنع وقت تحميل موقع الويب ، مثل ملفات CSS و JavaScript.

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

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

تقديم موارد الحظر

يعتبر أي مورد يجب تحميله قبل عرض صفحة الويب موردًا يحظر العرض. تؤثر هذه الموارد على أداء موقع الويب وفعاليته وتطيل الوقت الذي يستغرقه تحميل الصفحة.

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

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

أنواع موارد حظر العرض

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

فيما يلي قائمة بموارد حظر العرض:

أوراق أنماط CSS

يتم تحديد تصميم صفحة الويب وعرضها بواسطة أوراق أنماط CSS. سيتم اعتبار ملف CSS كمورد لحظر العرض إذا تم وضعه في قسم في صفحة HTML.

ملفات JavaScript في قسم

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

الخطوط

يتم عرض النصوص على صفحة الويب باستخدام خطوط مختلفة. تعتبر الخطوط أيضًا موردًا لحظر العرض إذا تم تضمينها في قسم لصفحة HTML وتحميلها من خادم محلي أو CDN.

واردات HTML

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

لماذا يعد حظر عرض الموارد أمرًا مروعًا لصفحات الويب

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

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

• أكبر رسم للمحتوى: يحدد هذا الوقت الذي سيستغرقه تحميل المحتوى الأساسي للصفحة.
• First Contentful Paint: الوقت الذي يستغرقه المستعرض لإنتاج أول مستند نموذج كائن (DOM) محتوى على موقع الويب الخاص بك.
• إجمالي وقت الحظر: هذا يقيم الوقت المستغرق من Frist Contentful Pianto إلى الوقت الذي تستغرقه الصفحة لتصبح تفاعلية بالكامل.

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

دعنا نلقي نظرة فاحصة على سبب كون حظر العرض مشكلة خطيرة لصفحات الويب:

وقت تحميل الصفحة البطيء

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

العرض المحظور

غالبًا ما يتوقف المستعرض عن عرض صفحة ويب عندما يأتي عبر موارد حظر العرض لأنه يريد استرداد موارد حظر العرض ومعالجتها.

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

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

انخفاض تفاعل المستخدم

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

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

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

تخلص من موارد حظر العرض يدويًا

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

# 1. تحديد موارد حظر العرض

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

• انتقل إلى Google PageSpeed ​​Insights.
• أدخل عنوان URL لموقعك في شريط البحث.
• انقر فوق الزر “تحليل” للحصول على رؤى حول موقع الويب الخاص بك.

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

# 2. استخدام سمات “تأجيل” و “غير متزامن” لـ JS

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

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

لذلك ، يمكن تحميل باقي العناصر على الصفحة بالتوازي مع ملف JavaScript. نتيجة لذلك ، يقل الوقت المستغرق لتحميل الصفحة.

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

يمكنك التخلص من موارد حظر العرض وزيادة سرعة موقع الويب الخاص بك عن طريق استخدام السمة “تأجيل” أو “غير متزامن”.

# 3. استخدام سمة “الوسائط” لـ Conditional CSS

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

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

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

# 4. تأجيل CSS غير الحرجة

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

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

# 5. إزالة CSS و JS غير المستخدمة

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

من خلال إزالة أي ملفات CSS & JS غير مستخدمة ، يمكنك تقليل عدد موارد حظر العرض. يمكنك بسهولة استخدام أدوات مثل PurifyCSS أو UnusedCSS لإزالة أي ملف CSS غير مستخدم من موقع الويب الخاص بك.

# 6. تحميل الخطوط المخصصة محليًا

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

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

# 7. تصغير JS & CSS

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

لتصغير ملفاتك ، يمكنك استخدام أدوات مثل MinifyJS أو CSSNano. احتفظ بنسخة من ملفاتك الأصلية في حالة احتياجك لإجراء تعديلات عليها.

تخلص من موارد حظر العرض باستخدام البرنامج المساعد

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

# 1. W3 إجمالي ذاكرة التخزين المؤقت

W3 Total Cache (W3TC) يعزز تجربة المستخدم الكاملة لموقع WordPress على الويب. إنه يزيل موارد حظر العرض ويحسن SEO وحيوية الويب الأساسية والمزيد. يستخدم المكون الإضافي ميزات مثل تكامل شبكة توصيل المحتوى لتنفيذ أفضل الممارسات.

للتخلص من موارد حظر العرض ، قم بتثبيت وتنشيط المكون الإضافي W3 Total Cache واتبع الخطوات التالية:

• انتقل إلى قسم الأداء في لوحة معلومات WordPress وانقر على الإعدادات العامة.
• تحت عنوان تصغير ، قم بتمكين تصغير وحدد يدوي كوضع التصغير.
• الآن انقر فوق حفظ جميع الإعدادات.

• ثم اجمع كل ملفات Javascript و CSS التي تحظر العرض عبر Google PageSpeed ​​Insights.
• تليها العودة إلى الأداء> تصغير.
• الآن ، في قسم js ، أولاً ، انقر فوق تمكين لإعدادات JS تصغير. ثم ضمن قسم العمليات في المناطق ، حدد عدم الحظر باستخدام نوع “تأجيل” للعلامة قبل .
• انتقل الآن إلى إدارة ملفات JS ، وحدد الموضوع الذي قمت بتنشيطه ، وانقر فوق الزر Add Script. قم الآن بتجميع عناوين URL الخاصة بجافا سكريبت التي بها مشكلات تم فحصها بواسطة Google PageSpeed ​​Insights. الصق عناوين URL في الحقل المحدد كما هو مذكور في الصورة.

• الآن قم بالتمرير لأسفل قليلاً إلى قسم CSS. حدد المظهر الخاص بك من القائمة المنسدلة في قسم إدارة ملفات CSS وانقر فوق إضافة ورقة أنماط. الآن يمكنك ببساطة اتباع الخطوة السابقة ونسخ ولصق عناوين URL التي تم جمعها من PageSpeed ​​Insight التي بها مشكلات.

• نظرًا لتكوين جميع الإعدادات ، انقر فوق الزر Save Settings & Purge للتنفيذ.

# 2. تحسين JCH

تعمل JCH Optimize على تحسين أداء موقع WordPress الذي يتم قياسه بواسطة Google PageSpeed ​​Insight. يعمل البرنامج المساعد على تحسين أول رسم محتوى (FCP) ، وأكبر طلاء محتوى (LCP) ، ومؤشر السرعة (SI) ، وتحويل التخطيط التراكمي (CLS) ، ووقت التفاعل (TTI) ، والمزيد.

وبالتالي ، تتحسن تجربة المستخدم الإجمالية وأداء موقع الويب بشكل ملحوظ.

بعد تثبيت JCH Optimize وتنشيطه ، اتبع هذه العمليات للتخلص من موارد حظر العرض:

• اذهب إلى Settings> JCH Optimize وانتقل لأسفل قليلًا وانتقل إلى إعدادات الميزات الأساسية.

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

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