Temps de lecture estimé : 6 min · Publié le
Choisir les parcours à mesurer
Sélectionnez une page d’accueil, une page de service, une liste chargée en images, un article et le formulaire. Testez au moins une largeur mobile et une largeur ordinateur, avec une connexion et un appareil représentatifs. Notez la date, les changements récents et les éléments visibles au premier écran.
Séparez les mesures de laboratoire, qui aident à reproduire un problème, des données de terrain disponibles, qui décrivent l’expérience des visiteurs réels. Si le trafic est trop faible pour une mesure stable, ne présentez pas un score isolé comme une tendance. web.dev décrit les outils de mesure et leurs usages.
Exercice fictif : cinq chargements donnent les LCP ci-dessous avant et après une correction. La médiane est la troisième valeur après tri, pas la moyenne. Ici, elle passe de 3,5 à 2,9 secondes, soit 0,6 seconde de moins pour ces séries. Ces valeurs illustrent une méthode ; elles ne mesurent ni ce site ni un résultat client.
Pour rendre la comparaison exploitable, gardez la même URL, le même profil d’appareil, les mêmes réglages réseau et de cache, ainsi que les versions de Chrome et Lighthouse. Conservez les mesures brutes et les changements apportés. Une médiane de cinq essais limite l’importance d’un essai atypique, sans démontrer une causalité ni remplacer les données de terrain ou l’INP des utilisateurs.
- Pages et appareils choisis.
- Mesure initiale reproductible.
- Action que le visiteur doit pouvoir terminer.
Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.
| Série | LCP observés en secondes | Lecture |
|---|---|---|
| Avant correction | 3,6 ; 3,4 ; 3,5 ; 3,7 ; 3,3 | Valeurs triées : 3,3 ; 3,4 ; 3,5 ; 3,6 ; 3,7. Médiane : 3,5 s |
| Après correction | 2,9 ; 3,0 ; 2,8 ; 3,1 ; 2,7 | Valeurs triées : 2,7 ; 2,8 ; 2,9 ; 3,0 ; 3,1. Médiane : 2,9 s |
| Écart entre ces médianes | 3,5 − 2,9 = 0,6 s | Gain observé dans cet exercice, pas promesse pour tous les visiteurs |
Lire les seuils sans mélanger les mesures
Les seuils suivants s’appliquent au 75e percentile des données de terrain, séparément sur mobile et ordinateur. Examinez chaque mesure disponible. Dans PageSpeed Insights, une évaluation peut être favorable sans INP si LCP et CLS sont disponibles et bons ; si LCP ou CLS manque, cette évaluation ne peut pas être établie. Un test Lighthouse de chargement ne fournit pas d’INP de terrain. Google · PageSpeed Insights.
Entre les deux seuils, l’indicateur est à améliorer. Les trois mesures ne résument ni l’accessibilité, ni la pertinence du contenu, ni la réussite d’un formulaire.
Faites défiler le tableau horizontalement pour lire toutes les colonnes. Au clavier, placez le focus sur le tableau puis utilisez les flèches.
| Indicateur | Bon | Insuffisant |
|---|---|---|
| LCP | ≤ 2,5 s | > 4 s |
| INP | ≤ 200 ms | > 500 ms |
| CLS | ≤ 0,1 | > 0,25 |
Chercher la cause du chargement lent
Repérez l’élément principal visible au chargement et la ressource qui le fournit. Une photographie de hero trop grande, chargée tard ou masquée derrière un script peut ralentir le LCP. Utilisez une image adaptée à sa taille affichée, avec dimensions HTML, variantes responsive et priorité cohérente ; ne différez pas sans raison l’image principale.
Examinez ensuite polices, CSS, JavaScript et réponses du serveur. Supprimez les ressources réellement inutiles et évitez de télécharger toutes les cartes hors écran immédiatement. Le guide des images détaille la préparation des visuels et de leurs alternatives.
Stabiliser et rendre les interactions réactives
Réservez la place des images, contenus intégrés et messages qui apparaîtront après chargement. Vérifiez le CLS pendant toute la lecture, pas seulement sur une capture initiale. Les polices et bandeaux tardifs peuvent déplacer un bouton au moment où une personne veut l’utiliser.
Pour l’INP, essayez les actions importantes : ouvrir le menu, filtrer une liste, choisir une option et corriger un formulaire. Si la réponse tarde, observez les tâches JavaScript longues et le rendu déclenché par chaque action. Une interface plus simple peut être plus efficace qu’une nouvelle bibliothèque.
Établir un budget et contrôler après publication
Fixez des limites proportionnées pour les images principales, les cartes et les scripts ajoutés. Comparez le poids réellement téléchargé sur mobile, plutôt que la taille totale du dossier d’images. Notez ce qui a été supprimé, compressé ou différé et vérifiez que la qualité visuelle et l’accessibilité restent satisfaisantes.
Rejouez les parcours après chaque changement et après mise en production. Suivez LCP, INP et CLS lorsque des données réelles sont disponibles, sans promettre qu’un score garantit une position dans les moteurs. Le guide Google sur l’expérience de page replace ces mesures dans l’ensemble de l’utilité du site.
- Poids et délai avant/après.
- Absence de régression visuelle ou fonctionnelle.
- Contrôle sur les pages et appareils prioritaires.
Identifier quel fichier ralentit un parcours et distinguer réseau, compression et cache.
Cas fictif : une page affiche une image lentement malgré un HTML léger. Comparez ses étapes de chargement et ses tailles dans des conditions identiques, puis rejouez avec le cache. Les détails de ressources d’une autre origine peuvent être limités. Une taille nulle ne prouve donc pas à elle seule que le transfert a été gratuit ou instantané.
- La comparaison précise ressource, état du cache et limites de visibilité, sans transformer une valeur absente en gain mesuré.
- MDN Resource Timing
Documentation des temps réseau et tailles disponibles dans les entrées de performance liées au chargement des ressources.
Comparer des conditions de chargement
Cas proposé : une page paraît rapide après plusieurs visites mais lente lors du premier accès. Le cache, les images et les scripts peuvent modifier l’expérience observée.
Comparez des conditions décrites : appareil, réseau, cache et page. Gardez élément principal, requêtes et temps observés avant et après ; une mesure isolée ne démontre pas un gain durable.
- Noter réseau et état du cache
- Identifier le contenu principal
- Comparer plusieurs observations cohérentes
- Vérifier le recadrage utile
Choisir et préparer les images d’un site web
Après une correction, suivre la bonne fenêtre de mesure
- Noter la version
- Rejouer le même test
- Vérifier URL ou origine
- Suivre le terrain
Un test relancé aujourd’hui examine la version actuelle dans ses conditions de simulation. Le rapport de terrain garde aussi les expériences antérieures présentes dans sa fenêtre de 28 jours. Vérifiez d’abord si ce dernier porte sur l’URL ou sur l’origine : un résultat commun au site ne permet pas d’isoler la page corrigée.
Ne changez pas appareil, page et conditions réseau en même temps que la correction. Conservez les valeurs, pas seulement la couleur ou le score global. Une absence de données reste une absence de mesure.
Documents de référence
- web.dev : Cumulative Layout Shift · Source consultée
- MDN Resource Timing · Source consultée
- web.dev : Optimize LCP · Source consultée
- Chrome : UX Report
- Chrome : Lighthouse performance scoring · Source consultée
- web.dev · Lab and field data differences · Source consultée
- Google · PageSpeed Insights · Source consultée
- web.dev décrit les outils de mesure
- guide Google sur l’expérience de page
Complément de lecture
Pour un audit commun au produit et à la technique, cette méthode relie les parcours critiques aux dépendances, aux protections et aux preuves de contrôle. Elle complète les mesures de vitesse par une revue de l’action que le visiteur doit accomplir. Les seuils et outils restent à vérifier dans leurs documentations officielles.
Contenu mis à jour le
Repères documentaires pour ce sujet
| Référence | Valeur ou syntaxe | Portée du repère |
|---|---|---|
| HTTP · 304 | If-None-Match → 304 | Sur une requête GET ou HEAD, une représentation inchangée peut être réutilisée sans renvoyer son corps. |
Les dates indiquent la consultation des références. Ces repères ne constituent ni un audit du site ni une déclaration globale de conformité.