قد يكون من المحبط مواجهة مشاكل تتعلق بـ Render-Blocking JavaScript and CSS على موقع ووردبريس الخاص بك. يمكن أن تؤدي هذه المشاكل إلى إبطاء الموقع الإلكتروني الخاص بك والتأثير على أدائه. يمكن أن يؤدي الموقع البطيء إلى إبعاد الزوار والتأثير على تصنيفات محرك البحث الخاص بك.

عند التحقق من موقعك الإلأكتروني على Google PageSpeed Insights، قد ترى اقتراح إزالة موراد Render-Blocking هذه. لسوء الحظ، لا تقدم الأداة تعليمات واضحة حول كيفية إصلاح هذه المشكلة في ووردبريس.

الخبر السار هو أن هناك أدوات يمكنها جعل إصلاح Render-Blocking JavaScript and CSS أقل تعقيدًا مما يبدو. يمكنك استخدام اضافة تخزين مؤقت مثل WP Rocket أو Autoptimize لتحسين موقعك عن طريق تصغير الاسكربتات وتأجيلها، مما يقلل أوقات التحميل ويحسن درجات PageSpeed.

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

ما هو Render-Blocking JavaScript and CSS؟

ملفات Render-blocking JavaScript and CSS هي ملفات تمنع الموقع الالكتروني من عرض صفحة الويب قبل تحميل هذه الملفات.

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

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

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

تشار إلى هذه الاسكربتات وأوراق الأنماط باسم Render-Blocking JavaScript and CSS.

سيتعين على مالكي المواقع الالكترونية ووردبريس والذين يحاولون تحقيق درجة Google PageSpeed تبلغ 100 إصلاح هذه المشكلة لتحقيق هذه الدرجة المثالية.

ما هي Google PageSpeed score؟

Google PageSpeed Insights هي أداة لاختبار سرعة الموقع الكتروني تم إنشاؤها بواسطة Google لمساعدة مالكي المواقع الالكترونية على تحسين المواقع الالكترونية الخاصة بهم واختبارها. تقوم هذه الأداة باختبار موقعك الالكتروني وفقًا لإرشادات السرعة الخاصة بـ Google وتقدم اقتراحات لتحسين وقت تحميل صفحتك.

إنه يعرض لك درجة بناء على عدد عمليات التدقيق التي يجتازها موقعك.

تحصل معظم المواقع الإلكترونية على ما بين 50 إلى 70. ومع ذلك، يشعر بعض أصحاب المواقع الإلكترونية بأنهم ملزمون بتحقيق 100 (أعلى درجة يمكن أن تحصل عليها الصفحة).

هل تحتاج حقًا إلى الحصول على درجة “100” المثالية على Google PageSpeed؟

الغرض من Google PageSpeed Insights هو تزويدك بإرشادات لتحسين سرعة موقعك وأدائه. ومع ذلك، ليس مطلوب منك اتباع هذه القواعد بشكل صارم.

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

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

ومن ثم، يجب أن يكون هدفك هو إنشاء موقع الكتروني سريع يوفر تجربة مستخدم رائعة.

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

مع وضع ذلك في الاعتبار، سنلقي نظرة على ما يمكنك فعله لإصلاح Render-Blocking JavaScript and CSS في ووردبريس. سنغطي طريقتين من شأنهما القضاء على Eliminate Render-Blocking Resources في ووردبريس. يمكنك اختيار ما يناسب موقعك الالكتروني بشكل أفضل:

• الطريقة 1: إصلاح اسكربتات CSS Render Blocking باستخدام WP Rocket
• الطريقة 2: إصلاح اسكربتات CSS Render Blocking باستخدام Autoptimize
• ماذا تفعل إذا كانت نصوص JavaScript وCSS التي تمنع العرض لا تزال موجودة؟

💡 هل تواجه مشاكل في موقع ووردبريس الخاص بك؟ لا تقلق، نحن هنا لمساعدتك! يمكن لفريق دعم ووردبريس الخبير لدينا حل أي مشكلة واستعادة موقعك بسرعة. انسى الالتزامات طويلة الأمد. نحن نقدم حلول سريعة لمرة واحدة مصممة خصيصًا لتلبية احتياجاتك. اتصل بنا الأن، وسوف نتولى الباقي!

دعنا نبدأ ونجعل موقعك يعمل بسلاسة!

الطريقة 1: إصلاح اسكربتات CSS Render Blocking باستخدام WP Rocket

بالنسبة لهذه الطريقة، سنستخدم إضافة WP Rocket.

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

أولاً، عليك تثبيت وتفعيل إضافة WP Rocket. لمزيد من التفاصيل، يمكنك الاطلاع على دليلنا خطوة بخطوة حول كيفية تثبيت اضافة ووردبريس.

يعمل WP Rocket خارج الصندوق: فهو يقوم بتشغيل التخزين المؤقت بإعدادات مثالية لموقعك الالكتروني. يمكنك معرفة المزيد عنه في دليلنا الكامل حول كيفية تثبيت وإعداد WP Rocket في ووردبريس بشكل صحيح.

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

للقيام بذلك، تحتاج إلى زيارة صفحة الإعدادات » WP Rocket والتبديل إلى علامة التبويب ‘File Optimization’.

من هنا، انتقل ببساطة إلى قسم “ملفات CSS” وحدد المربعات بجوار “تصغير CSS”، و”دمج ملفات CSS”، و”تحسين عرض CSS”.

من هنا، قم بالتمرير ببساطة إلى قسم ‘ملفات CSS’ وحدد المربعات بجوار ‘تصغير CSS’، و’Combine CSS Files’، و’تحسين تحميل ملفات الـ CSS’.

