كيفية التخلص من موارد حظر العرض من موقع WordPress الخاص بك

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

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

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

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

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

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

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

إذا كنت تفضل المتابعة مع مقطع فيديو ، فراجع هذه الإرشادات التي أنشأتها WP Casts:

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

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

عند اكتمال الفحص ، تعيّن Google موقع الويب الخاص بك درجة سرعة إجمالية ، من 0 (أبطأ) إلى 100 (الأسرع). تعتبر النتيجة في النطاق من 50 إلى 80 متوسطًا ، لذا سترغب في الهبوط في الجزء العلوي من هذا النطاق أو أعلى منه.

لتحديد ملفات حظر العرض التي تعمل على إبطاء صفحتك ، قم بالتمرير لأسفل إلى " الفرص " ، ثم افتح الجزء " إزالة موارد حظر العرض" .

مصدر الصورة

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

لاحظ أي ملفات تنتهي بالملحقين .css و .js ، فهذه هي الملفات التي تريد التركيز عليها.

2. تخلص من موارد حظر العرض يدويًا أو باستخدام مكون إضافي.

الآن بعد أن حددت المشكلة ، هناك طريقتان يمكنك اتباعهما لإصلاحها في WordPress: يدويًا أو باستخدام مكون إضافي. سنغطي حل المكون الإضافي أولاً.

يمكن للعديد من مكونات WordPress الإضافية أن تقلل من تأثير موارد حظر العرض على مواقع WordPress. سأغطي حلين شائعين ، Autoptimize و W3 Total Cache.

كيفية التخلص من موارد حظر العرض باستخدام البرنامج المساعد للتحسين التلقائي

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

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

1. قم بتثبيت وتنشيط المكون الإضافي Autoptimize.

2. من لوحة معلومات WordPress الخاصة بك ، حدد الإعدادات> تحسين تلقائي .

3. ضمن خيارات JavaScript ، حدد المربع المجاور لـ Optimize JavaScript code؟ .

4. إذا كان المربع بجوار تجميع ملفات JS؟ تم فحصه ، قم بإلغاء تحديده.

5. ضمن خيارات CSS ، حدد المربع بجوار تحسين كود CSS؟ .

6. إذا كان المربع بجوار ملفات CSS التجميعية؟ تم فحصه ، قم بإلغاء تحديده.

7. في الجزء السفلي من الصفحة ، انقر فوق حفظ التغييرات وإفراغ ذاكرة التخزين المؤقت .

8. افحص موقع الويب الخاص بك باستخدام PageSpeed ​​Insights وتحقق من وجود تحسن.

9. إذا استمرت PageSpeed ​​Insights في الإبلاغ عن ملفات جافا سكريبت التي تحظر العرض ، فارجع إلى الإعدادات> التحسين التلقائي وحدد المربعات بجوار تجميع ملفات JS؟ وتجميع ملفات CSS؟ . ثم انقر فوق Save Changes and Empty Cache (حفظ التغييرات وإفراغ ذاكرة التخزين المؤقت) وأعد الفحص مرة أخرى.

كيفية التخلص من موارد حظر العرض باستخدام البرنامج الإضافي W3 Total Cache

W3 Total Cache هو مكون إضافي للتخزين المؤقت يستخدم على نطاق واسع ويساعد في معالجة التعليمات البرمجية البطيئة. للتخلص من حظر عرض JavaScript باستخدام W3 Total Cache:

1. قم بتثبيت وتنشيط المكون الإضافي W3 Total Cache.

2. ستتم إضافة خيار أداء جديد إلى قائمة لوحة معلومات WordPress الخاصة بك. حدد الأداء> الإعدادات العامة.

3. في قسم تصغير ، حدد المربع بجوار تصغير ، ثم اضبط وضع التصغير على يدوي .

4. انقر فوق حفظ كافة الإعدادات أسفل قسم تصغير .

5. في قائمة لوحة المعلومات ، حدد الأداء> تصغير .

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

7. ضمن إدارة ملفات JS ، اختر المظهر النشط من القائمة المنسدلة للموضوع .

8. ارجع إلى نتائج PageSpeed ​​Insights الخاصة بك من الفحص السابق. لكل عنصر ضمن إزالة موارد حظر العرض التي تنتهي بـ .js ، انقر فوق إضافة برنامج نصي . بعد ذلك ، انسخ عنوان URL الكامل لمورد JavaScript من PageSpeed ​​Insights والصقه في حقل عنوان URL للملف .

9. بمجرد قيامك بلصق جميع موارد JavaScript التي تحظر العرض والتي تم الإبلاغ عنها بواسطة PageSpeed ​​Insights ، انقر فوق حفظ الإعدادات وذاكرة التخزين المؤقت في الجزء السفلي من قسم JS .

10. في قسم CSS بجوار CSS minify settings ، حدد المربع بجوار CSS minify settings وتأكد من تعيين طريقة Minify على Combine & Minify .

11. ضمن إدارة ملفات CSS ، اختر المظهر النشط الخاص بك من القائمة المنسدلة للموضوع .

12. لكل عنصر ضمن إزالة موارد حظر العرض المنتهية بـ .css في نتائج فحص PageSpeed ​​Insights ، انقر فوق إضافة ورقة أنماط . بعد ذلك ، انسخ عنوان URL الكامل لمورد CSS من PageSpeed ​​Insights والصقه في حقل عنوان URL للملف .

13. بمجرد قيامك بلصق جميع موارد CSS لحظر العرض التي تم الإبلاغ عنها بواسطة PageSpeed ​​Insights ، انقر فوق حفظ الإعدادات وذاكرة التخزين المؤقت في أسفل قسم CSS .

14. افحص موقع الويب الخاص بك باستخدام PageSpeed ​​Insights وتحقق من وجود تحسن.

كيفية التخلص من حظر تجسيد JavaScript يدويًا

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

للقيام بذلك ، حدد موقع علامات <script> في ملفات موقع الويب الخاص بك للموارد المحددة في فحص PageSpeed ​​Insights. سيبدو مثل هذا:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

تخبر العلامات <script> المتصفح بتحميل وتنفيذ النص المحدد بواسطة السمة src (المصدر). تكمن مشكلة هذه العملية في أن هذا التحميل والتنفيذ يؤخر تحليل المتصفح لصفحة الويب ، مما يؤثر على وقت التحميل الإجمالي:

مصدر الصورة

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

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

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

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

مصدر الصورة

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

مصدر الصورة

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

3. أعد فحص الموقع.

بعد إجراء التغييرات ، قم بإجراء مسح نهائي واحد لموقع الويب الخاص بك من خلال PageSpeed ​​Insights واطلع على تأثير التغييرات على درجاتك.

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

4. تحقق من موقع الويب الخاص بك عن الأخطاء.

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

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

تحسين موقع WordPress الخاص بك للأداء

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

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