« Pourquoi le LCP de la page d’accueil dépasse-t-il quatre secondes alors qu’il n’y a presque pas de texte ni de grande image visible ? » C’est la question de départ de cet audit, mené pour une fédération qui regroupe plusieurs centaines de structures locales et affiche, dès l’ouverture de sa page d’accueil, un carrousel présentant les logos de ses principaux partenaires institutionnels.
L’intuition initiale pointait vers l’image d’en-tête, une photo de bannière assez grande visuellement. L’audit a montré que ce n’était pas elle l’élément candidat au Largest Contentful Paint, mais bien le carrousel de logos placé juste en dessous, dont le poids cumulé dépassait largement celui de la bannière elle-même.
Ce que révélait l’outil de mesure
En ouvrant les DevTools Chrome sur l’onglet Performance et en filtrant sur l’élément marqué comme LCP, c’est une image de logo partenaire, la douzième du carrousel, qui apparaissait comme l’élément déterminant le Largest Contentful Paint. Ce résultat, contre-intuitif au premier abord, s’explique par la mécanique même du carrousel : le script JavaScript qui l’anime chargeait l’ensemble des logos au chargement de la page, avant de n’en afficher qu’un à la fois, ce qui signifie que le navigateur devait télécharger la totalité du carrousel avant de considérer le rendu comme stable.
L’origine : quarante logos jamais compressés
En inspectant le dossier médias du site, les quarante logos utilisés dans le carrousel provenaient directement des kits de communication fournis par chaque structure partenaire, sans aucun retraitement : formats PNG non compressés, résolutions parfois supérieures à 2000 pixels de large pour un affichage final de 150 pixels, poids unitaire moyen de 80 Ko, jusqu’à 340 Ko pour le plus lourd d’entre eux. Le poids cumulé de l’ensemble atteignait 3,2 Mo, chargés en totalité dès l’arrivée sur la page.
Le correctif, en trois volets
Trois actions complémentaires ont été menées, sans toucher au fonctionnement visuel du carrousel lui-même :
- Redimensionnement de chaque logo à la taille d’affichage réelle multipliée par deux (pour les écrans à forte densité de pixels), au lieu de conserver la résolution d’origine fournie par les partenaires.
- Conversion au format WebP, avec conservation d’un repli PNG via la balise
<picture>pour les rares navigateurs qui ne supportent pas encore ce format. - Chargement différé de tous les logos sauf les trois premiers visibles à l’écran, via l’attribut
loading="lazy", appliqué à partir du quatrième, les trois premiers se chargeant normalement.
<picture>
<source srcset="logo-partenaire-01.webp" type="image/webp">
<img src="logo-partenaire-01.png" alt="Partenaire 1"
width="150" height="60">
</picture>
<picture>
<source srcset="logo-partenaire-12.webp" type="image/webp">
<img src="logo-partenaire-12.png" alt="Partenaire 12"
width="150" height="60" loading="lazy">
</picture>
Résultat mesuré
Après ces trois interventions, le poids cumulé des quarante logos est passé de 3,2 Mo à 280 Ko, soit une réduction de plus de 91 %. Le LCP mesuré sur la page d’accueil est passé de 4,1 secondes à 1,6 seconde en moyenne sur cinq relevés successifs via Lighthouse, sans qu’aucune modification n’ait été apportée au design ou au comportement du carrousel.
Une check-list à réutiliser pour tout carrousel de logos
- Vérifier si le carrousel charge tous ses éléments d’un coup ou seulement l’élément visible.
- Contrôler la résolution réelle de chaque image comparée à sa taille d’affichage.
- Convertir systématiquement au format WebP ou AVIF, avec repli si nécessaire.
- Différer le chargement de tout élément hors du premier écran visible.
Un logo de 340 Ko affiché à 150 pixels de large n’est jamais un détail : sur un carrousel de quarante éléments, c’est souvent la cause principale d’un mauvais LCP.
En résumé
Sur ce site fédérant des centaines de structures locales, l’audit a montré qu’un carrousel de logos partenaires, souvent perçu comme un élément secondaire de la page d’accueil, peut à lui seul déterminer le Largest Contentful Paint si ses images ne sont ni redimensionnées ni compressées. Le correctif, purement technique et sans impact visuel, a permis de diviser le LCP par plus de deux sans négocier avec les partenaires sur le contenu du carrousel lui-même.
