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

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

نظرة عامة

قبل أن يتمكن المتصفح من عرض صفحة، يجب عليه إنشاء شجرة DOM عن طريق تحليل ترميز 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 ذات الصلة لتجنُّب أي جولات ذهاب وعودة إضافية للشبكة. وبالمثل، يمكن أن تؤدي الاستفادة من العرض من جهة الخادم إلى تحسين أداء تحميل الصفحة الأولى بشكل ملحوظ: يمكنك عرض نماذج JavaScript على الخادم لتقديم عرض سريع أولاً، ثم استخدام النماذج من جهة العميل بعد تحميل الصفحة. للحصول على مزيد من المعلومات حول العرض من جهة الخادم، يُرجى الاطّلاع على http://youtu.be/VKTWdaupft0?t=14m28s.

إضافة ملاحظات

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