Charger efficacement le code JavaScript tiers

Milica Mihajlija

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

• Supprimez-le s'il n'apporte aucune 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 :

• Utiliser l'attribut async ou defer sur les balises <script>
• Établir les premières connexions aux origines requises
• Chargement différé
• Optimiser la diffusion de scripts tiers

Utilisez async ou defer.

Étant donné que les scripts synchrones retardent la construction et l'affichage du DOM, vous devez toujours charger des scripts tiers de manière asynchrone, sauf si le script doit être exécuté avant que la page puisse être affichée.

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 une fois qu'il est chargé. De cette façon, les téléchargements de scripts ne bloquent pas la construction DOM ni l'affichage de la page, ce qui permet à l'utilisateur de 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 les attributs async et defer réside dans le moment où le navigateur exécute les scripts.

async

Les scripts comportant l'attribut async s'exécutent à la première occasion après la fin du téléchargement et avant l'événement load de la fenêtre. Cela signifie qu'il est possible (et probable) que les scripts async ne s'exécutent pas dans l'ordre dans lequel ils apparaissent dans le code HTML. Cela signifie également qu'ils peuvent interrompre la création du DOM s'ils terminent le téléchargement alors que l'analyseur est toujours au travail.

defer

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

• Utilisez async si vous souhaitez que le script s'exécute plus tôt dans le processus de chargement.
• Utilisez defer pour les ressources moins critiques, telles qu'un lecteur vidéo en dessous de la ligne de flottaison.

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

Établissez des connexions précoces aux origines requises

Vous pouvez économiser entre 100 et 500 ms en établissant des connexions anticipées avec des origines tierces importantes.

Deux types de <link>, preconnect et dns-prefetch, peuvent vous aider :

preconnect

<link rel="preconnect"> indique au navigateur que votre page souhaite établir une connexion avec une autre origine et que vous souhaitez que le processus démarre dès que possible. Lorsque le navigateur demande une ressource à l'origine préconnectée, le téléchargement commence immédiatement.

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

dns-prefetch

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

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

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

La compatibilité des navigateurs avec dns-prefetch est légèrement différente de la compatibilité avec preconnect. dns-prefetch peut donc servir de solution de secours pour les navigateurs qui ne sont pas compatibles avec preconnect. Utilisez des balises de lien distinctes pour sécuriser l'implémentation:

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

Charger de façon différée des ressources tierces

Les ressources tierces intégrées peuvent ralentir considérablement le chargement de la page si elles sont mal conçues. S'ils ne sont pas critiques ou s'ils 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 la vitesse de chargement des pages et les métriques sur le rendu. De cette façon, les utilisateurs accèdent plus rapidement au contenu de la page principale et bénéficient d'une meilleure expérience.

Une approche efficace consiste à charger de manière différée le contenu tiers après le chargement du contenu de la page principale. Les annonces se prêtent bien à cette approche.

Les annonces constituent une importante source de revenus pour de nombreux sites, mais les utilisateurs viennent pour le contenu. En diffusant les annonces à chargement différé et en diffusant le contenu principal plus rapidement, vous pouvez augmenter le pourcentage de visibilité globale d'une annonce. 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. Google Ad Manager fournit de la documentation sur le chargement différé des annonces.

Vous pouvez également configurer le contenu tiers pour qu'il ne se charge que lorsque les utilisateurs font défiler la page jusqu'à cette section.

Intersection Observer est une API de navigateur qui détecte efficacement quand un élément entre ou sort du viewport du navigateur. Vous pouvez l'utiliser pour implémenter cette technique. lazysizes est une bibliothèque JavaScript populaire pour le chargement différé des images et de iframes. Il est compatible avec les intégrations et les widgets YouTube. Il offre également une compatibilité facultative avec Intersection Observer.

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

Optimiser la diffusion de scripts tiers

Voici quelques stratégies recommandées pour optimiser votre utilisation des scripts tiers.

Hébergement CDN tiers

Il est courant que les fournisseurs tiers fournissent des URL pour les fichiers JavaScript qu'ils hébergent, généralement sur un réseau de diffusion de contenu (CDN). L'avantage de cette approche est que vous pouvez commencer rapidement (il vous suffit de copier-coller l'URL) et qu'il n'y a pas de frais de maintenance. Le fournisseur tiers gère la configuration du serveur et les mises à jour des scripts.

Toutefois, comme ils ne sont pas sur la même origine que le reste de vos ressources, le chargement de fichiers depuis un CDN public entraîne des frais de réseau. Le navigateur doit effectuer une recherche 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 avez rarement le contrôle de la mise en cache. Si vous vous appuyez sur la stratégie de mise en cache d'un tiers, les scripts peuvent être trop souvent récupérés inutilement sur le réseau.

Hébergement de scripts tiers

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

• Réduisez les délais de résolution DNS et d'aller-retour.
• Amélioration des en-têtes de mise en cache HTTP.
• Profitez de HTTP/2 ou du plus récent HTTP/3.

Par exemple, Casper a réussi à réduire les temps de chargement de 1,7 seconde grâce à l'auto-hébergement d'un script de tests A/B.

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

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

Vous pouvez utiliser des service workers pour mettre en cache des scripts provenant de serveurs tiers au lieu de les héberger vous-même. Vous bénéficiez ainsi d'un meilleur contrôle sur la mise en cache, tout en conservant les avantages des CDN tiers.

Vous pouvez contrôler la fréquence à laquelle les scripts sont à nouveau récupérés sur le réseau et créer une stratégie de chargement qui limite les requêtes de ressources tierces non essentielles jusqu'à ce qu'un utilisateur arrive à une interaction clé sur la page. preconnect vous permet d'établir des connexions précoces et de réduire les coûts de réseau.