إزالة JavaScript لحظر العرض

يتم تشغيل هذه القاعدة عندما يكتشف PageSpeed Insights أن HTML يشير إلى قاعدة حظر ملف JavaScript خارجي في الجزء المرئي من الصفحة.

نظرة عامة

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

اقتراحات

يجب تجنب والحدّ من استخدام حظر JavaScript، لا سيما النصوص البرمجية الخارجية التي يجب استرجاعها قبل تنفيذها. النصوص البرمجية اللازمة لعرض محتوى الصفحة يمكن تضمينه لتجنب طلبات الشبكة الإضافية، ولكن يجب أن يكون المحتوى المضمّن صغيرًا ويجب تنفيذه بسرعة لتقديم أداء جيد. النصوص البرمجية غير المهمة في البداية يجب أن يكون العرض غير متزامن أو يتم تأجيله حتى ما بعد العرض الأول. يُرجى التنبّه إلى ما يلي: لتحسين مدّة التحميل، يجب أيضًا تحسين عرض CSS.

JavaScript مضمَّن

تجبر النصوص البرمجية للحظر الخارجية المتصفح على الانتظار حتى يتم جلب JavaScript، وهو ما قد يضيف رحلة ذهاب وعودة أو أكثر للشبكة قبل التمكن من عرض الصفحة. إذا كانت القيمة الخارجية تكون النصوص البرمجية صغيرة، فيمكنك تضمين محتوياتها مباشرة في مستند 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 وأنه قد يلزم تضمين محتوى النص البرمجي نفسه عبر صفحات متعددة. ونتيجةً لذلك، يجب تضمين نصوص برمجية صغيرة فقط لتقديم أفضل أداء.

جعل JavaScript غير متزامن

يحظر JavaScript إنشاء DOM تلقائيًا، وبالتالي يؤخر الوقت اللازم للعرض لأول مرة. إلى منع JavaScript من حظر المحلل اللغوي الذي ننصح باستخدام HTML async على النصوص البرمجية الخارجية. مثل: 
<script async src="my.js">
راجع مقارنة بين حظر المحلل اللغوي ولغة JavaScript غير المتزامنة لمعرفة المزيد من المعلومات عن النصوص البرمجية غير المتزامنة تجدر الإشارة إلى أنّه ليس من المضمون تنفيذ النصوص البرمجية غير المتزامنة بالترتيب المحدّد ويجب عدم استخدامها document.write النصوص البرمجية التي تعتمد على أمر التنفيذ أو التي تحتاج إلى الوصول أو التعديل وقد يلزم إعادة كتابة DOM أو CSSOM للصفحة لمراعاة هذه القيود.

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

قد يكون تحميل وتنفيذ النصوص البرمجية غير الضرورية للعرض الأولي للصفحة إلى ما بعد العرض الأولي أو الأجزاء المهمة الأخرى من الصفحة قيد التحميل. ويمكن أن يساعد ذلك في الحدّ من التعارض بين الموارد وتحسين الأداء.

الأسئلة الشائعة

ماذا لو استخدمت مكتبة جافا سكريبت مثل jQuery؟
يتم استخدام الكثير من مكتبات JavaScript، مثل JQuery في تحسين الصفحة وإضافتها. والتفاعل الإضافي والرسوم المتحركة والتأثيرات الأخرى. ومع ذلك، فإن العديد من هذه يمكن إضافة السلوكيات بأمان بعد عرض محتوى الجزء المرئي من الصفحة. تحقق من جعل لغة JavaScript غير متزامنة أو أجِّل تحميلها.
ماذا لو كنت أستخدم إطار عمل JavaScript لإنشاء الصفحة؟
إذا تم إنشاء محتوى الصفحة باستخدام JavaScript من جهة العميل، ينبغي لك التحقق من تضمين وحدات جافا سكريبت ذات الصلة لتجنب ذهابًا وإيابًا للشبكة. ويمكن أن يؤدي تعزيز العرض من جهة الخادم إلى تحسين أداء تحميل الصفحة الأولى: عرض نماذج JavaScript على الخادم لعرض العرض السريع أولاً، ثم استخدام النماذج من جهة العميل بمجرد تحميل الصفحة. لمزيد من المعلومات، معلومات حول العرض على جهة الخادم، راجع http://youtu.be/VKTWdaupft0?t=14m28s.

ملاحظات

هل كان المحتوى في هذه الصفحة مفيدًا؟