Sur beaucoup de sites WordPress, l’image « jolie » devient l’élément le plus lourd de la page. Résultat : LCP plus lent, pages moins réactives sur mobile, et visibilité qui stagne. Une optimisation propre repose sur 4 leviers : format moderne (WebP, parfois AVIF), images responsives (srcset), lazy-loading contrôlé, et bonnes pratiques Image SEO (alt text, contexte, cohérence des URLs).
Applicable à une PME en Suisse romande, avec des visiteurs à Lausanne, Nyon, Vevey (Vaud), Genève, Carouge, Meyrin (Genève), Fribourg, Bulle (Fribourg), Sion, Martigny, Monthey (Valais), Neuchâtel, La Chaux-de-Fonds (Neuchâtel), Delémont, Porrentruy (Jura), et, selon votre zone, Bienne (Jura bernois).
Sources officielles : Google Search Central (Image SEO), web.dev (choisir le bon format), Chrome Developers (image delivery), web.dev (optimiser le LCP), Developer.WordPress.org (responsive images), Make WordPress Core (lazy-loading), MDN (images responsives en HTML).
1) Priorite : identifier l’image LCP (souvent la hero)
Sur de nombreuses pages, le LCP correspond à une grande image au-dessus de la ligne de flottaison (banniere, hero, produit principal). Quand elle est trop lourde, tout le ressenti « vitesse » s’effondre. Première étape : repérer cette image, puis optimiser son format, sa taille et sa livraison.
2) Formats modernes : WebP d’abord, AVIF si la chaine le permet
Deux règles simples :
- WebP est un bon remplaçant pour la majorité des JPEG/PNG, avec un bon compromis poids/qualité.
- AVIF peut aller plus loin en compression sur certains visuels, mais demande un encodage et des tests de qualité plus stricts.
Astuce pragmatique : commencer par WebP sur les pages critiques (Accueil, pages services, pages produits). Ensuite seulement, envisager AVIF sur quelques visuels lourds, si le rendu reste propre (textes sur image, aplats, dégradés).
3) Images responsives : laisser le navigateur choisir la bonne taille
WordPress genere nativement des images responsives en ajoutant srcset et sizes au HTML, ce qui permet au navigateur de télécharger une version adaptée à l’écran. Cela évite d’envoyer une image « desktop » de 2000 px à un mobile.
Point d’attention : si une image est injectée en background CSS ou via un slider qui contourne le HTML standard, l’avantage du srcset peut disparaitre. Dans ce cas, l’image devient souvent plus lourde que nécessaire.
4) Lazy-loading : utile pour le bas de page, a manier pour la hero
WordPress applique le lazy-loading via l’attribut loading="lazy" sur de nombreuses images. Cela accelere le chargement initial en retardant les images hors ecran. En revanche, l’image LCP (souvent en haut) ne devrait pas etre retardée : elle doit charger vite.
5) Image SEO : alt text utile, contexte clair, et cohérence des URLs
Google recommande des bonnes pratiques pour que les images apparaissent dans Google Images, Discover et les résultats enrichis : images accessibles, contexte textuel, attribut alt descriptif, et une mise en page qui aide Google a comprendre ce qui est important.
Exemples d’alt text (concis, descriptif)
- Bon : « Boutique WooCommerce : page checkout avec TWINT et carte »
- Bon : « Avant/après : optimisation LCP d’une page service WordPress »
- A éviter : « image », « photo », ou une liste de mots-clés et de villes non visibles
Pour le SEO local : mentionner Vaud, Genève, Valais, etc. a du sens dans le texte de la page quand c’est pertinent. En revanche, forcer des lieux dans l’alt text d’une image qui ne montre pas ces lieux n’aide pas et peut dégrader la qualité.
Checklist (20 minutes) a appliquer sur 5 pages clés
- Identifier l’image LCP et vérifier qu’elle est légère et bien dimensionnée.
- Activer un format moderne (WebP, puis AVIF si utile) pour les images lourdes.
- Vérifier que les images passent bien par le HTML standard (srcset) et pas uniquement en background.
- Confirmer que les images « bas de page » sont en lazy-loading, mais pas la hero.
- Ajouter un alt text descriptif aux images informatives, laisser vide pour les images purement décoratives.
FAQ Images WordPress (Suisse romande)
Pourquoi mon site est lent sur mobile a Fribourg ou en Valais, alors qu’il semble rapide sur desktop ?
Souvent parce que le mobile télécharge des images trop grandes. Les images responsives (srcset) et des formats modernes réduisent fortement ce problème.
WebP ou AVIF : que choisir pour un site WordPress PME ?
WebP en premier, car le gain est déjà important et la chaine est souvent plus simple. AVIF peut apporter un gain supplémentaire sur certains visuels lourds, a valider par tests de qualité.
Le lazy-loading peut-il ralentir la premiere impression (LCP) ?
Oui, si l’image principale est lazy-loadée. Le lazy-loading doit viser surtout les images hors ecran, pas la hero.
Dois-je mettre les villes (Lausanne, Genève, Neuchâtel) dans l’alt text ?
Seulement si l’image illustre réellement un contenu lié a ces lieux. Sinon, mieux vaut un alt text descriptif, et placer la dimension locale dans le texte de la page et les sections dédiées.
Besoin d’optimiser vos images sans perdre en qualité visuelle ?
Pour accélérer le LCP, mettre en place WebP/AVIF, sécuriser les images responsives, et améliorer Image SEO sur vos pages clés, contactez clickclick.ch.
