Audit web performance : l’importance du monitoring des pages de votre site
Dans le cadre d’une refonte complète d’un site, de la mise en place d’une nouvelle fonctionnalité ou en TMA, le temps de chargement des pages est aujourd’hui un élément clé à surveiller et à suivre après chaque mise en production pour s’assurer qu’il réponde au standard actuel des outils de test de vitesse gratuit ou payant et surtout aux exigences des internautes principalement sur mobile.
Selon des données fournies par Google :
- – 0,1 seconde de chargement peut entraîner + 8 % de conversion
- 53 % des mobinautes quittent une page si elle met plus de 3 secondes à se charger
- 77 % des utilisateurs de smartphone sont plus enclins à effectuer un achat auprès d’une entreprise si son site ou son application mobile leur permet de réaliser cet achat rapidement.
Quelques petits dixièmes de seconde en plus de temps de chargement, c’est malheureusement l’assurance de perdre des points de conversion, donc du chiffre d’affaires, mais aussi connaître un impact négatif sur votre référencement naturel (SEO) et même sur votre SEA par l’intermédiaire du Quality Score.
Il est donc primordial d’accorder en continu une haute importance au temps de chargement de vos pages pour :
- Proposer la meilleure expérience utilisateur à vos prospects et clients pour un temps de visite plus conséquent et plus de pages vues
- Augmenter votre taux de conversion pour générer plus de lead et de chiffre d’affaires
- Optimiser votre référencement naturel dont le temps de chargement est un des critères de l’algorithme de Google
Google est devenu depuis 2020 le maître en la matière en définissant les indicateurs clés de mesure des performances (Core Web Vitales) des sites Internet dans le but d’évaluer la vitesse de chargement et l’expérience utilisateur sur les sites. Google a ainsi mis à disposition des outils gratuits (Search Console, Google Lighthouse, Page Speed Index) pour tester et monitorer ces indicateurs clés de performance.
Quels sont les 3 principaux Core Web Vital à suivre ?
Largest contentful Paint (LCP)
Il correspond au temps nécessaire au navigateur pour afficher le plus grand élément visible dans la fenêtre d’affichage à partir du moment où l’internaute essaie d’accéder à l’URL.
Le LCP ne concerne que le contenu principal situé au-dessus de la ligne de flottaison. Ce sont les images, les vidéos ou les blocs de texte qui s’affichent sans que l’utilisateur ait besoin d’utiliser le scroll.
First Input Delay (FID) / Interaction Next Page (INP)
C’est le délai entre le moment où l’utilisateur interagit pour la première fois avec la page affichée et le moment où le navigateur répond à cette interaction. Ce calcul permet donc de quantifier l’expérience ressentie par l’utilisateur.
Un FID faible garantie un temps de chargement, une réactivité et donc une expérience globale réussie. FID sera remplacé par INP en 2024 qui évalue la réactivité générale de toutes les interactions d’une page web et non plus la première. Il permet d’avoir un retour d’ensemble plus cohérent.
Un bon INP correspond à une valeur de 200 ms maximum (100ms pour le FID).
Cumulative Layout Shift (CLS)
Le CLS calcule la somme totale des scores pour chaque décalage de mise en page survenu pendant le chargement et durant toute la durée de vie de la page.
Le décalage des éléments empêche les utilisateurs d’interagir correctement, impactant donc l’expérience utilisateur.
Deux autres indicateurs plus liés à votre infrastructure sont à suivre également :
Time To First Byte (TTFB)
C’est un indice qui mesure le temps entre la demande d’une ressource et le moment où le premier octet d’une réponse commence à arriver.
Étant donné que le TTFB précède les indices centrés sur l’utilisateur tels que First Contentful Paint (FCP) et Largest Contentful Paint (LCP), il est recommandé que votre serveur réponde aux demandes de navigation suffisamment rapidement pour ne pas impacter leur score.
À titre indicatif, la plupart des sites devraient s’efforcer d’avoir un TTFB de moins de 0,8 seconde.
First Contentful Paint (FCP)
Il mesure le temps écoulé entre le début du chargement de la page et le moment où une partie du contenu de la page est affichée à l’écran.
Pour une bonne expérience utilisateur, votre site doit avoir un First Contentful Paint de moins de 1,8 seconde.
Les outils Google donnent une bonne tendance, mais ne reflètent que les résultats des utilisateurs à un instant donné. S’appuyer sur d’autres outils comme NewRelic, GTMetrix, WebPage Test, entre autres, permet une analyse en continu d’un site, ou en temps réel en tenant compte des déploiements et des pics d’activités.
L’analyse des performances est aussi à adapter en fonction du contexte, des technologies et CMS utilisés. Par exemple, l’analyse sera différente entre un WordPress, un Adobe Commerce et un CMS utilisé avec un Front Headless versus un front porté par la solution.
En priorité, il est nécessaire de se fixer des objectifs mesurables et quantifiables en termes d’amélioration des KPIs de webperformance.
Quelques bonnes pratiques à suivre :
Se mesurer par rapport à ses concurrents
Les outils permettent aussi de comparer les performances de votre site avec ceux de vos concurrents. Il est toujours intéressant de s’étalonner par rapport aux autres. En effet, être dans le « vert » peut ne pas suffire si vos compétiteurs sont meilleurs que vous.
Les principaux points techniques front-end à prendre en considération
- La qualité du code HTML : le nombre d’éléments dans le dom, l’utilisation de balises adaptées, attributs renseignés…
- Les feuilles de style (CSS) : compression, cache, versioning, CDN, niveau/ciblage…
- Le javascript : compression, cache, versioning, CDN, poids des fichiers chargé, nombre de requêtes, appels multiples, chargement des scripts tiers, différer certains chargements, corriger les erreurs ralentissant le chargement (même si non bloquantes) …
- Et les assets (Contenu, média…) : compression des images, utilisation d’un CDN, utilisation de format nouvelles générations, mise en place d’un Lazyload, adaptation des polices chargées à l’utilisation (en adaptant le nombre de glyphs), adaptation des images chargées en fonction de la résolution…
Les principaux indicateurs à analyser dans le cadre d’un suivi des performances back-end sont les suivants :
- La performance de la base de données : les données sont traitées et récupérées en base, il faut s’assurer que l’exécution des requêtes soit la plus rapide et fiable possible. Il peut s’avérer utile parfois de rajouter des indexes ou optimiser certaines requêtes afin d’obtenir des temps de réponse plus rapides et améliorer globalement la performance applicative ainsi que la tenue à la charge de la plateforme (scalabilité).
- Le temps de chargement du serveur : c’est le temps que met votre serveur à répondre à une demande et à renvoyer la page à l’internaute. Plus il est court, mieux c’est. Après l’optimisation de la BDD, il peut être utile d’améliorer le système de cache en place afin de le rendre plus efficient et ainsi réduire drastiquement les temps de chargement des pages. Il faut pour cela jouer sur la granularité du cache, sa durée de vie, vérifier son efficacité…
- Le taux d’erreur du serveur : certaines pages appelées génèrent des erreurs. Il faut viser le moins d’erreurs possible. Les erreurs remontées sur l’applicatif génèrent des temps de chargement allongés en raison de l’erreur elle-même à traiter et l’écriture des logs générant des I/O disques inutiles et donc de la charge.
Toujours conserver à l’esprit que l’optimisation des performances se fait dès la phase de conception technique, de réalisation des maquettes et création des parcours de navigation. Lors de l’intégration, les développeurs doivent ainsi être formés aux bonnes pratiques.
En lien avec vos objectifs fixés, il est essentiel de fixer le curseur entre optimisation servant à l’expérience utilisateur de vos clients et obstination à vouloir se conformer à un modèle pour satisfaire l’algorithme de Google dont personne ne maîtrise ni son contenu ni ses mises à jour.
