Charger efficacement le code JavaScript tiers

Milica Mihajlija

Si un script tiers ralentit votre de page, vous disposez de deux options pour améliorer les performances:

• Supprimez-le s'il n'apporte aucune valeur ajoutée à votre site.
• Optimisez le processus de chargement.

Ce post 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.

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

Les attributs async et defer indiquent au navigateur qu'il peut procéder à l'analyse. 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 ne bloquent pas la construction du DOM ni la page ce qui permet à l'utilisateur de voir la page avant que tous les scripts aient terminé chargement en cours.

<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 opportunité après avoir terminer le téléchargement et avant que la fenêtre load. Cela signifie 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 DOM s'ils de terminer le téléchargement pendant que l'analyseur est en cours.

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

</ph>

Les scripts avec async peuvent toujours être bloqués Analyse HTML

defer

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

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

</ph>

Les scripts avec defer attendent d'être exécutés que le navigateur ait fini d'analyser le code HTML.

• Utilisez async s'il est important d'exécuter le script plus tôt dans le chargement processus.
• Utilisez defer pour les ressources moins importantes, comme un lecteur vidéo inférieur à dans la partie au-dessus de la ligne de flottaison.

L'utilisation de ces attributs peut accélérer considérablement le chargement de la page. Par exemple : Telegraph a différé tous ses scripts y compris les annonces et les analyses, et a amélioré le temps de chargement des annonces d'environ quatre secondes.

Remarque :Les scripts Analytics sont généralement chargés tôt afin que vous ne manquiez aucune des données d'analyse. Heureusement, il existe pour initialiser Analytics en différé tout en conservant les données de chargement de page anticipée.

Établissez des connexions précoces aux origines requises

Vous pouvez économiser de 100 à 500 ms en d'établir des liens précoces 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 une connexion à une autre origine, et que vous souhaitez que le processus démarre que possible. Lorsque le navigateur demande une ressource à l'origine préconnectée, le téléchargement démarre immédiatement.

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

Attention :Connectez-vous uniquement aux domaines critiques pour que la page s'affiche bientôt, car le le navigateur ferme toute connexion qui n'est pas utilisée dans les 10 secondes. Inutile la préconnexion peut retarder d'autres ressources importantes. Limitez donc le nombre les domaines préconnectés et tester l'impact de la préconnexion.

dns-prefetch

<link rel="dns-prefetch> gère un petit sous-ensemble Identifiants <link rel="preconnect">. L'établissement d'une connexion implique le DNS recherche et handshake TCP, et pour les origines sécurisées, les négociations TLS. 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">

Navigateurs compatibles avec dns-prefetch est légèrement différente de l'assistance preconnect, Ainsi, dns-prefetch peut servir de solution de secours pour les navigateurs qui ne prennent pas en charge 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">

Ressources tierces à chargement différé

Les ressources tierces intégrées peuvent ralentir considérablement le chargement des pages : ils sont mal construits. 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 améliorer les métriques "Vitesse des pages" et "Paint". De cette façon, les utilisateurs obtiennent le contenu de la page principale plus rapidement et de bénéficier d'une meilleure expérience.

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

</ph>

Charger le contenu en dessous de la ligne de flottaison de manière différée

Une approche efficace consiste à charger en différé le contenu tiers après la page principale. s'affiche. Les annonces se prêtent bien à cette approche.

Les annonces représentent une source de revenus importante pour de nombreux sites, mais les utilisateurs contenus. Grâce au chargement différé des annonces et à la diffusion plus rapide du contenu principal, Augmenter le pourcentage de visibilité globale d'une annonce 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 propose de la documentation pour en savoir plus sur le chargement différé des annonces.

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

Observateur d'intersection est une API de navigateur qui détecte efficacement l'entrée ou la sortie d'un élément la fenêtre d'affichage du navigateur, et vous pouvez l'utiliser pour implémenter cette technique. lazysizes est une bibliothèque JavaScript populaire pour les images à chargement différé et iframes. Il est compatible avec les intégrations et widgets. Il offre également une assistance facultative pour Intersection Observer.

Attention :Soyez prudent lorsque vous chargez des ressources en différé avec JavaScript. Si JavaScript lors du chargement, par exemple si le réseau est instable, vos ressources ne se charge pas du tout.

Utiliser l'attribut loading pour les images et les iFrames à chargement différé constitue une excellente alternative aux techniques JavaScript, disponible dans Chrome 76.

Optimiser le traitement des scripts tiers

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

Hébergement CDN tiers

Les fournisseurs tiers fournissent souvent des URL pour les fichiers JavaScript qu'ils généralement sur un réseau de diffusion de contenu (CDN). L'avantage de cette approche est que vous pouvez démarrer rapidement, copier et coller l'URL, sans entraîner de coûts de maintenance. La le fournisseur tiers gère la configuration du serveur et les mises à jour des scripts.

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

Lorsque vous utilisez des fichiers provenant de serveurs tiers, vous avez rarement le contrôle mise en cache. Si vous utilisez la stratégie de mise en cache d'un tiers, les scripts risquent inutilement récupérées trop souvent sur le réseau.

Scripts tiers auto-hébergés

Les scripts tiers auto-hébergés sont une option qui vous permet de mieux contrôler le processus de chargement du script. Grâce à l'auto-hébergement, 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.
• Tirez parti du protocole HTTP/2 (ou HTTP/3), qui est plus récent.

Par exemple, Casper a réussi à gagner 1,7 seconde des temps de chargement en auto-hébergeant un script de tests A/B.

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

Attention :La mise à jour manuelle des scripts peut entraîner une surcharge de développement importante. et vous risquez de passer à côté de mises à jour importantes. Si vous n'utilisez pas CDN pour diffuser l'ensemble de vos ressources tierces, vous passez à côté mise en cache périphérique et vous devez optimiser la compression de votre serveur.

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

Vous pouvez utiliser des service workers pour mettre en cache les scripts de serveurs tiers. comme alternative à l'auto-hébergement. Cela vous donne plus de contrôle sur la mise en cache, tout en conservant les avantages des CDN tiers.

Vous pouvez contrôler la fréquence de récupération des scripts depuis le réseau créer une stratégie de chargement qui régule les requêtes des ressources tierces jusqu'à ce qu'un utilisateur arrive à une interaction clé sur la page. Avec preconnect, vous pouvez établir des contacts précoces et aider pour atténuer les coûts de réseau.