إذا سبق لك تشغيل موقع وورد بريس الخاص بك من خلال Google PageSpeed Insights ، فمن المحتمل أن Google قد أخبرك أنك بحاجة إلى التخلص من موارد حظر العرض على موقع وورد بريس الخاص بك. في الواقع ، قد يكون هذا هو سبب قراءتك لهذا المنشور بالذات الآن.
ربما يطرح هذا سؤالين في ذهنك:
ما المقصود بموارد حظر العرض في المقام الأول؟
كيف يمكنك التخلص من موارد حظر العرض على وورد بريس؟
لفهم ماهية موارد حظر العرض ولماذا تضر بأوقات تحميل موقعك ، نحتاج إلى البدء بإلقاء نظرة أساسية على كيفية عرض متصفح الويب لصفحة ويب.
عندما يهبط زائر على موقعك ، يبدأ متصفح الويب الخاص به بشكل أساسي في الجزء العلوي من كود موقعك ويقرأ. من أعلى إلى أسفل ، هل فهمت ذلك؟
إذا واجه في هذه العملية ملف CSS أو JavaScript ، فإنه يحتاج إلى التوقف عن “القراءة” أثناء انتظار تنزيل هذا الملف ومعالجته. يمكن إنفاق الوقت الذي يقضيه “توقف مؤقتًا” لتنزيل هذه الموارد وتحليلها على شيء أكثر إنتاجية ، مثل تحميل جزء من محتوى موقع الويب الخاص بك والذي يظهر فور وصول شخص ما إلى الصفحة.
دعنا نلقي نظرة على مثال متطرف لإظهار سبب كون هذه مشكلة.
لنفترض أن لديك تأثير JavaScript الرائع هذا في تذييل موقعك. إنه مدعوم من “coolfooter.js” ، وهو نص برمجي يُشار إليه في الجزء العلوي من شفرة موقعك ( على الرغم من أن التأثير موجود في التذييل ، لذلك لن يراه الزوار حتى ينتقلوا إلى التذييل ).
لذلك قد يكون التخطيط التقريبي للغاية لشفرة موقعك على النحو التالي:
رأس ميتا
Coolfooter.js
HTML لمحتوى الجزء المرئي من الصفحة الخاص بك. هذا هو كل المحتوى الذي يراه الزائر على الفور ( قبل أن يبدأ في التفاعل مع الصفحة )
وإليك سبب هذه المشكلة:
عندما يهبط زائر على موقعك ، يبدأ متصفحه في القراءة من أعلى إلى أسفل. لذا قبل أن يتمكن من تحليل HTML وعرض محتوى الجزء العلوي من الصفحة على موقعك ، فإنه يحتاج إلى الانتظار لتنزيل ملف coolfooter.js وتحليله.
النتيجة النهائية؟ يستغرق الأمر وقتًا أطول لعرض HTML لمحتوى الجزء المرئي من الصفحة ، مما يعني أن زوارك سيرون موقعك على أنه أبطأ.
عندما تخبرك Google بالتخلص من موارد حظر العرض ، فإنها تقول بشكل أساسي ، “مهلاً ، لا تقم بتحميل موارد غير ضرورية في الجزء العلوي من شفرة موقعك لأن ذلك سيجعل الأمر يستغرق وقتًا أطول حتى تتمكن متصفحات الزوار من تنزيل الجزء المرئي من المحتوى”.
باستخدام النصائح الواردة في هذا المنشور ، ستتمكن من الانتظار لتحميل بعض موارد CSS و JavaScript حتى يتم تحميل الجزء المرئي من صفحتك بالفعل.
عند الإشارة إلى موارد حظر العرض ، نتحدث عادةً عن:
CSS
جافا سكريبت
من المهم أن تفهم أنه ليست كل ملفات CSS و JavaScript تحظر العرض .
على سبيل المثال ، من المهم تحميل CSS المهم الخاص بك بالقرب من الجزء العلوي ، وإلا فقد يواجه زوارك ما يُعرف باسم وميض المحتوى غير المصمم (FOUC).
لا ، الصور لا تحظر العرض . لا يزال من المهم تحسين صورك لتقليل أحجام ملفاتها ، لكن لا داعي للقلق بشأن تحسين مسار التسليم لصورك.
لتقييم ما إذا كان موقع وورد بريس الخاص بك يحتوي حاليًا على موارد لحظر العرض ، يمكنك استخدام Google PageSpeed Insights .
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
كل ما عليك فعله هو إدخال عنوان URL الذي تريد اختباره. بعد ذلك ، إذا كانت لديك مشكلة في موارد حظر العرض ، فستدرج PageSpeed Insights كل مورد فردي في قسم إزالة موارد حظر العرض ضمن الفرص :
رسالة Remove Render-Blocking Resources في PageSpeed Insights
رسالة Remove Render-Blocking Resources في PageSpeed Insights
لا تقلق ، ليس عليك القيام بذلك يدويًا. سنتحدث عن مكونات وورد بريس الإضافية التي يمكن أن تساعدك في التخلص من موارد حظر العرض في القسم التالي.
ومع ذلك ، من المفيد فهم ما تفعله هذه المكونات الإضافية خلف الكواليس للتخلص من موارد حظر العرض.
هناك بعض الاستراتيجيات المختلفة لإزالة JavaScript الذي يحظر العرض. نغطي هذه بالتفصيل في مقالتنا حول كيفية تأجيل تحليل JavaScript ، ولكن فيما يلي الطرق الرئيسية:
Async – يتيح لمحلل HTML ( مثل متصفح الزائر ) تنزيل JavaScript مع الاستمرار في تحليل بقية HTML. أي أنه لا يتوقف تمامًا عن التحليل أثناء تنزيل الملف. ومع ذلك ، سيتم إيقاف المحلل اللغوي HTML مؤقتًا لتنفيذ البرنامج النصي بمجرد تنزيله.
تأجيل – يتيح محلل HTML تحميل جافا سكريبت أثناء تحليل بقية HTML و ينتظر لتنفيذ البرنامج النصي حتى يتم الانتهاء من HTML تحليل.
يقوم هذا الرسم التوضيحي من Growing with the Web بعمل رائع لإظهار الاختلاف:
JavaScript غير متزامن مقابل تأجيل
JavaScript غير متزامن مقابل تأجيل
تتمثل فائدة استخدام التأجيل في ضمان تنفيذ البرامج النصية بالترتيب الذي تظهر به في الكود.
لا يستخدم Async هذا الأسلوب ، والذي قد يتسبب أحيانًا في حدوث مشكلات إذا قمت بتطبيق غير متزامن على جميع موارد JavaScript لأنه غالبًا ما يؤدي إلى كسر الموارد التي تعتمد على الموارد التي تظهر مسبقًا في المستند. المشكلة الأكثر شيوعًا الناتجة عن عدم التزامن هي موارد jQuery المعطلة التي تحاول تحميلها قبل إضافة jquery.js إلى المستند.
يمكن أن يكون التخلص من CSS لحظر العرض أكثر تعقيدًا لأنك يجب أن تكون حريصًا على عدم تأخير CSS المطلوب لتقديم محتوى أعلى من الجزء المرئي من الصفحة. الترتيب المثالي هو:
حدد الأنماط المطلوبة لعرض محتوى الجزء المرئي من الصفحة وقم بتسليم هذه الأنماط سطريًا مع HTML .
استخدم سمة الوسائط على عناصر الارتباط التي تسحب ملفات CSS لتحديد موارد CSS المشروطة ، أي المطلوبة فقط لأجهزة أو مواقف معينة.
يجب تحميل موارد CSS المتبقية بشكل غير متزامن ، وهي خطوة يتم إجراؤها عادةً عن طريق إضافتها باستخدام JavaScript مؤجل أو غير متزامن. هذه بالتأكيد منطقة مهندس الواجهة الأمامية. وهو أمر رائع إذا كنت مهندس واجهة أمامية ، لكن معظمنا ليس كذلك. والخبر السار هو أن هذه مقالة عن وورد بريس ، ويمكنك على الأقل تقليل عدد موارد JS و CSS التي تحظر العرض والتي تؤثر على موقعك باستخدام المكون (المكونات) الإضافية الصحيحة.
لتوضيح كيفية التخلص من موارد حظر العرض على وورد بريس ، قمنا بإعداد موقع اختبار بسيط يتضمن CSS و JavaScript لحظر العرض ، ثم سنأخذك في جولة حول كيفية استخدام حلين إضافيين مختلفين للتخلص من حظر التجسيد CSS وجافا سكريبت:
التحسين التلقائي + Async JavaScript (مجانًا)
WP Rocket (مدفوع)
كمرجع ، إليك ما يبدو عليه موقع الاختبار الخاص بنا قبل تحسين تسليم CSS و JavaScript:
رسالة Remove Render-Blocking Resources في PageSpeed Insights
رسالة Remove Render-Blocking Resources في PageSpeed Insights
إذا كنت تختبر فعالية تغييراتك باستخدام Google PageSpeed Insights ، فاعلم أن Google يخزن نتائجه مؤقتًا لعدة دقائق. يعني هذا أساسًا أنك إذا …
اختبر موقعك غير المحسن
قم بتنشيط أحد المكونات الإضافية في هذا القسم
أعد اختبار موقعك
… ثم ستظل ترى نتائج موقعك غير المحسّن حتى يعيد Google تعيين ذاكرة التخزين المؤقت الخاصة به. لذا تأكد من الانتظار بضع دقائق حتى يقوم Google بمسح ذاكرة التخزين المؤقت الخاصة به قبل أن تعتقد أن المكون الإضافي لا يعمل.
يعد Autoptimize و Async JavaScript مكونين إضافيين مجانيين منفصلين من نفس المطور. يساعدان معًا في تحسين تسليم كل من CSS و JavaScript.
بمجرد تثبيت كلا المكونين الإضافيين ، انتقل إلى الإعدادات → Async JavaScript و:
حدد المربع لتمكين Async JavaScript في الجزء العلوي.
اختر بين تطبيق Async و Apply Defer في مربع الإعدادات السريعة .
كيفية تكوين البرنامج المساعد Async JavaScript
كيفية تكوين البرنامج المساعد Async JavaScript
إذا تسبب خيار Async في حدوث مشكلات على موقعك ، فإننا نوصي بتجربة Defer أو استبعاد jQuery ، والذي يمنحك المكون الإضافي خيارًا له.
بمجرد إعداد المكوّن الإضافي Async JavaScript ، انتقل إلى الإعدادات ← التحسين التلقائي و:
حدد المربع لتحسين كود JavaScript
حدد المربع لتحسين كود CSS
كيفية تكوين المكون الإضافي Autoptimize
كيفية تكوين المكون الإضافي Autoptimize
إذا كنت مستخدمًا متقدمًا ، فيمكنك التلاعب بإعدادات تحسين JavaScript و CSS الإضافية ، ولكن معظم المواقع ستكون مناسبة للإعدادات الافتراضية.
بعد تهيئة Autoptimize و Async JavaScript ، اجتاز موقع الاختبار الخاص بنا تدقيق PageSpeed Insights “إزالة موارد حظر العرض”:
نتائج PageSpeed Insights مع تحسين تلقائي و Async JavaScript
نتائج PageSpeed Insights مع تحسين تلقائي و Async JavaScript
إذا كنت ترغب في التخلص من المزيد من هذه الملفات ، فيمكنك استخدام التحسين التلقائي لتضمين CSS المهم يدويًا . يتطلب هذا بعض المعرفة التنموية ، ومع ذلك ، فهو ليس شيئًا يجب على غير المطورين تجربته.
يمكنك أيضًا استخدام المكونات الإضافية بشكل منفصل إذا كنت تفضل ذلك. ولكن نظرًا لأن كلا المكونين الإضافيين يأتيان من نفس المطور وقد تم تصميمهما للعب بشكل جيد مع بعضهما البعض ، فإن أفضل طريقة لمعظم المواقع هي الجمع بينهما.
WP Rocket هو مكون إضافي شهير لأداء وورد بريس والتخزين المؤقت.
عادةً ، لا نسمح بالتخزين المؤقت للمكونات الإضافية على مواقع وورد بريس المستضافة في Kinsta لأننا نتعامل بالفعل مع التخزين المؤقت لك على مستوى الخادم عبر ذاكرة التخزين المؤقت Nginx FastCGI السريعة.
ومع ذلك ، يحتوي WP Rocket على تكامل خاص مع Kinsta يتيح لـ WP Rocket اللعب بشكل جيد مع التخزين المؤقت Kinsta. هذا رائع لأن WP Rocket تفعل الكثير لأداء وورد بريس أكثر من مجرد التخزين المؤقت ، بما في ذلك مساعدتك على التخلص من موارد CSS و JavaScript التي تحظر العرض على موقع وورد بريس الخاص بك.
باستخدام صاروخ الفسفور الابيض؟ ضعه في العمل على تحسين موقع الويب الخاص بك بشكل أكبر من خلال التكامل السلس لدينا. جرب Kinsta مجانًا .
بمجرد تثبيت وتنشيط WP Rocket ، انتقل إلى علامة التبويب File Optimization . بعد ذلك ، قم بتمكين هذين الخيارين:
قم بتحسين تسليم CSS ضمن قسم ملفات CSS
تم تأجيل تحميل JavaScript ضمن قسم ملفات JavaScript . يمكنك تجربة إيقاف تشغيل الوضع الآمن لـ jQuery . ولكن إذا لاحظت وجود مشكلات في الواجهة الأمامية لموقعك ، فستحتاج إلى إعادة تمكين الوضع الآمن لـ jQuery لأنه الجاني المحتمل.
كيفية تكوين WP Rocket
كيفية تكوين WP Rocket
بعد تنشيط هاتين الميزتين ، اجتاز موقع الاختبار لدينا أيضًا تدقيق “إزالة موارد حظر العرض” في PageSpeed Insights. تمكن WP Rocket أيضًا من التخلص من موارد حظر العرض أكثر من إعداد Autoptimize / Async JavaScript:
نتائج PageSpeed Insights مع WP Rocket
نتائج PageSpeed Insights مع WP Rocket
وهذه هي طريقة التخلص من موارد حظر العرض على موقع وورد بريس الخاص بك!
هل تريد التخلص من موارد حظر العرض في #وورد بريس؟ إنه سهل للغاية مع المكونات الإضافية الصحيحة … تحقق من كيفية تعديل إعداداتها وجعل موقعك أسرع! ⚙️🏃♀️
انقر للتغريد
تعمل موارد حظر العرض على إبطاء أوقات تحميل الصفحة المتصورة لموقع وورد بريس الخاص بك عن طريق إجبار متصفحات الزوار على تأخير عرض المحتوى في الجزء العلوي من الصفحة أثناء تنزيل المستعرض للملفات غير المطلوبة على الفور.
لمساعدة الزائرين في تحميل الجزء المرئي من صفحتك بسرعة أكبر ، يجب عليك تأخير تحميل الموارد غير المطلوبة على الفور.
للتخلص من موارد حظر العرض على وورد بريس ، يمكنك استخدام الإضافات الجاهزة.
للحصول على حل مجاني ، يمكنك استخدام مزيج من Autoptimize و Async JavaScript ، وهما مكونان إضافيان من نفس المطور.
إذا كنت على استعداد للدفع ، فيمكنك استخدام WP Rocket ، والذي يوفر تكاملاً خاصًا مع Kinsta ويمكنه المساعدة في الكثير من تعديلات أداء وورد بريس الأخرى .
هل لديك أي أسئلة إضافية حول كيفية التخلص من موارد حظر العرض على وورد بريس؟ اسمحوا لنا أن نعرف في التعليقات!
وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:
مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.
تكامل Cloudflare Enterprise.
يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.
التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.
كل ذلك وأكثر من ذلك بكثير ، في خطة واحدة بدون عقود طويلة الأجل ، وعمليات الترحيل المدعومة ، وضمان استرداد الأموال لمدة 30 يومًا. تحقق من خططنا أو تحدث إلى قسم المبيعات للعثور على الخطة المناسبة لك.
