Core Web Vitals : la performance comme facteur de ranking

Les trois métriques, en français

LCP - Largest Contentful Paint

Le temps nécessaire pour afficher le plus gros élément visible en haut de page : généralement l'image principale ou le titre. C'est la mesure du « quand est-ce que je vois enfin quelque chose d'utile ».

Objectif : moins de 2,5 secondes.

INP - Interaction to Next Paint

Le délai entre le moment où l'utilisateur agit - un clic, une saisie - et le moment où l'interface réagit visiblement. Cette métrique a remplacé l'ancien FID, qui ne mesurait que la toute première interaction. L'INP évalue l'ensemble de la session, ce qui est beaucoup plus représentatif.

Objectif : moins de 200 millisecondes.

CLS - Cumulative Layout Shift

La quantité de mouvement imprévu du contenu pendant le chargement. C'est le phénomène bien connu : vous allez cliquer sur un lien, une bannière se charge au-dessus, tout descend, et vous cliquez sur autre chose.

Objectif : moins de 0,1.

Améliorer le LCP

Dans l'immense majorité des cas, l'élément qui plombe le LCP est l'image principale de la page. Les actions par ordre d'efficacité :

1. Redimensionner l'image à sa taille réelle d'affichage. Une photo de 4000 pixels de large dans un bloc de 800 pixels est du gaspillage pur.
2. Convertir en WebP ou AVIF, qui réduisent souvent le poids de 30 à 50 % à qualité visuelle équivalente.
3. Ne jamais mettre loading="lazy" sur l'image principale visible d'emblée - c'est l'erreur la plus courante, et elle dégrade directement le LCP.
4. Précharger cette image avec <link rel="preload"> pour que le navigateur la demande immédiatement.
5. Réduire le temps de réponse serveur. Un hébergement lent ou une base de données mal indexée retarde tout le reste.
6. Éliminer les ressources bloquantes dans l'en-tête : feuilles de style volumineuses, scripts synchrones.

Améliorer l'INP

L'INP est presque toujours un problème de JavaScript. Le navigateur ne peut faire qu'une chose à la fois sur le fil principal : si un script l'occupe pendant 300 millisecondes, aucun clic ne sera traité pendant ce temps.

• Supprimez ce qui ne sert pas. Les sites accumulent des scripts de suivi, de test, de chat, oubliés depuis des mois. Auditez et retirez.
• Découpez les tâches longues. Une opération lourde doit rendre la main régulièrement plutôt que de bloquer le fil pendant une demi-seconde.
• Différez les scripts non critiques avec defer ou en les chargeant après l'interaction.
• Limitez les scripts tiers. Chaque outil externe ajoute du poids, du risque de panne et du délai, sur lesquels vous n'avez aucun contrôle.

Améliorer le CLS

C'est la métrique la plus simple à corriger, et souvent la plus vite gagnée.

• Déclarez les dimensions de toutes les images et iframes, via les attributs width et height ou via aspect-ratio en CSS. Le navigateur réserve alors la place avant même de charger le fichier.
• Réservez l'espace des contenus injectés : bannières, bandeaux cookies, publicités. Jamais de contenu inséré au-dessus de quelque chose que l'utilisateur est en train de lire.
• Utilisez font-display: swap avec une police de repli aux métriques proches, pour éviter que le texte ne change de taille au chargement.
• Animez uniquement transform et opacity, qui ne provoquent pas de recalcul de mise en page.

Mesurer correctement

Les outils à utiliser, et ce qu'ils apportent chacun :

• PageSpeed Insights - donne à la fois les données de terrain, quand elles existent, et un diagnostic de labo avec des recommandations priorisées.
• Search Console, rapport Signaux web essentiels - montre l'évolution dans le temps et regroupe les pages par type de problème. C'est le plus utile pour savoir par où commencer.
• Lighthouse, intégré au navigateur - pratique pour tester en local pendant le développement.

Un conseil de méthode : mesurez avant de modifier, corrigez un point à la fois, remesurez. Les optimisations groupées empêchent de savoir ce qui a réellement produit l'effet - et parfois, une « optimisation » dégrade une autre métrique.