Comment la taille des images affecte les Core Web Vitals

Quels Core Web Vitals sont concernés ?

Largest Contentful Paint (LCP) mesure quand la plus grande image ou le plus grand bloc de texte visible est rendu. Ce peut être une photo, mais pas automatiquement le logo ou le fichier le plus lourd. Identifiez l’élément mesuré. Le guide LCP de Google distingue découverte, téléchargement et rendu.

Cumulative Layout Shift (CLS) mesure les déplacements inattendus. Sans espace réservé, une image peut pousser le contenu à son arrivée. Le guide CLS conseille des dimensions permettant au navigateur de réserver le bon ratio.

Interaction to Next Paint (INP) concerne la réactivité aux interactions. Compresser une photo ne répare pas automatiquement un menu lent ou un traitement de clic coûteux. Consultez séparément la documentation INP.

Qu’est-ce qu’un bon résultat Core Web Vitals ?

Le tableau reprend les bons seuils des recommandations Core Web Vitals de Google. Les trois indicateurs doivent respecter leur seuil au 75e centile des visites réelles, en évaluant séparément mobile et ordinateur. Une image plus légère ou un seul bon test en laboratoire ne suffit pas à établir que la page réussit l’évaluation. Si l’INP pose problème, examinez les délais d’interaction plutôt que de recompresser la photo.

Commencez par l’image principale visible

Sur une fiche produit, examinez la photo principale ; dans un article, l’image ou le titre identifié par le rapport. Notez poids, dimensions en pixels et taille affichée avant de créer une copie pour comparer avant et après.

Si la photo dépasse largement les besoins, utilisez le redimensionnement, puis comparez un export avec JPG vers WebP. Jugez les détails ou textes utiles au visiteur, pas seulement la réduction du poids du fichier.

Laissez le navigateur charger l’image principale tôt

Ne différez pas le chargement de l’image LCP. Même un petit fichier peut apparaître tard si des scripts retardent sa découverte. Faites examiner la requête réelle par le développeur du thème ou du site si la compression aide peu.

Réservez le chargement différé aux images plus bas lorsque c’est pertinent. La première photo visible d’une galerie doit arriver immédiatement ; les suivantes peuvent attendre que le visiteur s’en approche.

Identifiez l’image LCP mesurée sur la page publiée. Elle doit être découverte tôt et ne pas être chargée en différé. Un développeur peut envisager fetchpriority="high" pour cette image précise ; l’appliquer à toute la galerie annule l’intérêt du choix. Vérifiez ensuite les requêtes réseau.

Stabilisez la mise en page

Indiquez largeur et hauteur dans le code et préservez les proportions avec des styles adaptatifs. Vérifiez téléphone étroit et grand écran. Pour un recadrage volontaire, réservez systématiquement la surface du cadre affiché.

Inspectez aussi bannières, contenus intégrés et polices si les déplacements persistent. Remplacer une photo ne corrige pas un avis inséré au-dessus de l’article après son affichage.

Des dimensions HTML comme width="1200" et height="800" indiquent le ratio. Le CSS peut afficher l’image plus petite avec max-width: 100% et height: auto. Vérifiez que le thème n’impose pas une hauteur fixe incompatible. Une carte volontairement recadrée demande son propre espace réservé.

Si le paragraphe saute encore à l’apparition d’un fichier plus petit, il manque peut-être toujours un espace réservé. Corrigez les dimensions ou le conteneur de recadrage et retestez. Inversement, un cadre stable peut contenir une image lente : réserver de l’espace ne réduit pas le fichier.

Vérifiez un changement à la fois

1. Notez URL, appareil et élément problématique.
2. Modifiez une image ou un réglage de chargement.
3. Confirmez que la page demande le nouveau fichier et non l’ancien en cache.
4. Répétez le même test et examinez le premier écran.
5. Gardez le changement si qualité et mesure le justifient.

L’export n’est qu’une partie des performances. Poursuivez avec la méthode PageSpeed pour les images.