Comment améliorer le LCP (Largest Contentful Paint)
Le LCP mesure le moment où le plus grand élément de la fenêtre finit de s'afficher. Un bon LCP est de 2,5 secondes ou moins au 75e centile. La plupart des problèmes de LCP viennent d'une réponse serveur lente, de ressources bloquant le rendu ou d'une image principale non optimisée. Voici ce qui compte le plus, par ordre d'impact approximatif :
- Servez vite l'élément LCP : si c'est une image, compressez-la, utilisez un format moderne comme AVIF ou WebP, fixez la largeur et la hauteur et ajoutez fetchpriority high pour que le navigateur la charge en premier.
- Réduisez le temps de réponse du serveur (TTFB) : mettez le HTML en cache à la périphérie, utilisez un CDN et évitez les requêtes lentes sur le chemin critique. Un TTFB supérieur à 800ms rend un bon LCP presque impossible.
- Supprimez le CSS et le JavaScript bloquant le rendu : intégrez le CSS critique en inline, différez le reste et évitez les scripts tiers synchrones above the fold.
- Préchargez la ressource LCP : ajoutez un lien preload pour l'image principale ou la police afin qu'elle se télécharge avant que le navigateur ne la découvre dans le DOM.
- N'appliquez pas le lazy-loading à l'image LCP : le faire sur l'image principale above the fold la retarde. Utilisez le lazy-loading uniquement below the fold.
Exemple : précharger et prioriser l'image LCP
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" width="1200" height="600" fetchpriority="high" alt="Hero image">
Comment améliorer l'INP (Interaction to Next Paint)
L'INP a remplacé le First Input Delay comme Core Web Vital en mars 2024. Il mesure la rapidité avec laquelle la page répond aux interactions tout au long de la visite, pas seulement la première. Un bon INP est de 200ms ou moins au p75. Les problèmes d'INP sont presque toujours de longues tâches sur le thread principal. Pour l'améliorer :
- Découpez les tâches longues : fractionnez le travail qui dure plus de 50ms (une tâche longue) en morceaux plus petits et rendez la main au thread principal pour que les entrées soient traitées entre-temps.
- Différez le travail non urgent : sortez l'analytics, l'hydratation et les calculs lourds du chemin d'interaction, par exemple avec requestIdleCallback ou en attendant après le rendu de l'interaction.
- Envoyez moins de JavaScript : découpez le code par route et supprimez les scripts tiers inutilisés qui monopolisent le thread principal.
- Gardez les gestionnaires d'événements légers : appliquez un debounce aux mises à jour coûteuses et évitez le layout thrashing dans les gestionnaires pour qu'une interaction s'affiche vite.
- Déplacez les calculs lourds vers un web worker pour qu'ils ne bloquent jamais le thread principal pendant une interaction.
Comment améliorer le CLS (Cumulative Layout Shift)
Le CLS mesure les mouvements de mise en page inattendus pendant le chargement. Un bon CLS est de 0,1 ou moins. Les décalages viennent presque toujours de contenus qui se chargent sans espace réservé. Pour le corriger :
- Fixez la largeur et la hauteur, ou une aspect-ratio, sur les images, vidéos et embeds pour que le navigateur réserve leur place avant le chargement.
- Réservez de l'espace pour les publicités, bannières et embeds avec un min-height afin que le contenu qui se charge tard ne pousse pas la page vers le bas.
- Préchargez les polices et utilisez font-display optional ou une police de repli bien adaptée pour éviter le décalage dû à un changement tardif de police web.
- N'insérez jamais de contenu au-dessus du contenu existant, sauf en réponse directe à une interaction de l'utilisateur.
- Animez avec transform et opacity, pas avec des propriétés qui déclenchent la mise en page comme top, left, width ou height.
WordPress et les Core Web Vitals
Les sites WordPress échouent aux Core Web Vitals pour les mêmes quelques raisons : thèmes lourds, images non optimisées, CSS et JS de plugins bloquant le rendu et hébergement lent. Les correctifs les plus efficaces :
- Ajoutez la mise en cache des pages, via un plugin de cache ou un cache au niveau de l'hébergement, pour servir le HTML vite, plus un CDN pour les ressources. Cela seul corrige souvent le LCP.
- Optimisez les images avec un plugin d'images moderne qui sert l'AVIF ou le WebP, avec un bon dimensionnement et le lazy-loading uniquement below the fold.
- Réduisez la surcharge de plugins : chaque plugin qui charge du CSS ou du JS sur chaque page nuit à l'INP et au LCP. Auditez et supprimez ce dont vous n'avez pas besoin.
- Choisissez un thème léger et évitez les page builders qui envoient de grandes quantités de CSS et de JavaScript.
- Changez d'hébergement si le TTFB est élevé. Un hébergement mutualisé bon marché ne peut souvent pas offrir un bon LCP, quoi que vous optimisiez sur la page.
Les Core Web Vitals influencent-ils le SEO ?
Oui. Les Core Web Vitals font partie des signaux d'expérience de page de Google et peuvent influencer le classement, surtout comme critère de départage entre des pages de pertinence et de qualité similaires. Ce n'est pas une solution miracle qui l'emporte sur le contenu et les liens, mais de mauvaises mesures peuvent freiner une page, et de bonnes mesures lèvent un handicap.
Le gain le plus important est souvent commercial. Des pages plus rapides et plus stables convertissent mieux et rebondissent moins, donc améliorer les Core Web Vitals paie souvent en chiffre d'affaires avant de payer en classement. Google mesure le signal sur des données de terrain réelles issues de CrUX, donc les correctifs purement de laboratoire qui n'atteignent jamais les utilisateurs réels ne changent rien.
Associé : Core Web Vitals Checker · What are Core Web Vitals · Page Speed Monitoring