هل تريد التخلص من حظر عرض JavaScript و CSS في WordPress؟
إذا كنت تختبر موقع الويب الخاص بك على Google PageSpeed Insights ، فمن المحتمل أن ترى اقتراحًا لإزالة كتل عرض البرنامج النصي و CSS. ومع ذلك ، فإنه لا يوفر تفاصيل حول كيفية القيام بذلك على موقع WordPress الخاص بك.
في هذه المقالة ، سنوضح لك كيفية إصلاح حظر عرض JavaScript و CSS بسهولة في WordPress لتحسين نقاط Google PageSpeed.
ولكن قبل ذلك ، لنكتشف معًا كيفية تثبيت وورد بلوق الخطوات 7 et كيفية العثور عليها، وتثبيت وتفعيل موضوع ورد على بلوق.
ما هو JavaScript و CSS Render-Blocking؟
حظر عرض JavaScript و CSS عبارة عن ملفات تمنع موقع الويب من عرض صفحة ويب قبل تحميلها.
يحتوي كل موقع ويب WordPress على سمة ومكونات إضافية تضيف ملفات JavaScript و CSS إلى الواجهة الأمامية لموقع الويب الخاص بك. يمكن أن تزيد هذه البرامج النصية من وقت تحميل الصفحة لموقع الويب الخاص بك ، ويمكنها أيضًا حظر عرض الصفحة.
سيحتاج متصفح المستخدم إلى تحميل هذه البرامج النصية و CSS قبل تحميل باقي كود HTML على الصفحة. هذا يعني أن المستخدمين الذين يستخدمون اتصالاً أبطأ سيتعين عليهم الانتظار بضعة أجزاء من الألف من الثانية لعرض الصفحة.
تسمى هذه البرامج النصية وأوراق الأنماط بأدوات حظر عرض JavaScript و CSS.
سيحتاج مالكو مواقع الويب الذين يحاولون تحقيق درجة Google PageSpeed 100 إلى إصلاح هذا لتحقيق هذه النتيجة المثالية.
ما هي نقاط Google PageSpeed؟
Google PageSpeed Insights هي أداة لاختبار السرعة أنشأتها Google لمساعدة مالكي مواقع الويب على تحسين مواقعهم واختبارها. تختبر هذه الأداة موقع الويب الخاص بك وفقًا لإرشادات السرعة من Google وتقدم اقتراحات لتحسين أوقات تحميل صفحات موقع الويب الخاص بك.
يُظهر لك درجة بناءً على عدد القواعد التي يمر بها موقع الويب الخاص بك. تتراوح أعمار معظم المواقع بين 50 و 70. ومع ذلك ، يشعر بعض مالكي مواقع الويب بالضغط للوصول إلى 100.
هل تحتاج حقًا إلى درجة "100" على Google PageSpeed؟
الهدف من رؤى Google PageSpeed هو تزويدك بإرشادات لتحسين سرعة وأداء موقع الويب الخاص بك. لست مطالبًا باتباع هذه القواعد بدقة.
تذكر أن السرعة هي مجرد واحدة من العديد من مقاييس تحسين محركات البحث التي تساعد Google في تحديد كيفية ترتيب موقع الويب الخاص بك. سبب أهمية السرعة هو أنها تتحسن تجربة المستخدم على موقع الويب الخاص بك.
تتطلب تجربة المستخدم الأفضل ما هو أكثر بكثير من السرعة. يجب عليك أيضًا تقديم معلومات مفيدة ، واجهة مستخدم أفضل وجذب المحتوى بالنص والصور ومقاطع الفيديو.
يجب أن يكون هدفك هو إنشاء موقع ويب سريع يوفر تجربة مستخدم رائعة.
أثناء إعادة تصميم BlogPasCher الأحدث ، ظللنا نركز على السرعة بالإضافة إلى تحسين تجربة المستخدم.
نوصي باستخدام قواعد Google Pagespeed كاقتراح ، وإذا كان بإمكانك تنفيذها بسهولة دون الإضرار بتجربة المستخدم ، فهذا رائع. إذا لم يكن الأمر كذلك ، يجب أن تسعى جاهدة لفعل كل ما تستطيع ، ثم لا تقلق بشأن الباقي.
مع ذلك ، دعنا نلقي نظرة على ما يمكنك فعله لإصلاح حظر عرض JavaScript و CSS في WordPress.
سنقوم بتغطية طريقتين لحل هذه المشكلة. يمكنك اختيار الشخص الذي يعمل بشكل أفضل على موقع الويب الخاص بك.
1. إصلاح البرامج النصية لحظر العرض و CSS باستخدام WP Rocket
لهذه الطريقة ، سنستخدم المكون الإضافي WP Rocket. هذا هو أفضل مكون إضافي للتخزين المؤقت في WordPress في السوق ويسمح لك بتحسين أداء موقع الويب الخاص بك بسرعة دون إعداد أي مهارات تقنية أو معقدة.
بادئ ذي بدء ، تحتاج إلى تثبيت وتفعيل المكون الإضافي WP Rocket. لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون WordPress الإضافي..
يقوم WP Rocket بتنشيط ذاكرة التخزين المؤقت الخاصة به مع الإعدادات المثلى. بشكل افتراضي ، لا يقوم بتمكين خيارات تحسين JavaScript و CSS. من المحتمل أن تؤثر هذه التحسينات علىمظهر موقع الويب الخاص بك أو ميزات معينة ، ولهذا السبب يتيح لك المكون الإضافي تمكين هذه الإعدادات كخيار.
للقيام بذلك عليك أن تستمر الإعدادات »WP Rocket، ثم قم بالتبديل إلى "تحسين الملف ". من هناك ، قم بالتمرير لأسفل إلى القسم ملفات CSS ووضع علامة في المربعات تصغير CSS, ادمج ملفات CSS et تحسين تسليم CSS.
ملاحظة : سيحاول WP Rocket تصغير جميع ملفات CSS الخاصة بك ، ودمجها وتحميل CSS الضرورية فقط للجزء المرئي من موقع الويب الخاص بك. هذا يمكن أن يؤثر علىمظهر موقع الويب الخاص بك، لذلك يجب اختبار موقع الويب الخاص بك بدقة على أجهزة وأحجام شاشات متعددة.
ثم عليك التمرير إلى القسم ملفات JavaScript. من هنا يمكنك تحديد جميع الخيارات لتحسين الأداء الأقصى.
يمكنك تصغير ملفات JavaScript ودمجها تمامًا كما فعلت مع ملفات CSS.
يمكنك أيضًا منع WordPress من تحميل الملف. ترحيل jQuery. هذا برنامج نصي يقوم WordPress بتحميله لتوفير التوافق مع المكونات الإضافية والسمات باستخدام الإصدارات القديمة من jQuery.
لا تحتاج معظم مواقع الويب إلى هذا الملف ، ولكن من الجيد التحقق من موقع الويب الخاص بك للتأكد من أن إزالته لا تؤثر على المظهر أو المكونات الإضافية.
ثم قم بالتمرير لأسفل قليلاً وتحقق من الخيارات "تحميل JavaScript مؤجل"و"الوضع الآمن لـ jQuery".
تؤخر هذه الخيارات تحميل JavaScript غير الأساسي ، ويسمح لك jQuery Safe Mode بتحميل jQuery للقوالب التي يمكنها استخدامها بشكل مضمّن.
تذكر أن تنقر على زر حفظ التغييرات لتخزين الإعدادات الخاصة بك.
بعد ذلك ، يمكنك أيضًا مسح ذاكرة التخزين المؤقت في WP Rocket قبل اختبار موقع الويب الخاص بك مرة أخرى باستخدام Google Page Speed Insights.
على موقع الويب التجريبي الخاص بنا ، تمكنا من تحقيق درجة 100٪ على أجهزة سطح المكتب وتم حل مشكلة توقف العرض في كل من درجات الأجهزة المحمولة وسطح المكتب.
2. إصلاح حظر عرض JavaScript و CSS باستخدام التحسين التلقائي
لهذه الطريقة ، سنستخدم مكونًا إضافيًا مختلفًا مصممًا خصيصًا لتحسين تسليم ملفات CSS و JS لموقع الويب الخاص بك. بينما ينجز هذا المكون الإضافي المهمة ، فإنه يفتقر إلى الميزات القوية الأخرى التي يقدمها WP Rocket.
أول شيء عليك القيام به هو تثبيت وتفعيل البرنامج المساعد Autoptimize. لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكوّن WordPress إضافي.
عند التنشيط ، يجب عليك زيارة الصفحة إعداد »التحسين التلقائي لتكوين إعدادات البرنامج المساعد.
بادئ ذي بدء ، تحتاج إلى تحديد الخيار "تحسين كود JavaScriptتحت الكتلة جافا سكريبت مزيد من الخيارات. تأكد من عدم تحديد الخيار "تجميع كل ملفات JS المرتبطة".
ثم قم بالتمرير لأسفل إلى المنطقة خيارات CSS وتحقق من الخيار " تحسين كود CSS؟". تأكد من أن الخيار "تجميع كل ملفات CSS المرتبطة'غير محدد.
يمكنك الآن النقر فوق الزر "حفظ التغييرات ومسح ذاكرة التخزين المؤقت" لتخزين إعداداتك.
انطلق واختبر موقع الويب الخاص بك باستخدام Page Speed Insights. على موقع الويب التجريبي الخاص بنا ، تمكنا من حل مشكلة توقف العرض باستخدام هذه الإعدادات الأساسية.
إذا كان لا يزال هناك نصوص برمجية لحظر العرض ، فستحتاج إلى الرجوع إلى صفحة إعدادات المكون الإضافي وإلقاء نظرة على خيارات JavaScript و CSS.
على سبيل المثال ، يمكنك السماح للمكون الإضافي بتضمين JS Inline وإزالة البرامج النصية المستبعدة افتراضيًا مثل seal.js أو jquery.js.
انقر فوق الزر "حفظ التغييرات ومسح ذاكرة التخزين المؤقت" لحفظ التغييرات ومسح ذاكرة التخزين المؤقت للمكون الإضافي.
بمجرد الانتهاء ، تابع وتحقق من موقع الويب الخاص بك مرة أخرى باستخدام أداة Page Speed Insights.
كيف يعمل؟
يحزم Autoptimize جميع ملفات JavaScript و CSS. بعد ذلك يخلق ملفات CSS و JavaScripts مصغرة ويقدم نسخًا مخبأة من موقع الويب الخاص بك على أساس متزامن أو مؤجل.
هذا يسمح لك بحل مشكلة الحجب الاداءات البرامج النصية وأنماط الحظر. ومع ذلك، يرجى الأخذ في الاعتبار أن هذا قد يؤثر أيضًا على الأداء أومظهر موقع الويب الخاص بك.
مساعدة
اعتمادًا على كيفية استخدام المكونات الإضافية وموضوع WordPress الخاص بك لجافا سكريبت و CSS ، قد يكون من الصعب جدًا حل جميع المشكلات تمامًا مع حجب ل عروض JavaScript و CSS.
بينما يمكن أن تساعد الأدوات المذكورة أعلاه ، قد تحتاج المكونات الإضافية الخاصة بك إلى نصوص برمجية معينة بمستوى أولوية مختلف لتعمل بشكل صحيح. في هذه الحالة ، قد تعطل الحلول المذكورة أعلاه وظائف هذه المكونات الإضافية ، أو قد تتصرف بشكل غير متوقع.
لا يزال بإمكان Google عرض بعض المشكلات لك مثل تحسين تسليم CSS. يتيح لك WP Rocket إصلاح ذلك عن طريق إضافة CSS المهمة يدويًا اللازمة لعرض سمة WordPress الخاصة بك بشكل مثالي.
ومع ذلك ، قد يكون من الصعب جدًا معرفة رمز CSS الذي ستحتاج إلى عرضه.
اكتشف أيضًا بعض السمات والإضافات الإضافية لبرنامج WordPress
يمكنك استخدام مكونات WordPress الأخرى لإضفاء مظهر حديث وتحسين قبضة مدونتك أو موقعك الإلكتروني.
نحن نقدم لك هنا بعض الإضافات WordPress المتميزة التي سوف تساعدك على القيام بذلك.
1. ووردبريس سرعة تحسين البرنامج المساعد
هل تكافح من أجل إدارة العديد من المكونات الإضافية لتحسين سرعة موقع الويب؟ هل أنت قلق من أنهم يعرقلون سرعة تنفيذ موقع الويب الخاص بك؟ إذن ، سيكون هذا المكون الإضافي WordPress هو الحل النهائي لجميع مخاوفك.
تم تصميم هذا المكون الإضافي ليوفر لك وظائف ما يقرب من 6-8 ملحقات WordPress مختلفة. عليك فقط تثبيته وتكوينه لرؤية تحسن ملحوظ في تحميل صفحاتك.
نود أن نشير إلى أن هذا ليس ملف البرنامج المساعد ذاكرة التخزين المؤقت أو CDN، ولكن النتيجة التي يقدمها مع ذلك رائعة. لا تتردد في تجربة هذا البرنامج المساعد WordPress لمعرفة ما هو قادر على ذلك.
تحميل | عرض | استضافة المواقع
2. Social Share & Locker Pro
تم تصميم المكون الإضافي Social Share & Locker Pro لمساعدة موقع الويب الخاص بك على الظهور بشكل أكبر على الشبكات الاجتماعية. بنقرات قليلة فقط ، يمكنك إما تعيين موضع الرموز الاجتماعية الخاصة بك أو قفل المحتوى الخاص بك عن طريق طلب المشاركة على إحدى الشبكات الاجتماعية التي تقدمها.
لديك سمات محددة مسبقًا من 10 وهذا يجب أن يغطي أكثر الرغبات شيوعًا. جميع مواضيعها هي شبكية العين وعجائب العمل.
بالإضافة إلى ذلك ، باستخدام Social Share & Locker Pro ، ستتمكن من عرض الاسم الكامل للشبكات الاجتماعية أو الرمز فقط. سيعتمد ذلك على التصميم الخاص بك أو المساحة المتاحة أو رغباتك.
تحميل | عرض | استضافة المواقع
3. ووردبرس] صور قوات الدفاع الشعبي Lightbox
WordPress PDF Lightbox هو ملف إضافة WordPress الذي يسمح لك بإنشاء عارضين لملفات PDF. عارض PDF هو عبارة عن مجموعة من الصور التي يمكن حفظها كملفات PDF.
باستخدام هذا الامتداد ، يمكنك إنشاء العديد من عارضات PDF كما تريد. لكل عارض ، يمكن للمسؤول تعيين بعض الخيارات مثل:
- صورة الغلاف: والتي ستتم إضافتها كصفحة أولى من ملف PDF الذي أنشأه المستخدم
- الحد الأقصى للصور لكل عارض
- صورة العلامة المائية: يتم تطبيقها على صفحات PDF
- الإرسال عبر البريد الإلكتروني: إذا تم تنشيط هذه الميزة ، أ نموذج الاتصال سيتم عرضه بعد معرض الصور مباشرة. من خلال هذا النموذج ، سيتمكن المستخدمون من إرسال ملف PDF الذي تم إنشاؤه إلى أي شخص بالبريد الإلكتروني.
تحميل | عرض | استضافة المواقع
الموارد الموصى بها
تعرف على الموارد الأخرى الموصى بها لمساعدتك في بناء وإدارة موقع الويب الخاص بك.
- 10 ووردبريس الإضافات لتحسين كبار المسئولين الاقتصاديين من موقع الويب الخاص بك
- 5 premium plugins WordPress لتحسين فئاتك
- 10 ملحقات WordPress لتحويل العملة
- 10 وورد الإضافات لدمج مشغل صوت في موقع على شبكة الانترنت
وفي الختام
هنا ! هذا كل شيء في هذا البرنامج التعليمي. نأمل أن تساعدك هذه المقالة في تعلم كيفية إصلاح حظر عرض JavaScript و CSS في WordPress. يمكنك أيضا أن ترى لدينا الدليل النهائي حول كيفية تسريع أداء WordPress للمبتدئين.
ومع ذلك ، ستتمكن أيضًا من الرجوع إلى موقعنا RESSOURCES، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق.
لا تتردد في شارك مع أصدقائك على الشبكات الاجتماعية المفضلة لديك. وإذا كان لديك أي اقتراحات أو ملاحظات ، فاتركها في قسمنا تعليقات.
...