بالنسبة لإعداد ‘تحسين تحميل ملفات الـ CSS’، توصي WP Rocket باختيار طريقة ‘Remove Unused CSS‘.

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

ملاحظة: ستحاول إضافة التخزين المؤقت WP Rocket تصغير جميع ملفات CSS، ودمجها، وتحميل ملفات CSS اللازمة للجزء المرئي فقط من موقعك الالكتروني.

قد يؤثر هذا على مظهر موقعك الكتروني، لذا عليك اختباره بدقة على أجهزة وأحجام شاشات متعددة.

بعد ذلك، ستحتاج إلى التمرير إلى قسم ‘ملفات JavaScript’.

من هنا، يمكنك التحقق من كافة الخيارات لتحسين الأداء إلى الحد الأقصى.

يمكنك تصغير ملفات JavaScript ودمجها كما فعلت بالنسبة لـ CSS.

يمكنك أيضًا إيقاف ووردبريس من تحميل ملف jQuery Migrate. تم تحميل هذا الاسكربتات لتوفير التوافق للاضافات والقوالب التي تستخدم الإصدارات القديمة من jQuery.

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

بعد ذلك، دعنا ننتقل إلى الأسفل قليلاً ونتحقق من المربعات بجوار خياري ‘Load JavaScript Defered’ و‘Safe Mode for jQuery’.

تؤدي هذه الخيارات إلى تأخير تحميل JavaScripts غير الضرورية، ويسمح لك الوضع الآمن لـ jQuery بتحميل jQuery للقوالب التي قد تستخدمه بشكل مضمن. يمكنك ترك هذا الخيار بدون تحديد إذا كنت متأكد من أن القالب الخاص بك لا يستخدم jQuery المضمن في أي مكان.

لا تنس النقر على زر ‘حفظ التغييرات’ لتخزين إعداداتك.

بعد ذلك، قد ترغب أيضًا في مسح ذاكرة التخزين المؤقت في WP Rocket قبل اختبار موقعك الكتروني مرة أخرى باستخدام Google PageSpeed Insights.

في موقع الاختبار الخاص بنا، تمكنا من تحقيق درجة 100% على أجهزة سطح المكتب، وتم حل مشكلة Render-Blocking في كل من درجات الأجهزة المحمولة وسطح المكتب.

الطريقة 2: إصلاح اسكربتات CSS Render Blocking باستخدام Autoptimize

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

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

عند التنشيط، ستحتاج إلى التوجه إلى الإعدادات » Autoptimize لتكوين إعدادات الإضافة.

أولاً، دعنا نتحقق من المربع بجوار ‘Optimize JavaScript Code’ ضمن كتلة ‘JavaScript Options’. هنا، ستحتاج إلى التأكد من إلغاء تحديد خيار ‘Aggregate JS-files’.

بعد ذلك، ستحتاج إلى التمرير لأسفل إلى مربع ‘CSS Options’ وتحديد خيار ‘Optimize CSS Code’.

تأكد ببساطة من عدم تحديد خيار ‘Aggregate CSS-files’.

يمكنك الأن النقر فوق زر ‘Save Changes and Empty Cache’ لتخزين إعداداتك.

قم بالمضي قدمًا واختبار موقعك الإلكتروني باستخدام أداة PageSpeed Insights. بفضل هذه الإعدادات الأساسية، نجحنا في إصلاح مشكلة render-blocking على موقعنا التجريبي.

إذا كانت هناك سكربتات Render-Blocking، فيمكنك العودة إلى صفحة إعدادات الإضافة ومراجعة الإعدادات ضمن خيارات JavaScript وCSS.

على سبيل المثال، يمكنك السماح للإضافة بتضمين JS مضمن وإزالة الاسكربتات المستبعدة بشكل افتراضي، مثل seal.js أو jquery.js. بعد ذلك، انقر ببساطة على زر ‘Save changes and Empty Cache’ لحفظ التغييرات وإفراغ ذاكرة التخزين المؤقت للإضافة.

بمجرد الانتهاء، انتقل إلى التحقق من موقعك الإلكتروني مرة أخرى باستخدام أداة PageSpeed Insights.

كيف يعمل Autoptimize؟

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

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

ماذا تفعل إذا كانت Render-Blocking JavaScript and CSS لا تزال موجودة؟

اعتمادًا على كيفية استخدام اضافات وقالب ووردبريس الخاص بك لـ JavaScript وCSS، فقد يكون من الصعب إصلاح جميع مشاكل Render-Blocking JavaScript and CSS بشكل كامل.

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

بدلاً من التخلص من مشاكل eliminating render-blocking بشكل كامل، نوصي باتباع طرق بديلة لتسريع موقعك الإلكتروني. على سبيل المثال، يمكنك استخدام خدمة CDN لتقديم ملفات JavaScript وCSS الثابتة وتقليل وقت التحميل.

يمكنك قراءة دليلنا الشامل لتعزيز سرعة وأداء ووردبريس للحصول على مزيد من المعلومات.

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

نأمل أن تساعدك هذه المقالة على تعلم كيفية إصلاح مشكلة render-blocking JavaScript and CSS في ووردبريس. قد ترغب أيضًا بالاطلاع على مقالتنا حول كيفية إصلاح خطأ “This Site Can’t Be Reached” بسهولة وقائمتنا الخبيرة لـ أكثر أخطاء ووردبريس شعبية وكيفية إصلاحها.

هل وجدت هذا المنشور مفيدًا؟ شاركنا رأيك من خلال ترك تعليق أدناه، أو انضم إلينا على تويتر وفيسبوك.