Corriger un LCP lent causé par une image

Corrigez une image Largest Contentful Paint (LCP) lente en 4 étapes : redimensionnez-la à sa taille d'affichage, convertissez-la en WebP ou AVIF, préchargez-la et définissez fetchpriority sur high. Les 2 premières étapes apportent l'essentiel de l'amélioration et ne nécessitent aucune modification du balisage de votre page.

Sur la plupart des pages, l'élément Largest Contentful Paint est une seule image de héros, ce qui signifie que le LCP est en réalité une question concernant un seul fichier plutôt que l'ensemble de votre site. Corriger ce seul fichier permet généralement de faire évoluer la mesure plus que toute autre optimisation disponible.

Ce que mesure le LCP

Le LCP enregistre le temps nécessaire au rendu de l'élément visible le plus grand, mesuré à partir du moment où la page commence à se charger. Google considère qu'une valeur de 2,5 secondes ou moins est bonne, de 2,5 à 4 secondes nécessite une amélioration, et plus de 4 secondes est médiocre.

L'élément mesuré est généralement une image, parfois un bloc de texte de titre, et il s'agit toujours de quelque chose de visible sans défilement. L'élément peut changer d'un appareil à l'autre, car une image de héros qui domine une mise en page sur ordinateur peut se situer sous la ligne de flottaison sur un téléphone.

Trouver l'élément responsable

Exécutez Lighthouse et lisez l'entrée de l'élément Largest Contentful Paint, qui nomme l'élément exact mesuré. Deviner fait perdre du temps, car l'élément n'est fréquemment pas celui auquel on pense.

Vérifiez sur mobile ainsi que sur ordinateur, car les mises en page diffèrent et la réponse aussi. Les données de terrain provenant de visiteurs réels sont plus fiables qu'une seule exécution en laboratoire, car les conditions de réseau varient beaucoup plus dans la réalité que lors d'un test. En cas de désaccord entre les deux, fiez-vous aux données de terrain et utilisez l'exécution en laboratoire pour le diagnostic.

Corriger l'image par ordre d'impact

Pour améliorer le LCP sur une image, suivez ces 6 étapes dans l'ordre.

1. Redimensionnez l'image à la plus grande taille qu'elle affichera jamais, doublée pour les écrans haute densité.
2. Convertissez-la en WebP, ou en AVIF s'il s'agit d'une grande image photographique.
3. Compressez pour atteindre une cible inférieure à 200 KB pour une image de héros, ce qui est réalisable en pleine largeur sur la plupart des designs.
4. Ajoutez des attributs de largeur et de hauteur pour que le navigateur réserve l'espace et qu'aucun décalage de mise en page ne se produise.
5. Préchargez l'image dans l'en-tête de la page afin que le navigateur commence à la récupérer immédiatement.
6. Définissez fetchpriority sur high sur l'élément image, ce qui indique au navigateur que ce fichier est le plus important.

Les étapes 1 et 2 apportent généralement la majeure partie de l'amélioration, et ce sont les deux qui ne nécessitent pas de toucher au balisage de la page.

Pourquoi le redimensionnement l'emporte sur la compression

Les dimensions contrôlent la majeure partie de la taille d'un fichier, le redimensionnement supprime donc plus de poids que n'importe quel paramètre de qualité. Une photographie de 4000 pixels affichée à 1200 pixels contient 11 fois plus de données de pixels que ce que la page peut afficher.

La troisième ligne montre pourquoi le redimensionnement vient en premier. Le redimensionnement seul a surpassé la compression seule, et la combinaison a surpassé les deux. Les chiffres varient selon l'image et la connexion, tandis que l'ordre reste constant.

Preload et fetchpriority

Le préchargement indique au navigateur de récupérer l'image de héros avant d'avoir fini d'analyser la page, ce qui permet généralement de gagner 200 à 500 millisecondes. Ce paramètre est important car les navigateurs découvrent les images tardivement dans le processus d'analyse.

Préchargez une seule image. En précharger plusieurs supprime l'avantage, car le navigateur divise alors son attention exactement comme il l'aurait fait de toute façon. Définir fetchpriority sur high permet d'obtenir un résultat similaire avec moins de balisage et suffit fréquemment à lui seul pour une image déjà présente dans le HTML initial.

Erreurs qui aggravent le LCP

