Images, lazy loading, WebP, AVIF : que faut-il vraiment faire pour accélérer WordPress ?

Les images pèsent souvent 50 à 70 % du poids total d’une page WordPress. Vous pouvez installer tous les plugins de cache du marché : si vos visuels sont mal formatés, mal dimensionnés ou mal chargés, votre LCP restera dans le rouge. Voici ce qu’il faut vraiment faire, sans mythe ni superlatif.

Pourquoi l’image reste le premier levier de vitesse sur WordPress

Soyons précis : sur un site WordPress standard (thème classique ou Elementor), les images non optimisées représentent la première cause de lenteur, devant le JavaScript et la base de données. Un simple upload en 4000 pixels de large, affiché en 800 pixels sur la page, gaspille de la bande passante sans aucun bénéfice visuel.

Ce constat rejoint directement la question du LCP (Largest Contentful Paint) : dans la grande majorité des cas, l’élément LCP d’une page WordPress est une image, une bannière ou un visuel produit. Optimiser vos images n’est donc pas un chantier isolé, c’est le prérequis pour progresser sur ce Core Web Vital.

WebP, AVIF, JPEG XL : quel format choisir en 2026

Trois formats modernes se disputent la place du JPEG et du PNG. Voici où en est réellement la compatibilité et le gain de poids, sans y ajouter de promesse chiffrée non vérifiable.

En pratique : générez systématiquement vos images en WebP ET en AVIF, et laissez la balise <picture> servir le format le plus performant que le navigateur du visiteur accepte, avec un repli automatique sur WebP ou JPEG. C’est ce que font nativement la plupart des plugins d’optimisation sérieux depuis 2024.

Lazy loading : la bonne pratique (et l’erreur qui casse le LCP)

Le lazy loading est activé nativement sur WordPress depuis la version 5.5. C’est une bonne nouvelle, mais c’est aussi la source de l’erreur la plus fréquente que je constate en audit.

L’erreur classique : l’attribut loading="lazy" se retrouve, par héritage du thème ou du builder, sur l’image hero elle-même : celle qui est visible dès le chargement de la page, souvent l’élément LCP. Résultat : le navigateur retarde volontairement son chargement, et votre LCP se dégrade au lieu de s’améliorer. Ce point rejoint directement ce que nous détaillions sur les scripts à désactiver page par page : un réglage générique appliqué sans distinction nuit parfois plus qu’il n’aide.

1. Retirez le lazy loading de l’image LCPIdentifiez l’image visible au-dessus de la ligne de flottaison et forcez loading="eager" ou fetchpriority="high" dessus.
2. Laissez le lazy loading natif sur le resteToutes les images sous la ligne de flottaison bénéficient du loading="lazy" par défaut, sans plugin supplémentaire.
3. Vérifiez les carrousels et slidersCes composants chargent souvent plusieurs images hors écran d’un coup : contrôlez qu’ils respectent bien le lazy loading, faute de quoi vous perdez le bénéfice sur mobile.

Images responsives : srcset, sizes, dimensions déclarées

C’est le point le plus survolé par la concurrence, et pourtant celui qui a le plus d’impact conjoint sur le poids ET la stabilité visuelle. Deux réflexes à avoir systématiquement :

Le srcset permet de servir une image adaptée à la largeur réelle de l’écran du visiteur, plutôt qu’une seule version lourde pour tout le monde. WordPress le génère automatiquement pour les images insérées via la médiathèque, à condition que les tailles intermédiaires existent dans vos réglages Médias.

Les attributs width et height doivent toujours être déclarés dans le HTML. Sans eux, le navigateur ne réserve pas d’espace pour l’image pendant le chargement, ce qui provoque un décalage de mise en page au moment où elle apparaît : exactement le mécanisme que nous décortiquons dans notre guide sur la réduction du CLS sur WordPress.

Plugins ou configuration serveur : que choisir

Deux approches coexistent, et elles ne s’excluent pas.

Les plugins (ShortPixel, Imagify, EWWW) automatisent la conversion WebP/AVIF, la compression et parfois le redimensionnement à l’upload. C’est la solution la plus accessible pour la majorité des sites, sans compétence serveur particulière.

La configuration serveur (scripts cwebp/avifenc, règles Nginx ou Apache servant le bon format selon l’en-tête Accept) offre un contrôle plus fin et évite la dépendance à un plugin tiers, mais demande un accès technique à l’hébergement. Sur les configurations utilisant déjà WP Rocket ou LiteSpeed Cache, la conversion d’image est souvent déjà intégrée nativement : vérifiez avant d’ajouter un plugin en doublon, qui alourdirait inutilement votre base de données.

Checklist avant mise en production

1. Auditez le poids réel des imagesPassez vos pages clés dans PageSpeed Insights et repérez les images qui dépassent 150 à 200 Ko.
2. Générez WebP + AVIF avec fallbackVérifiez que la balise picture ou votre plugin sert bien le meilleur format supporté par chaque navigateur.
3. Corrigez le lazy loading de l’image LCPContrôlez qu’aucune image visible au-dessus de la ligne de flottaison n’est en loading="lazy".
4. Déclarez width et height partoutSur les images du thème comme sur celles insérées dans le contenu.
5. Nettoyez la médiathèqueDes images orphelines ou en doublon alourdissent aussi la base de données ; un passage régulier de nettoyage, comme évoqué dans notre guide sur le nettoyage de la base de données WordPress, complète utilement ce travail.

Ce qu’il faut retenir

L’optimisation d’image n’est pas une case à cocher isolée : c’est un travail conjoint sur le format, le chargement et le dimensionnement, qui conditionne directement votre LCP et votre CLS. Si l’audit de vos images révèle des lacunes structurelles (thème, builder, hébergement), faire appel à un spécialiste SEO WordPress permet souvent de gagner plusieurs mois de tâtonnement.