Sur beaucoup de sites WordPress, la performance se joue sur un point : les images. Une photo hero trop lourde, des tailles mal adaptees au mobile, ou un lazy loading mal place, et la page devient lente. L’objectif reste simple : servir la bonne image, au bon format, au bon moment, que vos visiteurs soient a Lausanne et Vevey (Vaud), Genève et Carouge (Genève), Fribourg et Bulle (Fribourg), Sion et Martigny (Valais), Neuchâtel et La Chaux-de-Fonds (Neuchâtel), Delémont et Porrentruy (Jura), ou dans le Jura bernois.
Sources officielles : web.dev (choisir le bon format d’image), web.dev (images responsive), web.dev (LCP), Google Search Central (Core Web Vitals), WordPress Core (lazy loading), WordPress Core (fetchpriority sur l’image LCP), MDN (attribut fetchpriority).
1) Format : JPEG/PNG quand il faut, WebP/AVIF quand c’est possible
Les formats modernes (WebP, AVIF) reduisent souvent le poids a qualite equivalente. Pour vos visuels de pages services et d’articles, le gain est direct : moins de donnees a charger, donc un rendu plus rapide sur mobile.
- AVIF : excellent ratio qualite/poids, utile pour des photos de grande taille.
- WebP : tres bon compromis et largement utilise sur le web.
- JPEG : garde sa place pour des compatibilites ou des workflows simples.
- PNG : a reserver aux transparences ou aux besoins specifques, car souvent plus lourd.
2) Responsive : servir une image plus petite aux ecrans plus petits
Une erreur frequente consiste a envoyer une image « desktop » a un mobile. Les images responsive permettent de fournir plusieurs tailles, et le navigateur choisit la plus adaptee. WordPress genere deja plusieurs tailles a l’upload, a condition d’utiliser correctement la bibliotheque de medias (plutot que des images « en dur »).
- Importer une image en bonne qualite, puis laisser WordPress generer ses tailles.
- Eviter d’inserer une image geante dans un petit bloc, puis de « reduire au visuel » uniquement.
- Verifier que les dimensions (width/height) sont presentes, pour limiter les deplacements de mise en page.
3) Lazy loading : utile, mais pas sur l’image principale
WordPress a integre le lazy loading dans le core. Cela aide a ne charger que ce qui entre dans la zone visible. En revanche, appliquer le lazy loading sur l’image la plus importante (souvent celle du haut de page) peut penaliser le chargement percu, donc le LCP.
- Garder le lazy loading pour les images plus bas dans la page (galeries, sections secondaires).
- Eviter le lazy loading sur l’image hero ou l’image LCP.
- Tester sur mobile, car c’est la ou l’effet est le plus visible.
4) LCP : prioriser l’image la plus importante (fetchpriority)
Le LCP mesure le moment ou le plus gros element visible (souvent une image) est rendu. WordPress a ajoute une optimisation: il peut appliquer automatiquement fetchpriority="high" a l’image qu’il estime etre l’image LCP. Cet attribut indique au navigateur que cette ressource compte davantage pour l’experience et doit etre chargee plus tot.
Pratique : si votre hero est une image, verifiez qu’elle est bien priorisee et qu’elle n’est pas lazy-load. Si le hero est un fond CSS, la priorisation est souvent moins evidente et demande une approche differente.
5) Check-list « images » avant publication (10 minutes)
- Image hero : format moderne si possible, pas de lazy loading, taille adaptee.
- Images de contenu : responsive (plusieurs tailles), compression raisonnable.
- Dimensions presentes (width/height) pour stabiliser la mise en page.
- Alt-text utile (description informative, pas du remplissage).
- Test mobile sur 1 page service et 1 article, dans 2 reseaux differents (Wi-Fi et 4G/5G).
FAQ Optimisation images WordPress (Suisse romande)
WebP ou AVIF : lequel choisir sur WordPress ?
Les deux peuvent etre pertinents. AVIF compresse souvent mieux, WebP reste un standard pratique. L’approche la plus simple consiste a servir un format moderne quand c’est possible, en gardant une solution de repli si necessaire.
Pourquoi mon score LCP reste mauvais alors que j’ai active le lazy loading ?
Si l’image la plus grande au-dessus de la ligne de flottaison est lazy-load, le navigateur peut la charger trop tard. Le LCP s’en ressent. Il vaut mieux prioriser l’image LCP (et garder le lazy loading pour le reste).
WordPress ajoute fetchpriority= »high » tout seul : dois-je faire quelque chose ?
Souvent non. Un controle rapide suffit: verifier que l’attribut est sur la bonne image, et que cette image est vraiment celle que vous voulez afficher en premier. En cas de hero atypique (fond CSS, slider), un ajustement peut etre utile.
Est-ce que des images plus legeres aident aussi le SEO local (Vaud, Valais, Fribourg) ?
Oui, indirectement. Une page plus rapide et plus stable est plus confortable a consulter, surtout sur mobile. Les Core Web Vitals servent de signaux d’experience, et cela soutient un parcours local vers l’appel ou le formulaire.
Besoin d’optimiser les images sans perdre en qualite visuelle ?
Pour cadrer WebP/AVIF, valider l’image LCP, garder des images responsive et une experience mobile solide sur l’ensemble des cantons romands, contactez clickclick.ch.
