Script tiers, script tiers et comment ils affectent les performances

Les scripts tiers ajoutent un large éventail de fonctions utiles à votre site Web, le rendant plus interactif, dynamique et interconnecté. Des fonctionnalités telles que l'analyse, les publicités, les boutons de partage de médias sociaux, les intégrations de vidéos - toutes sont possibles grâce à des scripts tiers. Certaines de ces fonctionnalités peuvent être essentielles à la fonctionnalité ou à la monétisation de votre site Web.

Cependant, les scripts tiers sont également une cause majeure de ralentissement des performances sur les sites Web. Ils sont généralement la ressource la plus chère lors du chargement de la page. Certains de ces scripts peuvent également présenter des risques pour la sécurité et la confidentialité.

Cet article vous fournira les bases des scripts tiers, comment ils affectent les performances du site Web et ce que vous pouvez faire pour atténuer leurs effets négatifs.

A l'air intéressant? Commençons!

Que sont les scripts tiers ?

« Script tiers » désigne tout script pouvant être incorporé directement dans le site Web d'un fournisseur tiers. Ils ne sont pas créés par l'utilisateur, ni explicitement contrôlés par l'utilisateur, et sont servis par une URL externe. Normalement pour être clair, tous les scripts Javascript par exemple qui sont chargés depuis des domaines externes au nôtre, précisément depuis des tiers.

Où sont utilisés les scripts tiers ?

Presque tous les sites Web utilisent des scripts tiers pour ajouter des fonctionnalités. Certaines de leurs utilisations les plus courantes sont :

• Intégration de vidéos (par exemple YouTube, Vimeo)
• Ajout de boutons de partage social
• Ajout de widgets de chat
• Intégration de systèmes de commentaires (par exemple, Disqus)
• Activation de l'analyse Web (par exemple, Google Analytics)
• Intégration d'annonces
• Fournir des ressources via des réseaux de diffusion de contenu (CDN)
• Expérimenter des scripts de test A / B
• Ajout de bibliothèques d'assistance (par exemple, animation, bibliothèques fonctionnelles, etc.)

Les développeurs peuvent ajouter des fonctionnalités puissantes aux sites Web avec seulement quelques lignes de code à l'aide de scripts tiers. Par exemple:

• Les équipes marketing peuvent utiliser des rapports de scripts de test et d'analyse A/B pour gérer leurs décisions commerciales concernant des données valides.
• Les utilisateurs peuvent partager un article qu'ils aiment sur leur réseau social préféré en un seul clic.
• Les clients potentiels peuvent contacter le support ou le personnel de vente via le widget de chat et obtenir immédiatement des réponses à leurs questions.

Les applications de script tierces sont infinies, mais cela ne s'arrête pas là.

S'ils sont utilisés sans précaution, les scripts tiers peuvent être problématiques pour la confidentialité, la sécurité et les performances des pages.

Le coût du Javascript tiers.

Les scripts tiers sont omniprésents. Selon le rapport « State of JavaScript » de HTTPArchive , les sites web demandent en moyenne 20 scripts externes , pour une taille totale d'environ 449 Ko.

Pas moins de 93,59 % des pages web contiennent au moins une ressource tierce. Une analyse plus approfondie de ces mêmes données révèle que 76 % des sites web utilisent des scripts d'analyse pour suivre l'activité des utilisateurs.

L'impact le plus néfaste des scripts tiers est le ralentissement du rendu, processus critique du navigateur permettant d'assembler le HTML, le CSS et le JavaScript pour créer un site web fonctionnel et utilisable. Bien entendu, la taille des scripts tiers joue un rôle majeur, mais un autre facteur important est à prendre en compte.

En 2019, les principaux coûts de traitement des scripts sont désormais le téléchargement et l'exécution du processeur.

Le coût de JavaScript en 2019

JavaScript prend beaucoup de ressources CPU pour s'exécuter. Même si vous optimisez les scripts tiers pour réduire l'impact sur les temps de rendu, ils peuvent toujours affecter la métrique "Time to Interactive". Il mesure la rapidité avec laquelle les utilisateurs peuvent interagir avec une page Web. Plus il est lent, plus vos utilisateurs seront frustrés et plus ils sont susceptibles de quitter votre site Web.

Vous pouvez résumer le coût d'utilisation de JavaScript avec deux métriques principales.

Augmenter la taille de la page

Au niveau des ressources, JavaScript est la ressource tierce la plus gourmande en ressources web. Comme le navigateur doit télécharger tous les scripts tiers liés lors du chargement de la page, leur ajout à votre site web peut considérablement le ralentir.

