SparkCore
Améliorer les Core Web Vitals avec des médias plus légers
LCP et CLS dépendent souvent d'images lourdes. Des fichiers plus légers et des dimensions fixes aident immédiatement.
En bref
- Un bon score : LCP de 2,5 secondes ou moins, INP de 200 millisecondes ou moins, CLS de 0,1 ou moins.
- Les images touchent surtout LCP et CLS, INP dépend davantage de JavaScript.
- Ne chargez jamais en différé (lazy load) votre première grande image et donnez à chaque image width et height.
Gains rapides
- Compressez les images hero et les photos produit
- Utilisez des formats modernes
- Évitez les fichiers trop grands
Que sont les Core Web Vitals et quels scores sont bons ?
Les Core Web Vitals mesurent la sensation que procure une page aux visiteurs. LCP mesure la rapidité d'affichage du plus grand élément visible. INP mesure la rapidité de réaction de la page aux clics et aux appuis. CLS mesure l'ampleur des décalages de mise en page pendant le chargement. Un bon score correspond à un LCP de 2,5 secondes ou moins, un INP de 200 millisecondes ou moins et un CLS de 0,1 ou moins. Mesurez de préférence avec des données de vrais visiteurs, pas seulement avec un test en laboratoire.
- LCP : 2,5 secondes ou moins
- INP : 200 millisecondes ou moins
- CLS : 0,1 ou moins
Comment améliorer LCP sur WordPress ?
Sur beaucoup de pages, l'élément LCP est une grande image, comme une image hero ou une photo produit. Rendez donc ce fichier aussi léger que possible et servez-le dans un format moderne. Ne le chargez pas en différé : il est visible tout de suite et doit démarrer immédiatement. Un serveur rapide et un cache de page réduisent le délai avant le premier octet, ce qui compte aussi pour LCP. Ne téléversez en outre aucune image bien plus grande que son emplacement.
- Compressez l'image hero et les photos produit
- Utilisez WebP ou AVIF avec une solution de repli
- Ne mettez pas de chargement différé sur la première image
Comment éviter les décalages de mise en page (CLS) avec les images ?
Un décalage de mise en page apparaît lorsque le navigateur ne connaît pas la taille d'une image. Le texte descend alors dès que l'image arrive. Donnez donc à chaque image un width et un height. Le navigateur réserve alors l'espace voulu avant le chargement. WordPress ajoute généralement lui-même ces attributs aux images de la médiathèque. Vérifiez toutefois vos propres blocs, éléments de thème et code. Réservez aussi de l'espace pour les bannières, les publicités et les polices qui se chargent plus tard.
Que faire pour INP et en quoi le cache aide-t-il ?
INP dépend surtout de JavaScript. Les scripts lourds des thèmes, plugins et traceurs occupent le fil principal. Supprimez ce que vous n'utilisez pas et différez le chargement du reste. Les images jouent ici un rôle mineur. Le cache aide surtout pour LCP. Une page en cache est prête plus vite, et un CDN rapproche les fichiers du visiteur. Mesurez de nouveau après chaque modification et ne changez qu'une chose à la fois, sinon vous ne saurez pas ce qui a fonctionné.
Questions fréquentes
Généralement LCP, car le plus grand élément est souvent une image. Compressez ce fichier, choisissez un format moderne et ne le chargez pas en différé. Vient ensuite CLS : donnez à chaque image width et height.
Non. Le chargement différé est prévu pour les images sous la ligne de flottaison. WordPress applique loading lazy automatiquement aux images. La première grande image, souvent l'élément LCP, chargez-la au contraire immédiatement, sinon votre LCP devient plus lent.
Les images ne sont qu'une partie de l'histoire. Un hébergement lent, des scripts lourds, des pages non mises en cache et une mise en page qui bouge pèsent aussi. Consultez votre rapport pour voir, métrique par métrique, quel élément ou script en est la cause.