Supprimer le JavaScript bloquant l'affichage

<ph type="x-smartling-placeholder"> Cette règle se déclenche lorsque les analyses PageSpeed Insights indiquent que votre code HTML fait référence à un 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 s'arrêter et l'exécuter. avant de pouvoir poursuivre l'analyse du code HTML. Dans le cas d'un script externe, l'analyseur est également forcé d'attendre le téléchargement de la ressource, ce qui peut entraîner un ou plusieurs allers-retours réseau et retarder le premier affichage de la page. Voir <ph type="x-smartling-placeholder"></ph> Ajout de l'interactivité avec JavaScript pour en savoir plus sur la façon dont JavaScript affecte les le chemin de rendu.

Recommandations

Vous devez éviter et minimiser l'utilisation du blocage de JavaScript, en particulier les scripts externes qui doivent être récupérées avant de pouvoir être exécutées. Scripts nécessaires à l'affichage du contenu de la page peuvent être intégrées pour éviter les demandes réseau supplémentaires, mais le contenu intégré doit être court et doivent s'exécuter rapidement pour offrir de bonnes performances. Scripts qui ne sont pas essentiels à la configuration initiale le rendu doit être asynchrone ou différé jusqu'au premier rendu. N'oubliez pas que pour améliorer le temps de chargement, vous devez également optimiser la diffusion des CSS.

Intégrer le code JavaScript

Les scripts bloquants externes obligent le navigateur à attendre la récupération du code JavaScript, ce qui peut ajouter un ou plusieurs allers-retours réseau avant que la page puisse s'afficher. Si l'adresse e-mail les scripts sont peu volumineux, 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 à ce qui suit : 
<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>
L'intégration du contenu du script élimine la requête externe pour small.js et permet au navigateur pour accélérer le premier rendu. Notez toutefois que l'intégration augmente la taille du document HTML et que le même contenu de script devra peut-être être intégré dans plusieurs pages. Par conséquent, vous ne devez intégrer que de petits scripts afin d'optimiser les performances.

Rendre JavaScript asynchrone

Par défaut, JavaScript bloque la construction DOM et retarde donc le délai de premier rendu. À empêcher JavaScript de bloquer l'analyseur, nous vous recommandons d'utiliser le code HTML async. sur des scripts externes. Exemple : 
<script async src="my.js">
Voir Blocage de l'analyseur et code JavaScript asynchrone pour en savoir plus sur les scripts asynchrones. Notez qu'il n'est pas garanti que les scripts asynchrones s'exécutent dans l'ordre spécifié et qu'ils ne doivent pas utiliser document.write Scripts qui dépendent de l'ordre d'exécution, ou qui doivent accéder à un élément ou le modifier il peut être nécessaire de réécrire le DOM ou le CSSOM de la page pour tenir compte de ces contraintes.

Reporter le chargement d'un fichier JavaScript

Le chargement et l'exécution de scripts qui ne sont pas nécessaires à l'affichage initial de la page reporté jusqu'à la fin de l'affichage initial ou d'autres parties essentielles de la page chargement en cours. 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, comme JQuery, sont utilisées pour améliorer la page à ajouter de l'interactivité, des animations et d'autres effets. Cependant, nombre d'entre eux peuvent être ajoutés en toute sécurité après l'affichage du contenu au-dessus de la ligne de flottaison. Envisagez de rendre le code 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 par JavaScript côté client, vous devez envisager d'intégrer les modules JavaScript appropriés pour éviter les allers-retours réseau. De même, l'affichage côté serveur peut considérablement améliorer les performances de chargement de la première page: afficher les modèles JavaScript sur le serveur pour diffuser un premier rendu rapide, puis utilisez les modèles côté client une fois la page chargée. Pour plus plus d'informations sur l'affichage côté serveur, reportez-vous à la section http://youtu.be/VKTWdaupft0?t=14m28s.

Commentaires

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

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">