123 Design StudioLes Core Web Vitals sont les métriques de performance centrées utilisateur de Google, et elles relèvent autant du design que de l'ingénierie. Les trois métriques — Largest Contentful Paint (LCP), Interaction to Next Paint (INP) et Cumulative Layout Shift (CLS) — sont directement façonnées par les images de hero, les polices, la structure de mise en page et les schémas d'interaction. Ce guide explique ce que mesure chacune et les décisions de design qui les font bouger.
Ce que mesurent les trois métriques
- LCP (Largest Contentful Paint) — la vitesse à laquelle le plus grand élément visible, souvent une image de hero ou un titre, s'affiche. C'est la sensation « est-ce que la page se charge ? ».
- INP (Interaction to Next Paint) — la réactivité ressentie sur l'ensemble des interactions, mesurant le délai entre un appui ou un clic et la prochaine mise à jour visuelle. INP a remplacé le First Input Delay comme métrique officielle de réactivité.
- CLS (Cumulative Layout Shift) — la stabilité visuelle de la page, qui pénalise le contenu qui saute pendant le chargement.
Métrique, cible et levier de design
| Métrique | Cible « bonne » | Levier de design |
|---|---|---|
| LCP | ≤ 2,5 s | Média de hero plus léger, chargement prioritaire, moins de polices bloquantes |
| INP | ≤ 200 ms | Interactions plus simples, moins de script lourd derrière les clics, retour immédiat |
| CLS | ≤ 0,1 | Espace réservé pour médias et pubs, chargement de police stable, pas de bannières injectées tardivement |
Ces seuils proviennent des recommandations publiées par Google et sont mesurés au 75e centile des utilisateurs réels.
Concevoir pour le LCP
Le hero est généralement l'élément LCP, donc généralement le coupable. Une photo de hero pleine largeur non compressée est la cause la plus fréquente d'un LCP lent.
- Demandez-vous si le hero doit vraiment être une image lourde ; les heros typographiques ou en dégradé s'affichent quasi instantanément.
- Si vous utilisez une image, servez un format moderne à la bonne taille et faites-la prioriser plutôt que charger en différé.
- Évitez de cacher le contenu principal derrière des animations ou des polices qui bloquent le premier affichage.
Concevoir pour l'INP
L'INP concerne la sensation de l'interface au toucher. Des interactions lourdes et saccadées — un filtre qui re-rend une liste immense, une animation de menu en lutte avec le thread principal — sont perçues comme lentes.
- Donnez un retour visuel immédiat au tap (état pressé, spinner) pour que l'interaction soit reconnue même si le travail continue.
- Préférez des transitions simples et peu coûteuses aux animations élaborées déclenchées à chaque interaction.
- Concevez des états qui laissent le travail coûteux s'effectuer progressivement plutôt que d'un bloc.
La performance perçue est un matériau de design. Un état pressé qui apparaît en 50 ms peut faire ressentir une opération de 180 ms comme instantanée.
Concevoir pour le CLS
Le décalage de mise en page est avant tout une discipline de design et de balisage. Il survient quand quelque chose se charge tard et pousse du contenu déjà visible.
Checklist anti-CLS
- Fixez largeur et hauteur explicites (ou aspect-ratio) sur chaque image et embed.
- Réservez l'espace des pubs, bannières cookies et contenus dynamiques avant leur chargement.
- Évitez d'insérer du contenu au-dessus d'un contenu existant après le chargement.
- Utilisez
font-display: swapavec des métriques de repli alignées pour que les polices échangées ne refluent pas le texte.
Atteindre le « bon » sans tuer la créativité
La crainte est que les budgets de performance aplatissent le design en pages fades mais rapides. Ce n'est pas une fatalité. L'astuce est de dépenser votre budget avec discernement : un hero saisissant et bien optimisé plutôt que trois lourds ; une interaction riche sur les rares moments qui le méritent plutôt que partout ; du mouvement qui respecte le thread principal et prefers-reduced-motion.
En résumé
LCP, INP et CLS récompensent exactement les qualités que les bons designers recherchent de toute façon : une première impression rapide, des interactions réactives et des mises en page stables et dignes de confiance. Comprenez quelles décisions de design font bouger chaque métrique, mesurez avec des données d'utilisateurs réels, et vous pourrez être ambitieux et rapide en même temps.