Plus la taille du script est grande, plus il sera difficile pour votre site Web de perdre des performances. Après tout, plus la taille d'une page Web est grande, plus elle se chargera lentement.

Réduire la taille des scripts externes est un moyen impressionnant d'accélérer votre site Web.

Demandes de réseau supplémentaires

Chaque fois qu'un utilisateur demande l'une des pages de votre site, le navigateur doit récupérer tous les scripts tiers intégrés. Pour ce faire, le navigateur va accéder à toutes les URL externes où sont hébergés ces scripts pour les télécharger.

En général, chaque script tiers pris individuellement n'a pas d'incidence majeure. Cependant, le chargement de chaque script tiers génère une requête HTTP supplémentaire que le navigateur doit effectuer pour afficher la page dans son intégralité. Ces requêtes s'accumulent et ralentissent le chargement de la page.

De plus, plus votre page Web reçoit de requêtes, plus la métrique "Time to Interactive" sera longue.

Dans l'exemple ci-dessus, vous pouvez voir que la page prend plus de 9 secondes pour se charger complètement. Le principal coupable ici est l'intégration de nombreux scripts tiers qui ralentissent la vitesse de chargement des pages.

Les scripts ne sont pas les seules ressources tierces utilisées par les sites Web, mais ils constituent une masse de demandes tierces dans toutes les catégories et tous les types de contenu. Donc, les optimiser devrait être votre priorité absolue.

Mesurer l'impact du chargement de scripts tiers

Il existe de nombreux outils de test de vitesse de page Web que vous pouvez utiliser pour diagnostiquer les scripts tiers et déterminer lesquels d'entre eux sont les ressources les plus chères sur votre site Web. Ces outils vous indiquent le nombre de scripts tiers chargés à partir de votre site et le temps qu'ils mettent à s'exécuter.

Voici quelques outils gratuits que vous pouvez utiliser pour évaluer des scripts tiers :

• WebPageTest.org
• Outils chromés
• Aperçus de PageSpeed (Audit phare)

WebPageTest.org

WebPageTest est un outil de test de vitesse open source gratuit que vous pouvez utiliser pour évaluer les performances du site Web. Il comprend de nombreuses fonctionnalités avancées telles que les graphiques en cascade, la répartition du contenu par type et domaine, le rendu des pages Web et les clips vidéo et la comparaison des tests.

J'ai testé mon site Web de portefeuille sur WebPageTest. Ci-dessous la vue en cascade des requêtes faites par mon site pendant le chargement de la page. Cela fait beaucoup de demandes, mais elles ne proviennent pas toutes de sources tierces.

Le graphique en cascade décompose les demandes par domaine et par taille, ainsi qu'une chronologie représentant le chargement de la page.

Vous pouvez également vérifier la répartition du contenu par type en cliquant sur l'onglet "Répartition du contenu". Comme vous pouvez le voir, JS constitue un grand nombre de requêtes et d'octets transférés.

En cliquant sur l'onglet "Domaines", vous obtiendrez une liste complète de tous les domaines atteints par le navigateur lors du chargement de la page.

Dans ce cas, la plupart des requêtes proviennent du domaine principal lui-même. Vous pouvez également cliquer sur le lien 'Map Requests' pour afficher toutes ces demandes.

Si vous reconnaissez un script problématique qui prend beaucoup de temps à charger ou à exécuter, vérifiez si le script est nécessaire. Supprimez ces scripts s'ils ne représentent aucun dommage perceptible à la fonctionnalité de votre site Web ou à l'expérience utilisateur.

WebPageTest permet également de tester la vitesse de votre site web en bloquant les requêtes provenant de domaines spécifiques . Cette fonctionnalité est utile pour mesurer l'impact des scripts tiers problématiques sur les performances, en les ciblant précisément.

blockDomainsExcept www.domain.com cdn.domain.com cdnjs.cloudflare.com
navigate  https://www.domain.com

