إزالة وحدات جافا سكريبت المخصصة لحظر العرض
يتم تشغيل هذه القاعدة عندما يكتشف PageSpeed Insights أن ملف HTML لديك يشير إلى ملف جافا سكريبت خارجي للحظر في الجزء العلوي من الصفحة عند التحميل.
نظرة عامة
قبل أن يتمكن المتصفح من عرض صفحة للمستخدم، يجب أن يحلل الصفحة. وإذا واجه المتصفح نصًا برمجيًا خارجيًا للحظر أثناء التحليل، يجب أن يتوقف وينزِّل جافا سكريبت. وفي كل مرة ينفذ ذلك، فإنه يضيف جولة ذهاب وإياب، مما يتسبب في تأخير العرض الأول للصفحة.التوصيات
يجب تضمين كود جافا سكريبت اللازم لعرض منطقة أعلى الصفحة، ويجب تأجيل كود جافا سكريبت المطلوب لإضافة وظائف إضافية إلى الصفحة بحيث يظهر بعد عرض محتوى الجزء العلوي من الصفحة. تجدر الإشارة إلى أنه حتى يساعد ذلك في تحسين زمن التحميل، يجب أيضًا تحسين عرض CSS.تضمين ملف جافا سكريبت صغير
إذا كانت النصوص البرمجية الخارجية صغيرة، يمكنك تضمينها مباشرة في مستند HTML. ويتيح تضمين ملفات صغيرة بهذه الطريقة للمتصفح إمكانية متابعة عرض الصفحة. على سبيل المثال، إذا كان مستند HTML يظهر على النحو التالي:
<html> <head> <script type="text/javascript" src="small.js"></script> </head> <body> <div> Hello, world! </div> </body> </html>
والمورد
small.js يظهر على النحو التالي:/* contents of a small JavaScript file */
فيمكنك تضمين النص البرمجي كما يلي:
<html> <head> <script type="text/javascript"> /* contents of a small JavaScript file */ </script> </head> <body> <div> Hello, world! </div> </body> </html>
وسيؤدي هذا إلى تقليل الطلب الخارجي لـ
small.js من خلال وضعه مضمَّنًا في مستند HTML.تأجيل تحميل جافا سكريبت
لمنع جافا سكريبت من تحميل صفحة الحظر، نوصي باستخدام سمة HTML غير المتزامنة عند تحميل جافا سكريبت. على سبيل المثال:
<script async src="my.js">
إذا كانت موارد جافا سكريبت تستخدم document.write، فلن يكون آمنًا استخدام التحميل غير المتزامن. ونحن نوصي بإعادة كتابة النصوص البرمجية التي تستخدم document.write لاستخدام أسلوب مختلف.
علاوة على ذلك، عند تحميل جافا سكريبت بشكل غير متزامن، وإذا كانت الصفحة تحمِّل النصوص البرمجية التي تعتمد على بعضها، فيجب توخي الحذر للتأكد من أن التطبيق يحمِّل نصوصًا برمجية بترتيب التبعية السليم.
الأسئلة الشائعة
- ماذا لو استخدمت مكتبة جافا سكريبت مثل jQuery؟
- يتم استخدام العديد من مكتبات جافا سكريبت، مثل JQuery في تحسين الصفحة لإضافة نسبة تفاعل وحركة وغير ذلك من التأثيرات. ولكن يمكن إضافة العديد من هذه الإجراءات بأمان بعد أن يتم عرض محتوى الجزء العلوي من الصفحة عند التحميل. يمكنك فحص حركة التنفيذ وتحميل محتوى جافا سكريبت هذا حتى بعد أن يتم تحميل الصفحة.
- ماذا لو استخدمت إطار عمل جافا سكريبت لتكوين الصفحة؟
- إذا تم تكوين محتوى الصفحة باستخدام جافا سكريبت من طرف العميل، فسيتعين عليك فحص عملية تضمين وحدات جافا سكريبت ذات صلة لتجنب المزيد من جولات الشبكة ذهابًا وإيابًا. وبالمثل، يمكن أن يؤدي تحسين العرض على الجهاز الخادم إلى تحسن كبير في أداء تحميل الصفحة للمرة الأولى: لعرض نماذج جافا سكريبت على الخادم، وتضمين النتائج في HTML واستخدام النمذجة من طرف العميل بمجرد تحميل التطبيق. للحصول على مزيد من المعلومات حول العرض على الجهاز الخادم، يمكن الاطلاع على http://youtu.be/VKTWdaupft0?t=14m28s.
إرسال تعليق