Performance perçue

Indicateurs de performance web

Plusieurs métriques permettent de quantifier la performance perçue :

• Time To First Byte (TTFB) : Cet indicateur mesure le temps entre la requête de l'utilisateur et la réception du premier octet de données du serveur. Un TTFB bas (Google recommande moins de 200 ms) est la première étape d'un chargement rapide.
• Largest Contentful Paint^[2] (LCP) : Le LCP mesure le temps nécessaire pour afficher le plus grand élément de contenu (généralement une image, une vidéo ou un bloc de texte) visible dans la fenêtre du navigateur. Un LCP rapide (idéalement sous 2,5 secondes) rassure l'utilisateur en lui montrant que le contenu principal de la page est en train d'apparaître.
• Speed Index (Indice de Vitesse) : Cette métrique mesure la rapidité avec laquelle le contenu visible de la page (au-dessus de la ligne de flottaison) se remplit visuellement. Contrairement au LCP qui mesure un seul élément, le Speed Index évalue la progression globale de l'affichage. Un score bas signifie que la page semble se charger rapidement et de manière fluide, plutôt que par à-coups ou en restant blanche longtemps.
• Interaction to Next Paint^[3] (INP) : Ce Core Web Vital (remplaçant le First Input Delay - FID) mesure la réactivité de la page. Il évalue le temps entre une interaction de l'utilisateur (un clic, une touche pressée) et le moment où la page réagit visuellement. Un INP faible est crucial pour que le site paraisse réactif et non « figé ».
• Cumulative Layout Shift (CLS) : Le CLS mesure la stabilité visuelle de la page. Un CLS élevé signifie que des éléments de la page (comme des polices, images ou publicités) se déplacent de manière inattendue pendant le chargement, ce qui peut frustrer l'utilisateur (par exemple, s'il clique accidentellement sur un mauvais lien). Il est calculé en additionnant les scores de déplacement (Layout Shifts) :

$${\displaystyle S=p\times d}$$

Où :

• ${\textstyle S}$ est le score du déplacement.
• ${\textstyle p}$ est le pourcentage de la fenêtre qui a changé.
• ${\textstyle d}$ est la distance parcourue par l'élément instable (rapportée à la taille de la fenêtre).

Le CLS^[4] est la somme de ces scores sur la durée de vie de la page.

Principes pour une meilleure expérience utilisateur

Voici les principales étapes de performance perçue pour une meilleure expérience utilisateur :

1. Optimiser le chargement initial : Chargez uniquement les ressources critiques nécessaires à l'affichage du premier contenu (le above the fold). Les autres ressources (scripts, images plus bas sur la page) peuvent être chargées de manière différée. Cela améliore directement le TTFB, le LCP et le Speed Index.
2. Assurer la stabilité visuelle : Pour éviter les sauts de contenu (et améliorer le CLS), il convient de toujours spécifier les dimensions (largeur et hauteur) des images, vidéos et contenus intégrés. Utilisez des espaces réservés (placeholders) pour que la mise en page soit stable avant même que le contenu final ne soit chargé.
3. Gérer le chargement des polices : Les polices web peuvent causer des décalages (CLS) ou des « flashs » de texte invisible ou mal stylisé (FOIT/FOUT^[5]). Utilisez des techniques comme font-display: swap pour afficher un texte de repli rapidement, minimisant ainsi l'impact sur la performance perçue.
4. Prioriser l'interactivité : Les éléments interactifs (boutons, liens, champs de formulaire) doivent être fonctionnels le plus vite possible. Même si le reste de la page charge encore, permettre à l'utilisateur d'interagir rapidement (ce qui améliore l'INP) donne une forte impression de rapidité.

Outils

Pour améliorer la performance perçue d'une page web, de nombreux outils peuvent s'avérer utiles :

• Google Chrome (via l'onglet « Performance » et « Lighthouse » des outils de développement)
• MilleCheck
• PageSpeed Insights
• Webpagetest

Tous ces outils se reposent au moins en partie sur les Core Web Vitals définis par Google.