Aujourd'hui, il est incontournable pour un éditeur de site web de se pencher sur la question de la vitesse de chargement. Elle impacte l'expérience utilisateur, l'engagement, les conversions (donc le business !) et le SEO, autant de bonnes raisons d'engager un chantier sur la performance web !
Mais avant de mener des actions d'optimisation, il faut commencer par mesurer la rapidité de votre site web, pour mettre des données objectives sur les pages et diagnostiquer la situation. Plusieurs outils de référence sont à votre disposition, beaucoup étant gratuits.
Dans cet article, je vous propose des conseils pour les utiliser et comprendre les différents indicateurs de performance web.
Quels indicateurs de performance regarder ?
Il n'est pas toujours facile de s'y retrouver dans la jungle des métriques de performance web et leurs acronymes plus ou moins obscurs pour un néophyte ! Alors commençons par quelques informations sur les indicateurs qui vous seront vraiment utiles quand vous allez tester la vitesse de chargement d'un site.
Les Core Web Vitals, indicateurs essentiels
Pour aider les éditeurs de sites web à se concentrer sur les métriques les plus importantes, Google a créé la notion de "Core Web Vitals" : ce sont les indicateurs prioritaires à optimiser pour améliorer la performance de vos pages. En 2024, il y en a 3.
Le Largest Contentful Paint (LCP) - Il mesure le temps nécessaire pour afficher le plus grand élément visible de la page (image, bloc de texte, etc). Objectif à atteindre : moins de 2.5 secondes.
L'Interaction To Next Paint (INP) - Il mesure l'interactivité de la page, c'est-à-dire sa capacité à réagir rapidement aux actions effectuées par les visiteurs. Un bon INP est inférieur à 200 millisecondes.
Le Cumulative Layout Shift (CLS) - Il évalue la stabilité visuelle de la page. Y a-t-il des éléments qui se déplacent de manière inattendue ? Un bon CLS est inférieur à 0.1.
Ces 3 métriques sont prises en compte par Google pour évaluer la performance d'un site et jouent un rôle dans le référencement d'une page.
Autres indicateurs de performance
Si vous voulez creuser un peu plus le sujet, vous pourrez rencontrer d'autres indicateurs, notamment les 3 ci-après.
Le Time to First Byte (TTFB) - Il s'agit du temps écoulé entre la requête initiale de l'internaute et le moment où le serveur (où est stocké le site) commencer à envoyer une réponse. Il doit idéalement être inférieur à 200 ms, signe d'un serveur réactif.
Le First Contentful Paint (FCP) - C'est le temps nécessaire pour que le premier élément de contenu soit affiché par le navigateur. Il doit être inférieur à 1.8 seconde. C'est un indicateur important car il correspond à ce qui va rassurer l'internaute : voir quelque chose s'afficher, voir que le site répond.
Le Temps de blocage total (TBT) - Cette métrique permet de quantifier le temps pendant lequel une page n'est pas interactive. Si le navigateur est en train de charger une partie de la page, il ne répondra pas de manière réactive à une interaction (internaute qui veut ouvrir un menu, remplir un formulaire, poster un commentaire, etc). Si ce temps de blocage est excessif, l'internaute va en prendre conscience et avoir l'impression que la page "rame". Il faut que ce TBT soit inférieur à 50 ms pour passer inaperçu.
Le First Input Delay (FID) - C'est le temps qui s'écoule entre la première interaction de l'internaute avec une page et le moment où le navigateur est capable d'y répondre. Là encore, il s'agit d'une mesure de la "réactivité" du site. Un bon FID est inférieur à 100 ms.
Quels outils pour tester la vitesse d'un site Internet ?
Pour mesurer la vitesse de chargement, il existe plusieurs outils, voici quelques références sur le marché.
Google PageSpeed Insights et son API
Google PageSpeed Insights est un outil gratuit créé par Google qui fournit des données sur les performances de votre site.
Entrez une URL à tester sur l'outil :
PageSpeed Insights va déjà vous indiquer si vous respectez les bonnes pratiques en matière de Core Web Vitals et vous indiquer quelle(s) métrique(s) sont éventuellement à améliorer.
Il va ensuite vous attribuer 4 notes sur 100 pour les performances web, l'accessibilité, les bonnes pratiques et l'optimisation SEO. Dans le cadre de cet article, c'est la note de performance web qui va nous intéresser. Utilisez le mobile comme appareil de référence, les données vous sont également fournies pour un ordinateur de bureau mais sur un site responsive, en général quand ça se passe bien sur mobile ça se passe bien aussi sur desktop :)
- Score entre 90 et 100 - Tout va bien.
- Score entre 50 et 89 - Des améliorations sont à réaliser.
- Score entre 0 et 49 - Il est urgent d'agir pour améliorer vos performances.
Plus bas sur la page, PageSpeed Insights vous livre un diagnostic agrémenté de conseils très précis et techniques sur les points d'amélioration et le temps de chargement que vous pourriez gagner en les mettant en place.
Si vous voulez tester toutes les pages de votre site, je vous conseille d'utiliser un outil comme ScreamingFrog SEO Spider (gratuit jusqu'à 500 URL explorées). Le menu Configuration > Accès à l'API > PageSpeed Insights vous permet de vous connecter directement à l'API pour tester toutes les URL du site rapidement.
Pour obtenir une clé secrète d'utilisation de l'API, connectez-vous sur cette page et cliquez sur "Obtenir une clé". Cliquez sur "Create a new project" puis sur le bouton "Show Key".
Vous n'avez plus qu'à copier cette clé sur Screaming Frog et cliquer sur "Se connecter".
Par la suite, quand vous lancerez un crawl d'un site, vous pourrez récupérer le score de performance PageSpeed Insights ainsi que les Core Web Vitals et conseils fournis par l'outil directement dans une rubrique dédiée.
Lighthouse (via Google Chrome)
Lighthouse est un outil open-source intégré au navigateur Google Chrome, qui permet lui aussi d'auditer les performances, l'accessibilité, le respect des bonnes pratiques et le SEO.
Quelle différence avec PageSpeed Insights ? Lighthouse utilise uniquement des données de laboratoire et simule un internaute naviguant dans des conditions standardisées. Par comparaison, PageSpeed Insights utilise à la fois des données de laboratoire (issues de Lighthouse) et des données de terrain issues du Chrome User Experience Report (CrUX).
CrUX permet à Google de collecter des données de performance via tous les utilisateurs de Chrome qui ont accepté de partager anonymement avec Google leurs statistiques d'utilisation et de performance. CrUX permet donc d'avoir une idée des performances réelles en tenant compte de la géolocalisation des internautes, du type d'appareil qu'ils utilisent ou encore des conditions réseau.
En résumé, Lighthouse est souvent privilégié par les développeurs justement parce qu'il est basé sur des conditions de laboratoire, qui permettent de contrôler un maximum de variables pour diagnostiquer correctement les problèmes de performance. PageSpeed Insights vise un public un peu plus large et intègre aussi une vision des performances réelles sur le terrain.
La manière la plus simple d'utiliser Lighthouse est d'y accéder via les outils pour développeurs intégrés à Google Chrome (Chrome DevTools), en faisant le raccourci Ctrl + MAJ + I ou y accédant via le menu "Plus d'outils > Outils de développement" de Chrome. Cependant, les utilisateurs avancés peuvent également l'utiliser en tant que CLI (interface en ligne de commande) et extension de navigateur.
Accédez ensuite au menu "Lighthouse".
Vous pouvez y générer un rapport en quelques clics, ici c'est surtout le rapport "Performance" qui nous intéresse mais Lighthouse propose aussi d'autres analyses. Par défaut, l'analyse est réalisée sur mobile et en mode navigation (chargement classique de la page analysée). Le mode "timespan" peut aussi être intéressant car il mesure aussi le temps d'exécution du JavaScript et les changements de disposition des éléments affichés à l'écran. En revanche, il ne donne pas de score de performance global.
Avec le rapport Navigation, on retrouve le même principe de score que sur PageSpeed Insights et des recommandations sur les points à améliorer. Vous disposez aussi de la possibilité de trier les recommandations en fonction de la métrique que vous souhaitez améliorer (First Contentful Paint, Largest Contentful paint, Total Blocking Time ou Cumulative Layout Shift).
Le rapport Timespan vous permet quant à lui de travailler sur le Temps de Blocage Total ainsi que les deux Core Web Vitals que sont le CLS et l'INP.
WebPageTest
WebPageTest propose des tests de performance détaillés et permet de simuler des conditions de connexion spécifiques (vitesse, localisation, etc). Il fournit des rapports détaillés incluant le temps de chargement, les Core Web Vitals, et des captures d'écran de chaque étape du chargement de la page. Il a l'avantage de permettre la comparaison de plusieurs sites côte à côte ou de tester des scripts personnalisés.
Pour ma part, j'apprécie cet outil parce qu'il permet de tester différents emplacements géographiques et types de connexion (fibre optique, 3G, 4G, ADSL, etc) ou de tester différents types d'appareils. Il peut aussi enregistrer une capture vidéo du chargement de la page et propose une décomposition du chargement en cascade : c'est l'occasion de repérer un problème de rendu visuel ou un goulet d'étranglement avec plein de ressources qui tentent de se charger en même temps.
On peut aussi simuler le cas de figure où c'est la première visite de l'internaute et le cas de figure où l'internaute revient sur le site (avec l'option "First View and Repeat View"), pour voir si la mise en cache est efficace et permet d'améliorer les performances lors de la seconde visite.
Ici par exemple, on voit qu'au premier chargement la page se charge en 1.886 seconde alors qu'au second, la rapidité de chargement tombe à 0.848 seconde.
Pour les utilisateurs avancés, on peut aussi écrire des scripts sur mesure pour simuler des scénarios complexes (utilisateur qui se connecte à un compte, etc) pour tester non plus une page isolée mais un parcours utilisateur.
Lorsque vous l'utilisez, pensez à bien configurer la localisation au plus près de votre serveur (mettez "Paris" par exemple si votre site est hébergé en France), pour une vision plus juste (car par défaut, le serveur de test est souvent basé aux États-Unis, ce qui induit un temps de latence plus grand si votre site est stocké sur un serveur français).
La présentation peut paraître un peu aride au premier abord mais regorge d'informations.
WebPageTest vous donne aussi 3 axes de conseils : rapidité du site ("Is it Quick ?"), expérience utilisateur ("Is it Usable ?") et résilience ("Is it Resilient?"), avec une multitude de recommandations techniques pour améliorer la page.
GT Metrix
GT Metrix prend appui sur les données de Lighthouse pour offrir une analyse de la rapidité de chargement d'un site. Je vous conseille de créer un compte gratuit sur l'outil pour bénéficier de certaines fonctionnalités permettant de personnaliser les tests, comme le choix d'un emplacement géographique pour le serveur de test.
Le point fort de l'outil, à mon sens, est son interface plutôt conviviale qui rend l'information claire et accessible.
Comme WebPageTest, GTmetrix propose des vidéos du chargement de la page, permettant de voir visuellement où se produisent les ralentissements. Il inclut aussi une vue en cascade du chargement pour repérer le timing de chargement des différentes ressources. On retrouve des scores de performance issus de Lighthouse et les recommandations associées.
On peut également effectuer un suivi des performances dans le temps, en comparant deux tests (pratique pour faire un avant/après quand on apporte des changements significatifs à un site ou que l'on souhaite évaluer l'impact de certaines modifications).
D'ailleurs, il est également possible de comparer différentes configurations de test.
Néanmoins, je trouve aujourd'hui que GT Metrix est plus limité que WebPageTest dans sa version gratuite.
Il existe bien sûr d'autres outils sur le marché mais je trouve que ces 4 références suffisent à répondre à la plupart des besoins.
Pourquoi la vitesse de chargement est-elle cruciale ?
Vous allez me dire : pourquoi s'embêter à optimiser son site pour gagner quelques secondes ou millisecondes de temps de chargement ? Voici quelques pistes de réflexion pour conclure cet article et vous donner une motivation à lancer le chantier !
Un impact sur l'expérience utilisateur
Un site trop lent a un impact négatif direct sur l'expérience utilisateur. Qui n'a jamais pesté contre une page qui met longtemps à s'afficher ? Qui n'a jamais fini par aller sur un autre site ? Déjà, en 2017, Google affirmait que 53% des utilisateurs mobiles quittaient une page si elle mettait plus de 3 secondes à charger.
Par définition, si le visiteur s'en va, on se prive aussi de tout l'engagement qu'il peut générer.
Un impact sur le SEO
La vitesse de chargement d'une page fait aujourd'hui partie des critères pris en compte par Google pour la positionner dans les résultats de recherche. Comme je le mentionnais, le moteur a même formalisé les indicateurs de performance dits "essentiels", les Core Web Vitals, qui permettent d'évaluer les sites sur une base commune. Pas de bonus au programme pour un site rapide mais un potentiel "malus" pour un site plus lent que ses concurrents.
D'autre part, l'algorithme NavBoost de Google prend en compte le comportement de l'internaute pour ajuster les résultats de recherche : il attribue, grâce au machine learning, un score aux pages web en prenant en compte par exemple la fréquence à laquelle la page est consultée en réponse à une requête précise, le temps que l'internaute y passe, ce qu'il fait ensuite s'il revient sur les résultats de recherche, etc. Il prend aussi en compte une variété d'interactions que l'utilisateur peut avoir avec la page (cliquer, scroller, survoler, swiper sur mobile, etc).
Son existence a été confirmée par Pandu Nayak (vice-président du Search chez Google) lors d'un procès intenté à Google, puis par le Google Leak (une fuite de données issues de Google) de mai 2024.
Ca signifie que si votre site ne retient pas les visiteurs, notamment à cause d'un temps de chargement trop long, votre référencement peut en pâtir.
Souvenez-vous que depuis la mise en place de l'indexation mobile-first à partir de 2018, Google évalue en priorité la version mobile de votre site. Il est donc primordial de veiller à sa rapidité.
Un impact business
Selon SOASTA, une seconde de temps de chargement supplémentaire peut faire baisser les conversions jusqu'à 20%.
En 2006, Marissa Mayer de Google indiquait que pour 0.5 seconde de temps de chargement supplémentaire d'une page de résultats, le trafic chutait de 20%. Sur son blog, Greg Linden - ayant travaillé 5 ans chez Amazon - indiquait que le retailer avait mené des A/B tests similaires et découvert que même des micro-hausses du temps de chargement de l'ordre de 100 millisecondes pouvaient entraîner des "chutes substantielles et coûteuses des revenus".
En résumé, ce n'est jamais inutile d'optimiser la vitesse de chargement de son site, que ce soit pour gagner en visibilité, fidéliser les visiteurs ou saisir toutes les opportunités business qui se présentent. Vous noterez cependant en lisant les recommandations issues des différents outils de test que ce sont des chantiers souvent assez techniques et pointus, même pour quelqu'un qui a l'habitude de mettre les mains dans la gestion de son site. L'appui d'un développeur se révèle souvent indispensable pour vraiment prendre en main le sujet.
