24er 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-prefetch 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

ManagedServer.it est le premier fournisseur italien de solutions d'hébergement hautes performances. Notre modèle d'abonnement est abordable et prévisible, afin que les clients puissent accéder à nos technologies d'hébergement fiables, à nos serveurs dédiés et au cloud. ManagedServer.it offre également d'excellents services d'assistance et de conseil sur l'hébergement des principaux CMS Open Source tels que WordPress, WooCommerce, Drupal, Prestashop, Magento.

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.
Remonter en haut