Comment corriger des pages lentes et les Core Web Vitals
Les Core Web Vitals mesurent la rapidité ressentie d’une page : à quelle vitesse le contenu principal apparaît, à quelle vitesse elle réagit et à quel point elle reste stable. Chacun a une courte liste de causes fréquentes.
Les trois valeurs à viser
| Indicateur | Mesure | Bon |
|---|---|---|
| LCP | Moment où le contenu principal apparaît | 2,5 s ou moins |
| INP | Rapidité de réaction de la page aux interactions | 200 ms ou moins |
| CLS | Ampleur des décalages de la mise en page | 0,1 ou moins |
Lancez le Page Speed Test pour voir vos résultats. Les scores varient d’un essai à l’autre, et un déploiement tout récent peut paraître plus lent tant que les caches ne sont pas remplis. Testez donc plusieurs fois.
Les tests en laboratoire simulent une visite. Les données terrain proviennent d’utilisateurs réels de Chrome, et ce sont celles que Google utilise pour évaluer l’expérience de page. Un site récent peut ne pas encore disposer de données terrain.
Corriger un LCP lent
L’élément le plus grand est généralement une image principale ou un titre. Commencez par l’image :
- Compressez-la et redimensionnez-la à la taille à laquelle elle est affichée, puis utilisez le format WebP ou AVIF.
- Ne chargez jamais l’image principale en différé, et indiquez au navigateur qu’elle est importante :
<img src="hero.webp" width="1200" height="630" fetchpriority="high" alt="...">- Vérifiez que le serveur répond rapidement. Un hébergement lent ralentit tout ce qui suit, utilisez donc un CDN et mettez en cache votre HTML lorsque c’est possible.
- Activez la compression, puis vérifiez-la avec le Website Compression Test.
Corriger un INP lent
L’INP est mauvais lorsque le JavaScript occupe le navigateur en permanence, si bien que les appuis et les clics doivent attendre. Les scripts tiers, comme les widgets de chat et les outils de suivi, sont souvent en cause.
- Supprimez les scripts dont vous n’avez pas besoin, et chargez les autres avec
defer. - Reportez les traitements lourds après le chargement de la page, ou jusqu’au moment où l’utilisateur en a besoin.
- Découpez les tâches longues en parties plus petites, afin que le navigateur puisse répondre entre elles.
Corriger un CLS élevé
Le contenu se déplace lorsqu’un élément se charge tardivement et repousse tout le reste vers le bas.
- Attribuez une
widthet uneheightà chaque image et chaque vidéo. - Réservez de l’espace pour les publicités et les intégrations grâce à une hauteur minimale fixe.
- Évitez d’ajouter des bannières au-dessus d’un contenu déjà chargé.
Par où commencer
Corrigez d’abord vos modèles de pages les plus consultés. Une page d’accueil, une fiche produit et un modèle d’article de blog couvrent généralement une grande partie d’un site. Modifiez une seule chose à la fois et testez à nouveau, afin de savoir ce qui a réellement aidé.