Par exemple, vous pouvez bloquer les demandes de tous les domaines externes (à l'exception des CDN importants), puis ordonner à WebPageTest d'accéder au site pour le tester.

Remarque : Vous pouvez également utiliser l'onglet « Bloquer » dans la section « Paramètres avancés » de WebPageTest pour faire la même chose.

Voici un flux de travail typique pour utiliser WebPageTest pour identifier les scripts lents :

• Testez la page Web d'origine.
• Testez à nouveau la même page Web, mais cette fois avec des scripts tiers bloqués.
• Comparez les deux résultats à l'aide de la fonction "Comparer" de WebPageTest dans le panneau "Historique des tests".

Outils chromés

Les outils de développement de Chrome permettent de mettre en évidence les requêtes réseau tierces dans le panneau Réseau. Cette fonctionnalité vous permet d'obtenir des informations détaillées sur les requêtes de scripts tiers sur une page.

Pour utiliser cette fonctionnalité, appuyez sur Ctrl/CMD, Maj et P dans l'un des panneaux DiSCi de Chrome pour afficher le « Menu de commandes ». Ensuite, saisissez « Afficher les badges tiers » et activez cette fonctionnalité.

Remarque : Google Chrome version 80 a supprimé cette fonctionnalité sans la remplacer . Il s’agit probablement d’un bug. En attendant que Google corrige ce problème, vous devrez trier manuellement les scripts externes.

Vous pouvez également utiliser le panneau « Performances » des outils de développement Chrome pour identifier les éventuels problèmes de performance de votre site web.

Pour plus d'informations sur les tests de performance de chargement des pages avec Chrome DevTools, consultez le tutoriel de Google sur ce sujet.

Audit phare

L'outil de test de vitesse Lighthouse de Google dispose de deux vérifications spécifiques pour évaluer les performances de votre site.

L'audit du temps de démarrage JavaScript de Lighthouse classe les scripts en fonction de leur temps d'analyse, de compilation et d'exécution. Ces indicateurs vous aident à identifier les scripts tiers qui consomment des ressources serveur importantes.

L'analyse des données réseau de Lighthouse répertorie tous les scripts par taille totale et temps de transfert. Vous pouvez utiliser ces indicateurs pour identifier les scripts tiers susceptibles de ralentir le chargement des pages de votre site.

L'outil Lighthouse intégré de Chrome vous montre également des ressources tierces coûteuses sur une page triée par taille et temps de transfert.

Maintenant que vous avez appris à tester les performances des scripts tiers, il est temps d'apprendre à réduire ou réparer leurs dégâts.

Comment minimiser les effets négatifs des scripts tiers.

1. Retarder le chargement des scripts tiers

Si vous constatez que des scripts tiers ralentissent votre site web, vous pouvez les charger à l'aide d'attributs asynchrones ou différer le HTML pour éviter leur impact négatif sur le chargement de la page.

L' attribut async force le navigateur à poursuivre l'analyse du reste du document HTML jusqu'à ce que le script soit téléchargé. Une fois le script téléchargé, l'analyse du document HTML est suspendue pour permettre son exécution.

L' attribut defer fait la même chose, sauf que le navigateur n'exécute le script qu'après avoir analysé l'intégralité du document HTML.

Il est recommandé de charger tous les scripts tiers avec des attributs asynchrones ou de report (sauf s'ils sont essentiels au chemin de rendu critique de votre page Web).

2. Hébergez des fichiers JavaScript tiers auto-hébergés

L'hébergement de scripts tiers sur le serveur peut vous donner plus de contrôle sur la façon dont ils sont chargés. Il permet de réduire les temps de recherche DNS et d'aller-retour, d'améliorer les en-têtes de mise en cache HTTP et d'utiliser des fonctionnalités avancées telles que HTTP / 2 server push.

L'hébergement en auto-hébergement est recommandé pour tout script tiers essentiel au fonctionnement de votre site Web (par exemple, jQuery, Modernizr, Underscore.js).

Avertissement : Les scripts auto-hébergés peuvent ne pas être mis à jour et ne pas fonctionner comme prévu. Par exemple, si vous hébergez vous-même un script de diffusion publicitaire et que l’éditeur modifie son fonctionnement, votre site web n’affichera aucune publicité tant que vous n’aurez pas mis à jour manuellement le script auto-hébergé.

3. Supprimez complètement le script tiers

Si un script tiers n'ajoute aucune valeur claire à votre site ou à vos utilisateurs, envisagez de le supprimer. De nombreux thèmes et plugins WordPress chargent de nombreux scripts inutiles que vous ne pourrez jamais utiliser.

WordPress impose également à chaque site le chargement du script jQuery Migrate ( wp-includes/js/jquery/jquery-migrate.min.js ). Cela permet aux anciens plugins et thèmes de rester compatibles avec les anciennes versions de jQuery. Bien qu'il ne s'agisse pas d'un script tiers puisqu'il est hébergé localement, il génère tout de même une requête HTTP inutile.

Demandez-vous si votre site web a réellement besoin d'un curseur de date ou d'un script de mise en forme. En cas de doute, vous pouvez effectuer un test A/B pour vérifier si la suppression d'un script a un impact sur les performances ou l'ergonomie de votre site.

4. Mettre en œuvre les suggestions de ressources du navigateur

La connexion à des domaines externes pour télécharger des scripts tiers peut prendre un temps excessif, surtout si les utilisateurs se trouvent sur des réseaux lents. Les recherches DNS, les redirections et les allers-retours pour charger chaque script tiers peuvent entraîner des retards importants.

Vous pouvez utiliser les indicateurs de ressources du navigateur pour établir une connexion avec le domaine externe hébergeant le script tiers au début du chargement de la page.

Il existe de nombreuses suggestions de ressources, mais celles qui sont utiles ici sont dns-prefetch ou preconnect.

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

Si la destination finale du domaine externe de votre script tiers utilise https:// , vous pouvez utiliser cette méthode pour éviter les allers-retours TCP et gérer à l'avance toutes les négociations TLS.

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

5. Chargement paresseux JS tiers

Les éléments tiers intégrés tels que les publicités et les vidéos ajoutent beaucoup de stress à votre site Web, surtout s'ils sont diffusés via des sources mal optimisées. Vous pouvez différer ces ressources intégrées pour accélérer le chargement des pages.

Par exemple, si vous diffusez des annonces dans le pied de page de votre site Web, vous pouvez les charger de manière différée afin qu'elles ne soient chargées que lorsque l'utilisateur fait défiler la page.

Si vous intégrez des publicités sur votre site web, consultez cet article de Mediavine où ils expliquent comment ils ont amélioré la vitesse de chargement des pages de 200 % après avoir mis en place le chargement différé.

Utiliser un gestionnaire de balises pour organiser le JS tiers

Les gestionnaires de balises vous permettent de regrouper plusieurs scripts (ou balises) tiers et de les gérer tous à partir d'une seule source. L'utilisation judicieuse d'un gestionnaire de balises vous permet de minimiser les résultats de performance du chargement de scripts tiers.

Bien qu'il soit possible de charger des scripts tiers de manière asynchrone, le navigateur doit toujours les analyser et les exécuter individuellement. Cela peut signifier demander des données supplémentaires pendant le chargement de la page. Les gestionnaires de balises résolvent ce problème en réduisant le nombre de requêtes à une.

Google Tag Manager (GTM) est la solution la plus populaire pour la gestion des balises. Il se charge lui-même et toutes les balises associées de manière asynchrone, ce qui permet au navigateur d'afficher la page sans interruption. Même un script tiers à chargement différé n'empêchera pas le chargement des autres scripts.

Le plugin Google Tag Manager pour WordPress est un moyen simple d'intégrer GTM aux sites WordPress.

Les autres gestionnaires de balises que vous pouvez consulter sont Adobe Experience Platform Launch, Ensight et Qubit.

Avertissement : Utilisez les gestionnaires de balises comme GTM avec précaution. Bien qu’ils réduisent le coût de chargement des scripts tiers, leur simplicité les rend vulnérables aux abus de la part de toute personne disposant des identifiants nécessaires pour ajouter des balises. Certaines balises peuvent également déclencher une chaîne de requêtes susceptible d’entraîner l’exploration de votre site par les robots d’indexation.

Avoir un budget de performance

Après avoir optimisé les performances de votre site, vous devriez utiliser un budget de performance pour éviter que celles-ci ne se dégradent avec le temps.

Un budget de performance est une limite que l'on s'impose pour le calcul du nombre total de requêtes et de la taille des scripts, des images, etc. Il peut également inclure la définition d'une limite pour des indicateurs de performance tels que le temps d'interaction et le délai d'affichage initial significatif.

Pour plus d'informations, consultez la liste de tous les types de ressources et indicateurs pris en charge.

Vous pouvez utiliser les options « Limiter le nombre de requêtes » et « Taille réduite des fichiers » de Lighthouse pour définir votre budget de performance. La méthode exacte de définition des budgets de performance dépasse le cadre de cet article ; vous trouverez plus d’informations à ce sujet dans la documentation de Lighthouse.

Conclusions

Les scripts tiers sont devenus un élément crucial de la plupart des sites Web aujourd'hui. Même si vous avez optimisé tous les autres codes de votre site Web, vous ne pouvez pas contrôler la lecture des scripts tiers. Vous ne pouvez pas les éviter, car certains d'entre eux peuvent être essentiels à la fonctionnalité, à l'expérience utilisateur ou au flux de revenus de votre site.

Certains sujets abordés dans cet article peuvent ne pas être faciles à comprendre tout de suite. Je vous suggère de les revoir une fois de plus. Comprendre l'impact des scripts tiers sur les performances et savoir comment les gérer vous aidera à reprendre le contrôle des performances de chargement des pages.

Si vous avez des questions sur l'un des points abordés dans cet article, n'hésitez pas à nous contacter.