24 août 2022

Script tiers, script tiers et comment ils affectent les performances

Améliorez PageSpeed ​​​​et les performances en incluant des scripts tiers ou des scripts tiers

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 partout. Selon Rapport d'état JavaScript de HTTPArchive, le nombre médian de scripts externes demandés par les sites Web est 20 et leur taille totale est d'environ 449 KB.

Un gros 93,59% de pages Web comprend au moins une ressource de tiers. En approfondissant les mêmes données, on constate que 76% des sites Web suivent les utilisateurs avec des scripts d'analyse.

Le pire impact des scripts tiers est le rendu critique. Il s'agit de l'ensemble des actions qu'un navigateur effectue pour assembler HTML, CSS et JavaScript dans un site Web en direct et utilisable. Bien sûr, la taille de la charge utile des scripts tiers joue ici un grand rôle, mais il y a encore un autre facteur important à 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

Octet par octet, JavaScript est la ressource de tiers plus cher Étant donné qu'un navigateur doit télécharger tous les scripts tiers liés pendant le chargement de la page, les ajouter à votre site Web peut le ralentir considérablement.

La taille de transfert de la somme des scripts externes dans une page Web (Source : HTTPArchive)

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.

Le nombre de scripts externes requis par une page type (Source : HTTPArchive)

En règle générale, chaque script tiers ne représente pas grand-chose à lui seul. Mais charger chaque script tiers en est un requête HTTP supplémentaire que le navigateur doit effectuer pour rendre la page pleine. Ces demandes s'accumulent pour ralentir les performances 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

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.


WebPageTest fournit de nombreux outils avancés pour tester les performances de votre site

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.

Vérifiez le nombre de requêtes JS et d'octets transférés à WebPageTest

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.

Afficher toutes les demandes de téléchargement d'un site Web sur WebPageTest

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 fournit également un moyen de tester la vitesse de votre site Web blocage des demandes provenant de domaines spécifiques. Ceci est utile pour mesurer l'impact sur les performances des scripts tiers problématiques en les ciblant spécifiquement.

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.

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

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

Chrome DevTools prend en charge mise en avant des demandes réseau de tiers dans le panneau "Réseau". Cette fonctionnalité vous permet d'obtenir des informations détaillées sur les demandes de scripts tiers sur une page.

Utilisez la balise "badge tiers" pour mettre en évidence les demandes externes (Source : Google)

Pour utiliser cette fonction, appuyez sur CTRL / CMD, Maj et P dans l'un des panneaux Chrome DiSCi pour afficher le "Menu de commandes". Ensuite, tapez "Afficher les badges tiers" et activez cette fonction.

Passez la souris sur un script tiers dans Chrome DevTools (source : Google)

Noter: Google Chrome version 80 a supprimé cette fonctionnalité en annonçant aucun remplacement. Il s'agit très probablement d'un insecte. Pour l'instant, vous devez trier manuellement les scripts externes jusqu'à ce que Google corrige ce problème.

Vous pouvez également utiliser le Panneau "Performances" dans Chrome DevTools pour identifier tout problème de performances sur votre site Web.

Pour plus d'informations sur la façon de tester les performances de chargement des pages avec Chrome DevTools, consultez 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émarrer JavaScript Lighthouse classe les scripts en fonction du temps d'analyse, de compilation et d'évaluation. Ces métriques aident à identifier les scripts tiers qui ont accumulé beaucoup de ressources serveur.

Audit Lighthouse 'JavaScript Boot-up Time' (Source : Google)

La vérification de charge utile du réseau Lighthouse répertorie tous les scripts en fonction de la taille totale et du temps de transfert. Vous pouvez utiliser ces statistiques pour identifier les scripts tiers susceptibles de ralentir le temps de chargement des pages de votre site.

Audit Lighthouse 'Network Payloads' (Source : Google)

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.