• Appliquer le lazy loading sur l'image de héros. Le chargement différé retarde le fichier même que vous voulez en premier. Appliquez-le uniquement sous la ligne de flottaison.
• Charger l'image de héros via JavaScript. Une image insérée par script ne peut pas commencer à se télécharger tant que le script n'est pas exécuté.
• Utiliser une image d'arrière-plan CSS. Les images d'arrière-plan sont découvertes plus tard que les éléments img et ne peuvent pas être priorisées aussi facilement.
• Précharger plusieurs images. Les priorités concurrentes suppriment entièrement l'avantage.
• Omettre la largeur et la hauteur. Le décalage de mise en page nuit à une autre mesure pendant que celle-ci s'améliore.

Quand l'élément LCP est du texte

Un LCP basé sur du texte est généralement retardé par les polices web plutôt que par le texte lui-même. Le navigateur dispose immédiatement des mots et attend un fichier de police avant de les afficher.

Définissez font-display sur swap pour que le texte s'affiche dans une police de secours et bascule lorsque la police web arrive. Préchargez le fichier de police unique le plus important, et sous-définissez la police aux caractères que vos pages utilisent réellement, ce qui réduit fréquemment une police de 200 KB à moins de 30 KB. Servir les polices depuis votre propre domaine supprime une connexion supplémentaire vers un tiers.

Le temps de réponse du serveur fixe la limite

Le LCP ne peut pas être plus rapide que le temps nécessaire à votre serveur pour renvoyer le premier octet, de sorte qu'un serveur lent limite toute autre amélioration. Visez moins de 600 millisecondes pour le premier octet.

Vérifiez ce chiffre avant d'optimiser les images, car une réponse du serveur de 2 secondes rend impossible un objectif de LCP de 2,5 secondes, quoi que vous fassiez aux fichiers. La mise en cache, un hébergeur plus rapide ou un réseau de diffusion de contenu (CDN) résolvent ce problème. Le travail sur les images améliore ensuite ce qui reste plutôt que de lutter contre une limite fixée ailleurs.

Les scripts tiers retardent également l'image

Les scripts d'analyse, de bannières de consentement, de widgets de discussion et de publicité rivalisent avec votre image de héros pour la bande passante et le temps de traitement. Une image parfaitement optimisée s'affiche toujours tardivement lorsque 12 scripts se chargent avant elle.

Les bannières de consentement sont les plus dommageables, car beaucoup bloquent le rendu jusqu'à ce que le visiteur fasse un choix. Chargez les scripts tiers avec l'attribut defer ou async afin qu'ils ne bloquent pas la page, et évaluez combien sont réellement nécessaires. Supprimer 3 scripts de suivi inutilisés améliore fréquemment le LCP plus qu'une nouvelle phase de compression d'image.

Tester correctement le changement

Testez dans une fenêtre de navigation privée avec les extensions désactivées, et effectuez la mesure 3 fois plutôt que de vous fier à un seul résultat. Les scores varient d'une exécution à l'autre de manière notable.

Vérifiez que le navigateur a bien reçu le fichier plus petit. Ouvrez les outils de développement, passez à l'onglet Réseau, filtrez par images et rechargez. La taille transférée et le format apparaissent dans la liste. Une page servant toujours l'ancien fichier signifie généralement qu'une couche de mise en cache conserve la version précédente plutôt que l'échec de l'optimisation.

Garder le LCP rapide après la correction

Définissez une règle pour les images de héros plutôt que de les corriger une par une, car les nouvelles pages réintroduisent le problème. Un site corrigé une fois régressera en quelques mois si les éditeurs téléversent directement depuis un appareil photo.

Convenez d'une largeur maximale et d'une taille de fichier maximale pour les images de héros, notez-le et appliquez-le à chaque nouvelle page. Une règle telle que 1920 pixels de large et moins de 200 KB est facile à vérifier et couvre presque tous les designs. Lorsque plusieurs personnes publient, la règle écrite importe plus que la technique, car la mesure reflète la pire page plutôt que la meilleure.

Préparer les images de héros en une seule fois

Traitez ensemble toutes les images de héros du site, car elles partagent une même spécification et une même taille cible. La plupart des sites en comptent entre 10 et 100 sur les pages de destination, les pages de catégories et les articles.

Définissez la largeur et la cible en KB une seule fois, déposez les images, et chaque fichier est renvoyé adapté. Jusqu'à 500 images peuvent être traitées par lot, entièrement dans votre navigateur sur votre propre processeur. Rien n'est téléversé, de sorte que les ressources de préproduction, les pages de campagne non publiées et le travail des clients restent sur votre machine pendant que toute la bibliothèque est préparée.