Supprimer le JavaScript bloquant l'affichage

Cette règle se déclenche lorsque PageSpeed Insights détecte que votre code 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 de pouvoir afficher une page, le navigateur doit créer l'arborescence DOM en analysant le balisage HTML. Au cours de ce processus, chaque fois que l'analyseur rencontre un script, il doit l'arrêter et l'exécuter avant de pouvoir continuer à analyser le code HTML. Dans le cas d'un script externe, l'analyseur est également forcé d'attendre que la ressource soit téléchargée, ce qui peut entraîner un ou plusieurs allers-retours sur le réseau et retarder le premier affichage de la page. Consultez la section Ajouter de l'interactivité avec JavaScript pour en savoir plus sur l'impact de JavaScript sur le chemin de rendu critique.

Recommandations

Vous devez éviter et minimiser l'utilisation de JavaScript bloquant, en particulier les scripts externes qui doivent être extraits avant de pouvoir être exécutés. Les scripts nécessaires à l'affichage du contenu de la page peuvent être intégrés pour éviter des requêtes réseau supplémentaires. Toutefois, le contenu intégré doit être petit et s'exécuter rapidement pour offrir de bonnes performances. Les scripts qui ne sont pas essentiels à l'affichage initial doivent être rendus asynchrones ou différés jusqu'au premier affichage. N'oubliez pas que pour améliorer le temps de chargement, vous devez également optimiser la diffusion CSS.

Code JavaScript intégré

Les scripts de blocage externes obligent le navigateur à attendre que le code JavaScript soit récupéré, ce qui peut ajouter un ou plusieurs allers-retours sur le réseau avant que la page puisse s'afficher. Si les scripts externes sont petits, vous pouvez intégrer leur contenu directement dans le document HTML et éviter la latence des requêtes réseau. Par exemple, si le document HTML ressemble à ceci : 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
Et la ressource small.js se présente comme suit : 
  /* contents of a small JavaScript file */
Vous pouvez ensuite intégrer le script comme suit : 
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
Intégrer le contenu du script élimine la requête externe pour small.js et permet au navigateur d'accélérer le premier affichage. Toutefois, notez que l'intégration augmente également la taille du document HTML et que le même contenu de script peut avoir besoin d'être intégré sur plusieurs pages. Par conséquent, vous ne devez intégrer que les petits scripts pour obtenir des performances optimales.

Rendre JavaScript asynchrone

Par défaut, JavaScript bloque la construction du DOM et retarde donc le délai de premier affichage. Pour empêcher JavaScript de bloquer l'analyseur, nous vous recommandons d'utiliser l'attribut HTML async sur les scripts externes. Par exemple : 
<script async src="my.js">
Pour en savoir plus sur les scripts asynchrones, consultez la section Blocage de l'analyseur et JavaScript asynchrone. Notez que l'exécution des scripts asynchrones dans l'ordre spécifié n'est pas garantie et ne doit pas utiliser document.write. Les scripts qui dépendent de l'ordre d'exécution, ou qui doivent accéder au DOM ou CSSOM de la page ou le modifier, doivent être réécrits pour tenir compte de ces contraintes.

Reporter le chargement d'un fichier JavaScript

Le chargement et l'exécution des scripts qui ne sont pas nécessaires au rendu initial de la page peuvent être reportés jusqu'à la fin du chargement initial ou du chargement d'autres parties critiques de la page. Cela peut contribuer à réduire les conflits de ressources et à améliorer les performances.

Questions fréquentes

Que dois-je faire si j'utilise une bibliothèque JavaScript telle que jQuery ?
De nombreuses bibliothèques JavaScript, telles que JQuery, permettent d'améliorer la page afin d'y ajouter de l'interactivité, des animations et d'autres effets. Cependant, un grand nombre de ces comportements peuvent être ajoutés en toute sécurité après l'affichage du contenu au-dessus de la ligne de flottaison. Envisagez de rendre ce JavaScript asynchrone ou différez son chargement.
Que se passe-t-il si j'utilise un framework JavaScript pour construire la page ?
Si le contenu de la page est construit avec du code JavaScript côté client, vous devez essayer d'intégrer les modules JavaScript concernés pour éviter des allers-retours supplémentaires sur le réseau. De même, l'utilisation du rendu côté serveur peut améliorer considérablement les performances de chargement de la première page: affichez les modèles JavaScript sur le serveur afin d'accélérer le premier affichage, puis utilisez les modèles côté client une fois la page chargée. Pour en savoir plus sur l'affichage côté serveur, regardez la vidéo suivante : http://youtu.be/VKTWdaupft0?t=14m28s.

Commentaires

Cette page vous a-t-elle été utile ?