(Source: Addy Osman, responsable de l'ingénierie, équipe Google Chrome)

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 trouvez des scripts tiers qui ralentissent votre site Web, vous pouvez les charger à l'aide d'attributs async o reporter HTML pour éviter leur impact négatif sur le chargement des pages.

L'attribut async force le navigateur à continuer à analyser le 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 exécuter le script.

L'attribut reporter il fait la même chose, sauf que le navigateur n'exécute pas le script tant qu'il n'a pas analysé l'intégralité du document HTML.

Attributs 'Async' vs 'defer' (Source : Attributs 'async' vs 'defer' (Source : Grandir avec le Web)

Il est recommandé de charger tous les scripts tiers avec des attributs asynchrone o de renvoi (sauf s'ils sont critiques pour le chemin de rendu critique de la 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 être obsolètes et ne pas fonctionner comme prévu. Par exemple, si vous hébergez vous-même un script de diffusion d'annonces et si l'éditeur d'annonces modifie le fonctionnement de son script, votre site Web ne diffusera aucune annonce 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 oblige également chaque site à charger le script jQuery Migrate (wp-includes / js / jquery / jquery-migrate.min.js). Cela aide les anciens plugins et thèmes à maintenir la compatibilité avec les anciennes versions de jQuery. Bien qu'il ne s'agisse pas d'un script tiers car il est auto-hébergé, il ajoute toujours une requête HTTP supplémentaire inutilement.

Demandez-vous si votre site Web a vraiment besoin d'un script de formatage de curseur ou de date. En cas de doute, vous pouvez exécuter le test A / B pour voir si la suppression d'un script affecte les performances du site Web en termes de convivialité.

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-prélecture o préconnexion.

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

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

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

Chargement paresseux sous le contenu plié (source : Google)

Si vous intégrez des annonces sur votre site Web, consultez cet article de Médiavine où ils expliquent comment ils ont amélioré la vitesse des pages de 200 % après avoir mis en œuvre le chargement paresseux.

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 gérer les balises. Il se charge ainsi que toutes ses balises de manière asynchrone afin que le navigateur affiche une page sans s'arrêter. Même un script tiers à chargement lent ne bloquera pas le chargement d'un autre script.

Il Gestionnaire de balises Google pour WordPress plugin est un moyen facile d'intégrer GTM sur les 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 prudence. Bien qu'il réduise le coût de chargement de scripts tiers, sa simplicité ouvre également la porte à des abus de la part de toute personne disposant des informations d'identification nécessaires pour ajouter des balises. Certaines balises peuvent également introduire une chaîne de requêtes pouvant conduire votre site à un crawl.

(Source: Harry Roberts, Consultant Performance Engineer chez Google, BBC, Kickstarter, etc.)

Avoir un budget de performance

Une fois que vous avez optimisé les performances de votre site, vous devez utiliser un budget pour performances pour vous assurer que les performances de votre site ne diminuent pas avec le temps.

Un budget de performance est une limite auto-imposée pour compter le nombre total de requêtes et la taille des scripts, des images, etc. Cela peut également inclure la définition d'une limite pour les mesures de performances, telles que "Time to Interactive" et "First Meaningful Paint".

Pour plus d'informations, voir la liste de tous les types de ressources et métriques pris en charge.

Vous pouvez utiliser le contrôle. Conserver le nombre de demandes Farhouse taille de fichier faible et petite pour établir le budget de performance. Discuter de la méthode exacte de définition des budgets de performances dépasse le cadre de cet article, mais vous pouvez lire plus d'informations sur la façon de le faire dans les documents du Phare.

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.

Vous avez des doutes ? Vous ne savez pas par où commencer ? Contactez-nous !

Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

Managed Server Srl est un acteur italien leader dans la fourniture de solutions système GNU/Linux avancées orientées vers la haute performance. Avec un modèle d'abonnement peu coûteux et prévisible, nous garantissons que nos clients ont accès à des technologies avancées en matière d'hébergement, de serveurs dédiés et de services cloud. En plus de cela, nous proposons des conseils système sur les systèmes Linux et une maintenance spécialisée en SGBD, sécurité informatique, Cloud et bien plus encore. Nous nous distinguons par notre expertise dans l'hébergement de CMS Open Source de premier plan tels que WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart et Magento, soutenus par un service d'assistance et de conseil de haut niveau adapté aux administrations publiques, aux PME et à toutes tailles.

Red Hat, Inc. détient les droits de Red Hat®, RHEL®, RedHat Linux® et CentOS® ; AlmaLinux™ est une marque commerciale d'AlmaLinux OS Foundation ; Rocky Linux® est une marque déposée de la Rocky Linux Foundation ; SUSE® est une marque déposée de SUSE LLC ; Canonical Ltd. détient les droits sur Ubuntu® ; Software in the Public Interest, Inc. détient les droits sur Debian® ; Linus Torvalds détient les droits sur Linux® ; FreeBSD® est une marque déposée de la FreeBSD Foundation ; NetBSD® est une marque déposée de la Fondation NetBSD ; OpenBSD® est une marque déposée de Theo de Raadt. Oracle Corporation détient les droits sur Oracle®, MySQL® et MyRocks® ; Percona® est une marque déposée de Percona LLC ; MariaDB® est une marque déposée de MariaDB Corporation Ab ; REDIS® est une marque déposée de Redis Labs Ltd. F5 Networks, Inc. détient les droits sur NGINX® et NGINX Plus® ; Varnish® est une marque déposée de Varnish Software AB. Adobe Inc. détient les droits sur Magento® ; PrestaShop® est une marque déposée de PrestaShop SA ; OpenCart® est une marque déposée d'OpenCart Limited. Automattic Inc. détient les droits sur WordPress®, WooCommerce® et JetPack® ; Open Source Matters, Inc. détient les droits sur Joomla® ; Dries Buytaert détient les droits sur Drupal®. Amazon Web Services, Inc. détient les droits sur AWS® ; Google LLC détient les droits sur Google Cloud™ et Chrome™ ; Facebook, Inc. détient les droits sur Facebook® ; Microsoft Corporation détient les droits sur Microsoft®, Azure® et Internet Explorer® ; La Fondation Mozilla détient les droits sur Firefox®. Apache® est une marque déposée de The Apache Software Foundation ; PHP® est une marque déposée du groupe PHP. CloudFlare® est une marque déposée de Cloudflare, Inc. ; NETSCOUT® est une marque déposée de NETSCOUT Systems Inc. ; ElasticSearch®, LogStash® et Kibana® sont des marques déposées d'Elastic NV. Ce site n'est affilié, sponsorisé ou autrement associé à aucune des entités mentionnées ci-dessus et ne représente aucune de ces entités de quelque manière que ce soit. Tous les droits sur les marques et noms de produits mentionnés sont la propriété de leurs titulaires respectifs des droits d'auteur. Toutes les autres marques mentionnées appartiennent à leurs titulaires. MANAGED SERVER® est une marque déposée au niveau européen par MANAGED SERVER SRL Via Enzo Ferrari, 9 62012 Civitanova Marche (MC) Italie.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos systèmes sans avoir à migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entièrement gratuite.

Non merci, mes clients préfèrent le site lent.
Retour en haut de page