Corriger le retard de la bonne image
La grande image d’accueil apparaît tard, alors que la page a déjà commencé à se charger. Avant de compresser toute la bibliothèque, vérifiez si cette image est bien l’élément qui détermine le LCP. Cet indicateur mesure l’affichage du plus grand contenu admissible dans la zone visible. Il peut s’agir d’une image, mais aussi d’un bloc de texte ; son candidat peut changer selon la largeur de l’écran.
Le repère d’un bon LCP est de 2,5 secondes ou moins pour au moins 75 % des visites. Un essai local ne représente pas à lui seul ces visiteurs. Le but ici est de réduire un retard identifié, en conservant la qualité, le contenu et la mise en page utiles.
Les premières corrections utilisent l’éditeur et les médias natifs de WordPress. Un réglage de priorité demande parfois l’intervention du responsable du thème. L’extension de formats modernes proposée ensuite reste facultative. Elle sert à préparer les fichiers ; elle ne corrige pas une image cachée par une animation ou un document HTML qui arrive trop tard.
Identifier l’élément LCP dans le navigateur
Il vous faut un navigateur récent et l’URL publique de la page. Dans Chrome, le panneau Performance peut enregistrer le chargement et présenter les informations LCP. Choisissez une page de lecture, sans déclencher de paiement, d’envoi ou de connexion sensible. Notez la largeur d’écran et les conditions réseau retenues.
Le résultat attendu est le repérage de l’élément concerné et, s’il s’agit d’une image, de sa ressource. Le nom du fichier de l’image mise en avant n’est pas une preuve : le thème peut utiliser une autre variante. Fermez ensuite les outils ou rétablissez les conditions réseau modifiées pour revenir à votre navigation habituelle.
- Ouvrez la page, puis F12 et le panneau Performance. Lancez un enregistrement du chargement avec le bouton de rechargement proposé par ce panneau.
- Dans le rapport, ouvrez les informations ou l’événement LCP et examinez l’élément associé. Utilisez sa mise en évidence dans la page pour confirmer ce qu’il représente.
- Si l’élément est une image, notez son adresse et sa position. Dans Réseau, retrouvez sa requête et son moment de départ.
- Recommencez avec une largeur mobile. Si le candidat devient un titre ou une autre image, consignez ce changement avant de choisir la correction.
Choisir la correction selon la phase dominante
Le LCP d’une image peut être décomposé en quatre parties : réception initiale du document, attente avant le départ de l’image, téléchargement du fichier et attente avant son affichage. Un fichier plus petit aide surtout le téléchargement. Il ne supprime pas automatiquement les autres délais.
Si le document arrive tard, commencez par le temps de réponse du serveur. Si la demande de l’image part tard, examinez sa découverte dans le HTML, le chargement différé et sa priorité. Si elle part tôt mais reste longtemps en transfert, adaptez le fichier et vérifiez sa livraison. Si elle est déjà téléchargée alors qu’elle reste invisible, cherchez plutôt une règle de présentation ou un traitement JavaScript.
Choisissez d’abord l’approche qui correspond à votre relevé. Travaillez sur une copie pour les changements de thème ou d’extension, avec sauvegarde des fichiers et de la base, et actions sortantes neutralisées. Pour un simple remplacement éditorial, gardez au minimum l’ancien média, la version de la page et ses réglages. Sur un multisite, les autorisations de formats et d’extensions peuvent dépendre du réseau. Sur un hébergement géré, contrôlez les optimisations déjà actives avant d’en ajouter.
Approche 1 : choisir une résolution adaptée dans le bloc Image
Ce parcours convient lorsque l’image LCP est un bloc Image natif de la page et que sa ressource est inutilement grande. Il demande le droit de modifier cette page. Le menu Résolution choisit une taille de média disponible ; les poignées de redimensionnement et la largeur de présentation ne garantissent pas, à elles seules, un fichier plus léger.
Un visuel affiché sur une largeur modeste n’a pas toujours besoin du fichier original de plusieurs milliers de pixels. Il faut néanmoins conserver assez de détail pour la largeur réelle et les écrans à forte densité. Aucun nombre de pixels ne convient à toutes les bannières. Le navigateur peut aussi choisir une variante différente grâce aux images adaptatives.
- Dans Pages ou Articles, ouvrez Modifier sur le contenu concerné. Sélectionnez son bloc Image et notez le média, la résolution et les dimensions de présentation actuels.
- Dans la barre latérale du bloc, ouvrez l’onglet des réglages puis Résolution. Essayez une taille disponible appropriée, par exemple Large à la place de Taille originale.
- Enregistrez sur la copie, puis contrôlez le visuel sur mobile et ordinateur, notamment les détails et le cadrage.
- Vérifiez dans Réseau le fichier effectivement reçu et son transfert. Si la qualité baisse trop ou si rien ne change, restaurez la résolution initiale et examinez le fichier source ou le modèle qui affiche réellement l’image.
Remplacer le fichier par une copie préparée
Si les variantes restent trop lourdes, préparez une nouvelle copie du visuel dans votre outil d’image habituel. Conservez l’original hors ligne. Recadrez ce qui n’a pas besoin d’être transmis et exportez avec une qualité visuelle adaptée. Un JPEG peut convenir à une photographie ; WebP ou AVIF peuvent réduire son poids lorsque l’outil, WordPress et le serveur les prennent en charge. Changer simplement l’extension du nom ne convertit rien.
WordPress accepte nativement AVIF depuis la version 6.5 lorsque les bibliothèques d’image du serveur le permettent. Avec un administrateur, Outils, Santé du site, Informations, Traitement des médias permet d’examiner les formats pris en charge. Si le format choisi est refusé ou non traité, gardez un format compatible ; ne désactivez pas globalement le contrôle des fichiers.
- Exportez une copie sous un nouveau nom et comparez son poids et son rendu à l’original. Vérifiez particulièrement textes, contours et transparence.
- Dans l’éditeur, sélectionnez le bloc Image, puis Remplacer et Téléverser. Choisissez cette copie, sans effacer le média initial.
- Vérifiez texte alternatif, lien, légende et cadrage, puis enregistrez la page.
- Rechargez la page publique et contrôlez la nouvelle ressource. Pour annuler, utilisez Remplacer, Bibliothèque de médias et sélectionnez l’ancien média ; remettez aussi les réglages conservés.
Vérifier la ressource réellement téléchargée
Le poids du fichier conservé sur votre ordinateur ne décrit pas toujours ce que reçoit le visiteur. WordPress peut fournir plusieurs tailles ; un CDN peut modifier le format ; le navigateur choisit selon le balisage et son écran. Dans Réseau, examinez la requête de l’image identifiée, son adresse, son type de contenu et les octets transférés.
Si une réponse provient du cache local, son transfert apparent peut être presque nul. Pour comparer des chargements sans ce cache, utilisez l’option de désactivation du cache réseau du navigateur, en gardant le même réglage avant et après. Cette option ne vide pas le cache du serveur. Conservez aussi un contrôle en navigation ordinaire.
Si le bloc a changé mais que l’ancienne URL reste chargée, vérifiez que vous avez modifié la bonne image. Une bannière de modèle, une image mise en avant ou un fond CSS n’est pas nécessairement le bloc du contenu. N’effacez pas tous les médias ni tous les caches pour forcer le résultat. Invalidez seulement la page concernée avec l’outil prévu, si le diagnostic montre une copie ancienne, puis recommencez la mesure.
Approche 2 : rendre l’image disponible dès le départ
Ce parcours convient lorsque le téléchargement commence tard malgré un fichier raisonnable. Il faut pouvoir examiner la réponse HTML et les réglages du thème ou de l’optimisation déjà installée. Dans Réseau, ouvrez la réponse du document et recherchez le nom de la ressource. Comparez-la au balisage de l’image dans le panneau Éléments.
Une image importante devrait être découvrable dans le document, avec une vraie source. Des attributs data-src remplacés plus tard par un script peuvent retarder ce départ. Le chargement différé, indiqué notamment par loading="lazy", sert aux images qu’il est possible d’attendre ; il ne convient pas à l’image LCP déjà visible au premier écran. Une priorité élevée n’annule pas ce mécanisme.
WordPress applique déjà des heuristiques de chargement et de priorité. Si le HTML est correct, ne rajoutez pas une seconde optimisation identique. Si un composant réécrit l’image en chargement différé, utilisez son exclusion documentée pour cette seule image et conservez l’ancienne règle. Les menus varient : sans contrôle identifié, ne désactivez pas au hasard toute l’optimisation du site. Le résultat à vérifier est un départ plus tôt sans téléchargement en double ; rétablissez l’exclusion précédente si le comportement se dégrade.
Correction PHP réservée à une sortie d’image identifiée
Ce parcours avancé concerne une image produite par wp_get_attachment_image(), dans un thème enfant déjà en place. Il demande accès aux fichiers, sauvegarde et copie de test. Il ne s’applique pas automatiquement à un bloc enregistré, à un fond CSS ou à une image ajoutée en JavaScript. Vérifiez d’abord le code qui génère le visuel.
L’exemple filtre une seule combinaison : page 123, média 456 et classe CSS hero-principale déjà présente uniquement sur cet élément. Remplacez ces valeurs fictives par celles confirmées sur la copie. Le média peut être identifié depuis son écran d’édition dans la bibliothèque. Si vous ne pouvez pas distinguer une occurrence unique, n’utilisez pas cet exemple.
Dans wp-content/themes/dossier-enfant/functions.php, ajoutez le bloc dans le PHP existant, sans seconde balise d’ouverture. Il conserve les autres attributs, notamment les dimensions et les sources adaptatives. Il ne doit pas rendre prioritaires plusieurs images concurrentes : contrôlez aussi les priorités déjà ajoutées par le thème.
Le résultat attendu, dans le HTML livré, est loading="eager" et fetchpriority="high" sur la seule image retenue, puis un départ plus tôt si ce retard était la cause. Retirez ce seul bloc ou restaurez le fichier sauvegardé si l’effet n’est pas celui attendu. Un autre composant peut encore réécrire la sortie ; le contrôle final est indispensable.
add_filter( 'wp_get_attachment_image_attributes', function ( $attr, $attachment ) {
if ( ! is_page( 123 ) || 456 !== (int) $attachment->ID ) {
return $attr;
}
$classes = preg_split( '/\s+/', trim( $attr['class'] ?? '' ) );
if ( ! in_array( 'hero-principale', $classes, true ) ) {
return $attr;
}
$attr['loading'] = 'eager';
$attr['fetchpriority'] = 'high';
return $attr;
}, 10, 2 );Traiter les fonds CSS, les carrousels et les images masquées
Un fond défini seulement dans une feuille CSS externe peut être découvert après le chargement de cette feuille. Le filtre précédent n’agit pas sur lui. Si le visuel apporte une information, une version du modèle utilisant une véritable image dans le HTML peut être plus adaptée. Cette modification demande de reprendre la présentation sur copie, avec le responsable du thème, plutôt que d’empiler des préchargements.
Un préchargement doit correspondre à la ressource réellement utilisée, y compris ses variantes adaptatives. Précharger un grand JPEG alors que le navigateur affiche un autre fichier peut ajouter un téléchargement inutile. Ne préchargez pas toutes les diapositives d’un carrousel : elles se disputeraient les ressources du premier écran.
Enfin, si l’image est téléchargée tôt mais reste masquée par une animation ou un écran d’attente, réduire son poids ne supprimera pas ce délai d’affichage. Dans la copie, désactivez seulement l’animation d’entrée ou le masque identifié avec le réglage documenté du composant, puis comparez. Conservez son état initial pour le restaurer. Si vous devez supprimer du contenu ou une fonction pour obtenir un meilleur chiffre, la comparaison ne valide pas encore une correction.
Conserver l’espace, le cadrage et le sens du visuel
Une image plus rapide reste un échec si elle devient floue, coupe une information ou déplace le texte à son arrivée. Gardez les dimensions et proportions cohérentes avec sa place dans la page. Les attributs de largeur et de hauteur aident le navigateur à réserver l’espace ; ils ne sont pas une consigne de téléchargement d’un fichier plus petit.
Dans le bloc Image, les réglages de proportion, de couverture et de point focal changent la présentation. Contrôlez-les sur les deux largeurs retenues après un remplacement. Une couverture qui remplit le cadre peut couper les bords, tandis qu’un affichage contenant toute l’image peut laisser de l’espace. Choisissez en fonction du contenu, pas du seul score.
Vérifiez aussi le texte alternatif au bon endroit. La description du média sert de valeur par défaut à de nouvelles insertions ; la description d’un bloc existant peut être spécifique à cette page. Gardez une description utile pour une image informative et un marquage décoratif uniquement si elle n’ajoute aucune information ni fonction. Retirez enfin l’ancienne image du contenu seulement après validation du remplacement, sans supprimer son fichier de sauvegarde.
Approche 3 : préparer les nouveaux médias avec Modern Image Formats
Pour des imports réguliers, Modern Image Formats peut générer des variantes WebP ou AVIF sans conversion manuelle systématique. Cette extension gratuite est publiée par WordPress Performance Team. La version vérifiée est 2.7.1, avec WordPress 6.9 et PHP 7.4 minimum, et une compatibilité déclarée jusqu’à WordPress 7.1.4. Revérifiez sa fiche avant installation.
Elle dépend des capacités du serveur et vise les nouvelles images importées. L’activer ne transforme pas immédiatement la bibliothèque existante et ne règle pas la priorité de téléchargement. Si votre hébergeur ou CDN réalise déjà la conversion, comparez ce service avant d’ajouter une seconde chaîne.
- Sur la copie, ouvrez Extensions, Ajouter. Recherchez Modern Image Formats, vérifiez l’auteur, installez puis activez.
- Ouvrez Réglages, Médias, rubrique Modern Image Formats. Notez les options initiales et choisissez un format disponible selon les capacités indiquées.
- Examinez Output fallback images si vous avez besoin des variantes dans le format d’origine en plus des formats modernes. Leur génération consomme davantage d’espace ; conservez ce choix dans vos notes.
- Enregistrez les réglages et poursuivez avec un nouvel import de contrôle, sans lancer une régénération générale de la bibliothèque.
Contrôler un nouvel import et prévoir le retour arrière
Utilisez une copie d’une image dont vous détenez l’original. Importez-la dans la bibliothèque, puis placez-la dans une page de test avec le même type de bloc et de présentation que l’image concernée. Examinez sa qualité, les tailles produites et la requête réellement servie. La seule présence d’un fichier WebP ou AVIF sur le disque ne prouve pas que le navigateur l’utilise.
Le résultat attendu est une ressource adaptée, correctement affichée et moins coûteuse à transférer dans votre cas. Si le gain est faible, si la qualité est mauvaise ou si le traitement d’import échoue, revenez au média précédent et restaurez les réglages notés. Vous pouvez ensuite désactiver l’extension dans Extensions installées.
La désactivation n’est pas une opération de reconversion des fichiers déjà créés. Ne supprimez pas ces variantes pendant qu’une page ou un cache peut encore les référencer. Conservez l’original et vérifiez les pages de contrôle avant tout nettoyage. Pour des médias anciens, une régénération constitue une opération distincte, à préparer avec sauvegarde, espace et périmètre maîtrisé ; elle n’est pas nécessaire pour cet essai ciblé.
Comparer mobile et ordinateur dans les mêmes conditions
Après une correction, mesurez de nouveau la même URL avec les mêmes conditions de réseau, de cache et de fenêtre. Gardez plusieurs valeurs au lieu de retenir le meilleur essai. Contrôlez aussi l’élément LCP : une amélioration peut faire apparaître un autre candidat qui devient alors la limite suivante.
Sur mobile, vérifiez le fichier sélectionné, le cadrage et le moment où l’image commence à charger. Sur ordinateur, regardez également sa netteté aux largeurs réellement utilisées. Le navigateur peut légitimement recevoir deux variantes différentes dans ces deux situations ; ce qui compte est leur adéquation à l’affichage.
Conservez un relevé avant et après pour la phase ciblée. Un transfert réduit avec un LCP inchangé peut indiquer que l’attente s’est déplacée vers le rendu. Ne cumulez pas aussitôt plusieurs réglages supplémentaires : revenez à la décomposition du chargement pour comprendre la nouvelle limite.
Suivre l’effet sans transformer un score en promesse
Les mesures de terrain disponibles dans PageSpeed Insights peuvent confirmer ce que vivent les visiteurs, mais distinguez les données de cette URL de celles de l’ensemble du site. Leur période de collecte ne reflète pas instantanément un changement. L’absence de données pour une page peu visitée ne prouve pas une panne.
Gardez l’ancien média et les réglages précédents jusqu’à validation. Notez la taille retenue, l’éventuelle exclusion de chargement différé et la raison d’une priorité forcée. Recontrôlez après une modification du modèle, du carrousel ou de l’outil d’optimisation, car le candidat LCP peut changer.
Si le retard demeure, fournissez à la personne qui maintient le thème l’URL, la largeur d’écran, l’élément identifié, la ressource reçue et les phases mesurées. Ce relevé permet une correction ciblée du modèle ou du rendu, sans traiter toute la bibliothèque comme si chaque image avait le même rôle.
Comparer la découverte de l’image et la durée de sa requête
Dans la recette, WordPress sert une page d’essai dont l’image occupe la plus grande partie visible. Dans la première variante, un script ajoute l’image après une attente contrôlée. Dans la deuxième, le même fichier figure dès le HTML initial et le serveur garde le même délai de réponse pour l’image. Chrome lance sa requête plus tôt et mesure un LCP plus court. La médiane de découverte passe de 528 à 4 ms après la première réponse HTML, et la durée médiane de la requête d’image passe de 457 à 458 ms. Le LCP médian passe de 1 248 à 716 ms.
La troisième variante garde l’image dans le HTML initial et raccourcit le délai de réponse de la route d’image. Le fichier conserve les mêmes octets. Le LCP médian descend à 336 ms. Ce deuxième contrôle mesure l’attente d’une réponse d’image sur le serveur local. Une comparaison de formats ou de compression demanderait des fichiers différents et un réseau représentatif.
Choisir la correction d’après la phase qui prend le temps
Sur votre copie, ouvrez Performance dans Chrome et enregistrez un rechargement sans cliquer pendant la mesure. Repérez l’élément LCP et ouvrez la demande de son image dans Réseau. Relevez l’heure de réception du début du document HTML, le départ de la demande d’image et la fin de cette demande. Gardez aussi le nom de l’élément et l’adresse du fichier.
Si la demande commence longtemps après la première réponse HTML, vérifiez si l’image apparaît dans cette réponse ou si un script, un style ou un carrousel doit d’abord s’exécuter. Sur la copie, faites afficher l’image principale dans le HTML lorsque le modèle le permet, avec les dimensions adaptées et la même source pour la comparaison. Le résultat attendu est une demande qui part plus tôt. Si l’affichage ou la mise en page se dégrade, restaurez le modèle et reprenez le relevé avant d’essayer un autre changement.
Si la demande démarre déjà tôt et dure longtemps, regardez le détail de la requête avant de modifier la priorité. Une attente avant le premier octet oriente vers le service qui livre l’image. Un téléchargement long avec un fichier volumineux oriente vers une résolution ou une compression adaptée. Si la demande finit tôt et que l’image n’apparaît que plus tard, vérifiez les conditions de rendu, de visibilité et d’affichage du composant.
Garder un scénario de mesure que l’on peut refaire
Le banc utilise une nouvelle session de navigateur à chaque chargement, trois essais par variante et la médiane. Pour comparer votre propre correction, reprenez la même page, la même largeur et les mêmes réglages de réseau. Vérifiez que le candidat LCP reste celui que vous vouliez améliorer. Si le candidat change après la correction, notez la nouvelle image ou le nouveau texte. Une comparaison de chiffres sans l’identité de l’élément peut masquer ce changement.
La mesure locale indique où la copie gagne du temps dans ce scénario. Pour le suivi du site, comparez séparément les observations des visiteurs lorsque des données de terrain existent. Leurs réseaux, leurs appareils et leurs pages d’entrée peuvent modifier la phase dominante.
