Dans le passé, la "vitesse" était un concept vague. Le site se chargeait-il rapidement ? Aujourd'hui, Google a quantifié exactement ce que "rapide" et "fluide" signifient pour un utilisateur. Ces métriques sont appelées Core Web Vitals (CWV).
Depuis qu'elles sont devenues un signal de classement, les CWV ont déplacé l'attention de la vitesse brute du serveur vers l'expérience utilisateur perçue. Il ne s'agit pas seulement de la vitesse à laquelle le code se charge ; il s'agit de savoir quand l'utilisateur peut réellement utiliser la page.
Trois métriques spécifiques composent les Core Web Vitals. Pour réussir l'évaluation, une page doit obtenir un score "Bon" dans les trois.
1. LCP (Largest Contentful Paint) – Performance de Chargement
"À quelle vitesse les éléments principaux apparaissent-ils ?"
Le LCP mesure le temps nécessaire pour que le plus grand élément visible (généralement une image de héros, une vidéo ou un titre principal) se charge complètement et apparaisse à l'écran. Il dit à l'utilisateur : "Cette page est en train de se produire."
Les Seuils
- Bon : ≤ 2.5 secondes
- Nécessite une Amélioration : ≤ 4.0 secondes
- Mauvais : > 4.0 secondes
Causes Courantes d'un Mauvais LCP
- Temps de Réponse du Serveur Lents : Si votre hébergement est bon marché ou surchargé, le navigateur attend trop longtemps pour recevoir des données.
- Retard de Chargement des Ressources : L'image de héros n'est pas optimisée ou est chargée via le chargement paresseux (lazy-loading), ce qui doit être évité pour l'image du haut.
- JavaScript Bloquant le Rendu : Le navigateur met en pause la construction de la page pour lire un fichier de script.
Comment Améliorer
- Optimiser les Images : Compressez les images (format WebP) et assurez-vous que l'image de héros n'est pas chargée paresseusement.
- Utiliser un CDN : Un réseau de diffusion de contenu (CDN) sert les images depuis un serveur physiquement plus proche de l'utilisateur.
2. INP (Interaction to Next Paint) – Interactivité
"La page se fige-t-elle quand je clique ?"
Note : L'INP a officiellement remplacé le First Input Delay (FID) comme métrique principale en mars 2024.
L'INP observe la latence de toutes les interactions qu'un utilisateur effectue avec une page (clics, tapotements et pressions de touches) tout au long de sa visite. Il mesure le temps entre l'action de l'utilisateur et la capacité du navigateur à peindre l'image suivante montrant le résultat (par exemple, ouvrir un menu ou développer un accordéon).
Les Seuils
- Bon : ≤ 200 millisecondes
- Nécessite une Amélioration : ≤ 500 millisecondes
- Mauvais : > 500 millisecondes
Causes Courantes d'un Mauvais INP
- Exécution JavaScript Lourde : Le "thread principal" du navigateur est trop occupé à traiter le code pour répondre au clic de l'utilisateur.
- Mises en Page Complexes : Le navigateur met trop de temps à redessiner la page après une interaction.
Comment Améliorer
- Diviser les Tâches Longues : Les développeurs peuvent diviser de gros morceaux de JavaScript en petits morceaux pour que le navigateur puisse respirer.
- Optimiser les Gestionnaires d'Événements : Assurez-vous que le code déclenché par un clic est léger et rapide.
3. CLS (Cumulative Layout Shift) – Stabilité Visuelle
"Le contenu saute-t-il de manière inattendue ?"
Nous avons tous vécu cela : vous allez cliquer sur un bouton, mais soudainement une publicité se charge au-dessus, poussant le contenu vers le bas, et vous cliquez accidentellement sur la mauvaise chose. C'est un décalage de mise en page. Le CLS mesure la somme totale de tous les décalages de mise en page inattendus qui se produisent pendant la durée de vie de la page.
Les Seuils
- Bon : ≤ 0.1
- Nécessite une Amélioration : ≤ 0.25
- Mauvais : > 0.25
Causes Courantes d'un Mauvais CLS
- Images Sans Dimensions : Si vous ne dites pas au navigateur width="800" et height="600", il ne sait pas combien d'espace réserver.
- Publicités et Intégrations : Les bannières publicitaires qui se redimensionnent dynamiquement poussent souvent le contenu vers le bas.
- Polices Web : Parfois, le texte est caché jusqu'à ce que la police personnalisée se télécharge (FOIT) ou change de style (FOUT), provoquant un changement de hauteur de ligne.
Comment Améliorer
- Définir les Dimensions : Incluez toujours les attributs de largeur et de hauteur sur les éléments d'image et de vidéo.
- Réserver de l'Espace : Si vous avez un emplacement publicitaire dynamique, réservez une taille de boîte spécifique pour celui-ci en CSS afin que le contenu ne bouge pas lorsque la publicité se charge.
Tableau Récapitulatif : Les Métriques en un Coup d'Œil
| Métrique | Focus | Objectif "Bon" | Sentiment de l'Utilisateur |
|---|---|---|---|
| LCP | Chargement | Moins de 2.5s | "C'est ici." |
| INP | Réactivité | Moins de 200ms | "Ça marche." |
| CLS | Stabilité | Moins de 0.1 | "C'est stable." |
Comment Mesurer Votre Score
Vous n'avez pas besoin de deviner. Google fournit des outils gratuits pour tester votre site par rapport à ces normes :
- PageSpeed Insights : L'outil incontournable pour un aperçu rapide. Il fournit à la fois des "Données de Laboratoire" (simulées) et des "Données de Terrain" (données réelles des utilisateurs).
- Google Search Console : Le rapport "Core Web Vitals" vous montre quelles URL de votre site échouent et les regroupe par type de problème.
- Lighthouse : Un outil de développement intégré au navigateur Chrome (Clic droit > Inspecter > Lighthouse) pour les tests locaux.