إصلاح Google PageSpeed ​​تخلص من حظر جافا سكريبت و CSS في محتوى الجزء المرئي من الصفحة

حل حظر تجسيد جافا سكريبت و CSS

يقترح اختبار Google PageSpeed ​​[1] إزالة عرض جافا سكريبت و CSS في محتوى الجزء العلوي من الصفحة توفير ملفات JS و CSS لموقعك بعد تحميل HTML بالكامل - وبالتالي ، لا توقف تحميل HTML مؤقتًا لتنزيلها.

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

تخلص من حظر جافا سكريبت و CSS في محتوى الجزء المرئي من الصفحة: اعرض كيفية إصلاحه

1. لديك نظام خارجي لتحسين موقع الويب الخاص بك
   
2. استخدم CDN الذي سيؤدي جميع التحسينات الممكنة نيابة عنك ، بما في ذلك التحسينات الثلاثة التالية اللازمة لإصلاح التخلص من موارد حظر العرض:
   
3. تأجيل تحميل ملفات جافا سكريبت
   
4. قم بتحميل CSS بعد تحميل HTML
   
5. استخدم مكون WordPress الإضافي
   

هناك الكثير من التحسينات اللازمة لإصلاح إزالة موارد حظر العرض وقد يكون من الصعب تنفيذها بنفسك - بالإضافة إلى ذلك ، سيتعين عليك البحث باستمرار عن الاختبارات الجديدة المضمنة في Chrome LightHouse و Google PageSpeed ​​من بين اختبارات  سرعة الصفحة   الأخرى.

لا يوجد حل حالي للتخلص من موارد حظر العرض في كود htaccess لأن المشكلة مرتبطة بـ DOM ، أي محتوى موقع الويب ، وترتيب تحميل الموارد المضمنة ، مثل Javascript و CSS ، ولكن ليس فقط. لا يمكن تشغيل هذه في Htaccess ، ولكن فقط في محتوى HTML DOM.

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

Did you know that you can even have all these steps executed automatically for you by using an external  مسرع سرعة الموقع   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

تأجيل تحميل ملفات جافا سكريبت

لتأجيل تحميل ملفات JS [2] ، يمكنك إما إضافة التزامن أو تأجيل التعليمات إلى روابط النصوص البرمجية. لا يضمن Async تحميلها في نفس التسلسل - لذلك ، إذا كان لديك العديد من البرامج النصية التي يجب تشغيلها واحدة تلو الأخرى ، فمن المفضل أن يتم تأجيل التسلسل:

تحميل CSS بعد تحميل HTML

لكي يتم تحميل CSS بعد إرسال HTML بالكامل ، تقترح Google [3] هذه الشفرة المراد إضافتها في نهاية HTML ، على سبيل المثال بعد علامة إغلاق التذييل وقبل علامة إغلاق النص:

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

اجتياز اختبار سرعة موقع Google!

سمح لي ذلك بتمرير اختبار Google PageSpeed ​​[1] إزالة حظر جافا سكريبت و CSS في محتوى الجزء العلوي من الصفحة (جنبًا إلى جنب مع التخزين المؤقت للمتصفح المستقل [4]) على موقع الويب ، صعودًا من نتيجة 51 على الجوّال ( الشكل 1) إلى 72 (الشكل 2) ، والصعود من 59 (الشكل 3) إلى 79 على سطح المكتب (الشكل 4).

كيفية القضاء على تجميد الموارد في وورد

للقضاء على موارد حظر العرض في WordPress ، من الضروري تثبيت مكون إضافي مثل JetPack.

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

إنشاء موقع الويب الرئيسي: التسجيل الآن!

قم بتحويل تواجدك الرقمي من خلال دورة إنشاء موقع الويب الشامل - ابدأ رحلتك لتصبح خبيرًا على الويب اليوم!

التسجيل هنا

سيؤدي ذلك إلى القضاء على موارد حظر التجسيد في WordPress وتحميل الصفحات بشكل أسرع عن طريق السماح لـ JetPack بتحسين صورك وتقديم صورك وملفاتك الثابتة (مثل CSS و JavaScript) من شبكة الخوادم العالمية الخاصة بهم.

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

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

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

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

بمجرد أن تحتوي موارد الحظر التقديمي على تعليمات لتحميلها بعد المحتوى الرئيسي، مما يعني أن HTML Dom، ستكسب بالفعل الكثير من النقاط في اختبار منارة Google، أو اختبار رؤى سرعة الصفحة، أو Google Core Web Vibals.

امتلاك نظام خارجي لتحسين موقعك على الويب

هل تعلم أنه يمكنك بالفعل حل جميع مشكلات Google PageSpeed ​​نيابة عنك ، دون بذل الكثير من الجهد من موقعك - ​​باستثناء التسجيل للحصول على نسخة تجريبية مجانية وتغيير DNS الخاص بك؟

باستخدام تقنية Ezzo Site Speed ​​Accelerator ، سيتم حل جميع مشكلات Google PageSpeed ​​المعتادة بواسطة نظامها ، والذي سيكون الوسيط بين موقعك على الويب والزوار. سيقومون بتحسين صفحة الويب لك قبل عرضها على زائرك.

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

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

الأسئلة المتداولة

كيفية القضاء على جافا سكريبت العزلة و CSS في المحتوى فوق التوقيت؟

للتخلص من جافا سكريبت و CSS من أجل المحتوى فوق الأقيط ، يجب عليك التأكد من تحميل ملفات JS و CSS لموقعك بعد تحميل HTML بالكامل. هذا يعني عدم توقف عملية تحميل HTML لتنزيل هذه الملفات. يمكنك تأجيل ملفات JavaScript مع السمة Async أو المؤجلة ، وللـ CSS ، يمكنك استخدام رمز معين لتحميله بعد HTML. يمكن لنظام التحسين الخارجي مثل Ezoic التعامل مع هذا تلقائيًا.

كيف يمكن لمطوري الويب أن يعالج توصية Google PageSpeed ​​للقضاء على جافا سكريبت حظر العروض؟

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

درجة منارة الكروم المثالية: ماذا يحدث؟