Supprimer les fichiers JavaScript qui bloquent l'affichage

Cette règle se déclenche lorsque les analyses PageSpeed Insights indiquent que votre document HTML fait référence à un fichier JavaScript externe bloquant dans la partie au-dessus de la ligne de flottaison de votre page.

Présentation

Avant qu'une page puisse s'afficher, elle doit être analysée par le navigateur. Si un script externe bloquant est reconnu lors de cette analyse, cela provoque l'arrêt du navigateur et le téléchargement de ce fichier JavaScript. Chaque fois que cette opération est effectuée, cela ajoute un aller-retour du réseau complet et ralentit le temps nécessaire au premier affichage de la page.

Recommandations

Le fichier JavaScript nécessaire à l'affichage de la partie au-dessus de la ligne de flottaison doit être intégré, et celui nécessaire à l'ajout de fonctionnalités supplémentaires à la page doit être reporté jusqu'à ce que le contenu au-dessus de la ligne de flottaison soit diffusé. Notez que pour que cela améliore vos temps de chargement, vous devez également optimiser la diffusion de feuilles de style CSS.

Intégrer les ressources JavaScript peu volumineuses

Si les scripts externes sont peu volumineux, vous pouvez les inclure directement dans le document HTML. Intégrer de petits fichiers de cette manière permet au navigateur d'exécuter l'affichage de la page. Par exemple, si le document HTML ressemble à ce qui suit :

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Et que la ressource small.js est la suivante :

  /* contents of a small JavaScript file */

Vous pouvez alors intégrer le script comme indiqué ci-dessous :

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Ceci permet d'éliminer la requête externe pour small.js en l'intégrant au document HTML.

Reporter le chargement d'un fichier JavaScript

Pour empêcher un script JavaScript de bloquer le chargement d'une page, nous vous recommandons d'utiliser l'attribut HTML "async" lors du chargement du fichier JavaScript. Par exemple :

<script async src="my.js">

Si vos ressources JavaScript utilisent "document.write", il est préférable de ne pas recourir à un chargement asynchrone. Nous vous recommandons de modifier les scripts qui utilisent "document.write" afin d'utiliser une technique différente.

De plus, lors du chargement asynchrone du fichier JavaScript, si votre page charge des scripts qui dépendent les uns des autres, vous devez faire particulièrement attention à ce que votre application charge les scripts dans le bon ordre.

FAQ

Que dois-je faire si j'utilise une bibliothèque JavaScript telle que jQuery ?
De nombreuses bibliothèques JavaScript, telles que jQuery, servent à apporter des améliorations à la page en y ajoutant de l'interactivité, des animations ou d'autres effets. Cependant, nombre de ces comportements peuvent être ajoutés sans problème après l'affichage du contenu au-dessus de la ligne de flottaison. Essayez de reporter l'exécution et le chargement de ce fichier JavaScript jusqu'à ce que la page soit chargée.
Que dois-je faire si j'utilise un framework JavaScript pour construire la page ?
Si le contenu de la page est construit par un fichier JavaScript client, vous devez essayer d'intégrer les modules JavaScript concernés pour éviter d'autres allers-retours du réseau. De la même manière, tirez profit de l'affichage côté serveur pour accélérer le premier chargement de page de manière significative. Affichez les modèles JS sur le serveur, intégrez les résultats au document HTML, puis utilisez une modélisation côté client une fois l'application chargée. Pour en savoir plus sur l'affichage côté serveur, regardez la vidéo suivante : http://youtu.be/VKTWdaupft0?t=14m28s.