Charger efficacement le code JavaScript tiers

Évitez les pièges courants liés à l'utilisation de scripts tiers pour améliorer les temps de chargement et l'expérience utilisateur.

Si un script tiers ralentit le chargement de la page, deux options s'offrent à vous pour améliorer les performances:

  • Supprimez-le s'il n'apporte pas de valeur ajoutée à votre site.

  • Optimisez le processus de chargement.

Cet article explique comment optimiser le processus de chargement des scripts tiers à l'aide des techniques suivantes:

  1. Utiliser l'attribut async ou defer dans les balises <script>

  2. Établir les premières connexions aux origines requises

  3. Chargement différé

  4. Optimiser la diffusion de scripts tiers

Utilisez async ou defer.

Étant donné que les scripts synchrones retardent la construction et l'affichage DOM, vous devez toujours charger les scripts tiers de manière asynchrone, sauf s'ils doivent être exécutés pour que la page puisse s'afficher.

Les attributs async et defer indiquent au navigateur qu'il peut continuer à analyser le code HTML pendant le chargement du script en arrière-plan, puis exécuter le script après son chargement. Ainsi, les téléchargements de scripts n'entravent pas la construction DOM ni l'affichage de la page. L'utilisateur peut ainsi voir la page avant la fin du chargement de tous les scripts.

<script async src="script.js">

<script defer src="script.js">

La différence entre async et defer réside dans le début de l'exécution des scripts.

async

Les scripts avec l'attribut async s'exécutent à la première opportunité, une fois leur téléchargement terminé et avant l'événement load de la fenêtre. Par conséquent, il est possible (et probablement) que les scripts async ne soient pas exécutés dans l'ordre dans lequel ils apparaissent dans le code HTML. Cela signifie également qu'ils peuvent interrompre la compilation DOM si le téléchargement se termine alors que l'analyseur est encore en cours d'exécution.

Schéma du script de blocage de l&#39;analyseur avec l&#39;attribut &quot;async&quot;

defer

Les scripts avec l'attribut defer s'exécutent une fois l'analyse HTML terminée, mais avant l'événement DOMContentLoaded. defer garantit que les scripts seront exécutés dans l'ordre dans lequel ils apparaissent dans le code HTML et ne bloqueront pas l'analyseur.

Schéma du flux de l&#39;analyseur avec un script avec l&#39;attribut &quot;defer&quot;

  • Utilisez async s'il est important que le script s'exécute plus tôt dans le processus de chargement.

  • Utilisez defer pour les ressources moins critiques. Un lecteur vidéo en dessous de la ligne de flottaison, par exemple.

L'utilisation de ces attributs peut considérablement accélérer le chargement des pages. Par exemple, Telegraph a récemment différé l'ensemble de ses scripts, y compris ceux concernant les annonces et les données analytiques, et a amélioré le temps de chargement des annonces de quatre secondes en moyenne.

Établir les premières connexions aux origines requises

Vous pouvez gagner de 100 à 500 ms en établissant des connexions précoces avec des origines tierces importantes.

Deux types de <link> peuvent vous aider dans ce cas:

  • preconnect

  • dns-prefetch

preconnect

<link rel="preconnect"> informe le navigateur que votre page a l'intention d'établir une connexion avec une autre origine et que le processus doit commencer dès que possible. Lorsque la requête d'une ressource à partir de l'origine préconnectée est envoyée, le téléchargement démarre immédiatement.

<link rel="preconnect" href="https://cdn.example.com">

dns-prefetch

<link rel="dns-prefetch> gère un petit sous-ensemble de ce qui est géré par <link rel="preconnect">. L'établissement d'une connexion implique la résolution DNS, le handshake TCP et, pour les origines sécurisées, les négociations TLS. dns-prefetch indique au navigateur de résoudre le DNS d'un domaine spécifique uniquement avant qu'il n'ait été explicitement appelé.

Il est préférable d'utiliser la suggestion preconnect uniquement pour les connexions les plus critiques. Pour les domaines tiers moins critiques, utilisez <link rel=dns-prefetch>.

<link rel="dns-prefetch" href="http://example.com">

La compatibilité du navigateur avec dns-prefetch est légèrement différente de la prise en charge de preconnect. dns-prefetch peut donc servir de solution de remplacement pour les navigateurs qui ne sont pas compatibles avec preconnect. Utilisez des balises de lien distinctes pour une implémentation sécurisée:

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

Chargement différé des ressources tierces

Les ressources tierces intégrées peuvent contribuer grandement à la lenteur de la page lorsqu'elles sont mal conçues. Si elles ne sont pas critiques ou si elles se trouvent en dessous de la ligne de flottaison (c'est-à-dire si les utilisateurs doivent faire défiler la page pour les voir), le chargement différé est un bon moyen d'améliorer les métriques de vitesse et de peinture des pages. De cette façon, les utilisateurs accéderont plus rapidement au contenu de la page principale et profiteront d'une meilleure expérience.

Schéma d&#39;une page Web affichée sur un appareil mobile avec du contenu à faire défiler au-delà de l&#39;écran. Le contenu qui se trouve en dessous de la ligne de flottaison est non saturé, car il n&#39;est pas encore chargé.

Une approche efficace consiste à effectuer un chargement différé du contenu tiers après le chargement du contenu de la page principale. Les annonces sont un bon candidat pour cette approche.

Les annonces sont une source de revenus importante pour de nombreux sites, mais les internautes viennent pour le contenu. Vous pouvez augmenter le pourcentage de visibilité globale d'une annonce en chargeant les annonces de manière différée et en diffusant le contenu principal plus rapidement. Par exemple, MediaVine est passé aux annonces à chargement différé et a constaté une amélioration de 200% de la vitesse de chargement des pages. La documentation officielle de DoubleClick fournit des conseils sur le chargement différé des annonces.

Une autre approche consiste à charger du contenu tiers uniquement lorsque les utilisateurs font défiler la page jusqu'à cette section.

Intersection Observer est une API de navigateur qui détecte efficacement les entrées ou sorties d'un élément dans la fenêtre d'affichage du navigateur. Elle permet de mettre en œuvre cette technique. Lazysizes est une bibliothèque JavaScript populaire pour les images au chargement différé et iframes. Elle est compatible avec les intégrations et les widgets YouTube. Il est également compatible avec IntersectionObserver.

L'utilisation de l'attribut loading pour les images et les iFrames à chargement différé constitue une excellente alternative aux techniques JavaScript. Il est depuis peu disponible dans Chrome 76.

Optimiser la diffusion de scripts tiers

Hébergement CDN tiers

Les fournisseurs tiers fournissent souvent les URL des fichiers JavaScript qu'ils hébergent, généralement sur un réseau de diffusion de contenu (CDN). Grâce à cette approche, vous pouvez commencer rapidement (il vous suffit de copier et coller l'URL) et vous n'avez pas à effectuer de maintenance. Le fournisseur tiers gère la configuration du serveur et les mises à jour des scripts.

Toutefois, comme ils ne se trouvent pas sur la même origine que vos autres ressources, le chargement de fichiers à partir d'un CDN public entraîne des frais de réseau. Le navigateur doit effectuer une résolution DNS, établir une nouvelle connexion HTTP et, sur les origines sécurisées, effectuer un handshake SSL avec le serveur du fournisseur.

Lorsque vous utilisez des fichiers provenant de serveurs tiers, vous contrôlez rarement la mise en cache. S'appuyer sur la stratégie de mise en cache de quelqu'un d'autre peut entraîner une nouvelle récupération inutile des scripts sur le réseau.

Scripts tiers auto-hébergés

L'auto-hébergement de scripts tiers est une option qui vous permet de mieux contrôler le processus de chargement d'un script. L'auto-hébergement vous permet de:

  • Réduisez le temps de résolution DNS et d'aller-retour.
  • Amélioration des en-têtes de mise en cache HTTP.
  • Utilisez HTTP/2 ou la nouvelle version HTTP/3.

Par exemple, Casper a gagné 1,7 seconde de temps de chargement en hébergeant lui-même un script de test A/B.

L'auto-hébergement présente toutefois un inconvénient majeur: les scripts peuvent devenir obsolètes et ne seront pas mis à jour automatiquement en cas de modification de l'API ou de correctif de sécurité.

Utiliser des service workers pour mettre en cache les scripts de serveurs tiers

L'utilisation de service workers pour mettre en cache les scripts des serveurs tiers constitue une alternative à l'auto-hébergement qui vous permet de mieux contrôler la mise en cache tout en bénéficiant des avantages du CDN tiers. Cela vous permet de contrôler la fréquence à laquelle les scripts sont récupérés à nouveau sur le réseau et de créer une stratégie de chargement qui limite les demandes de ressources tierces non essentielles jusqu'à ce que la page atteigne un moment utilisateur clé. Dans ce cas, l'utilisation de preconnect pour établir des connexions précoces peut également réduire les coûts de réseau dans une certaine mesure.