# Un carrousel de 40 logos clients non optimisés : l’audit qui a sauvé le LCP > La page d'accueil d'un client chargeait 40 logos en pleine résolution dans un carrousel JS. Audit, compression et lazy-load ciblé pour sauver le LCP. - Auteur : Clément Hadrot - Publié le : 2022-06-18 - Mis à jour le : 2022-06-18 - Catégorie : Performance - URL : https://wpmoderne.dev.wordpress-developpement.fr/performance/carrousel-logos-non-optimises-audit-lcp/ ## L’essentiel - 40 logos en pleine résolution chargés d'un coup pénalisent le LCP - Seuls les logos visibles au premier écran doivent charger immédiatement - La compression seule a réduit le poids total de 78 % Un cabinet de conseil en stratégie affichait fièrement, sur sa page d'accueil, un carrousel présentant les logos de ses quarante plus grands clients, défilant en continu grâce à un script JavaScript tiers. Fierté commerciale légitime, mais audit de performance calamiteux : le rapport PageSpeed Insights pointait un LCP de 5,8 secondes sur mobile, très au-dessus du seuil recommandé de 2,5 secondes. L'élément identifié comme responsable du LCP n'était même pas le premier logo visible, mais le conteneur du carrousel lui-même, dont le rendu attendait que le script tiers ait fini de charger et de dimensionner l'ensemble des quarante images avant d'afficher quoi que ce soit. ## L'audit du poids réel des images Un export du panneau réseau des DevTools a permis de calculer le poids total transféré pour ce seul carrousel : 6,4 Mo, pour des logos fournis par les clients eux-mêmes dans des résolutions très variables, certains dépassant les 3000 pixels de large alors que l'affichage final ne dépassait jamais 200 pixels de haut. Aucune compression n'avait été appliquée à l'envoi, et aucune redimension automatique n'était configurée pour ce type de contenu. ## Premier correctif : la compression et le redimensionnement Chaque logo a été retraité en amont : redimensionnement à une largeur maximale de 400 pixels, largement suffisante pour un affichage à 200 pixels de haut sur les écrans les plus denses, puis compression avec un outil de conversion PNG vers WebP, format nativement supporté par WordPress depuis la version 5.8. Le poids total est descendu de 6,4 Mo à environ 1,4 Mo après ce seul traitement, avant même de toucher à la logique de chargement. > L'essentiel à retenir : 40 logos en pleine résolution chargés d'un coup pénalisent le LCP ; Seuls les logos visibles au premier écran doivent charger immédiatement ; La compression seule a réduit le poids total de 78 % ## Deuxième correctif : ne charger que ce qui est visible Le script de carrousel tiers chargeait les quarante images d'un seul bloc au chargement de la page, y compris les logos qui n'apparaîtraient qu'après plusieurs cycles de défilement automatique, plusieurs dizaines de secondes plus tard. La configuration du script a été modifiée pour activer son option native de chargement paresseux, combinée à l'attribut HTML standard sur les images non visibles initialement : ``` Logo client 05 ``` Les quatre à cinq premiers logos visibles au chargement initial du carrousel ont volontairement été exclus de ce traitement, avec l'attribut `loading="eager"` explicite, pour ne pas retarder leur propre affichage, ces images n'étant de toute façon plus responsables du LCP une fois la compression appliquée. ## Troisième correctif : réévaluer l'élément candidat au LCP Après ces deux changements, le LCP restait néanmoins porté par le titre de la page d'accueil, un texte, plutôt que par le carrousel, ce qui a permis de confirmer que le carrousel de logos ne constituait plus l'élément le plus lourd du premier écran. Un dernier réglage a consisté à précharger la police du titre, qui utilisait une police variable personnalisée non préchargée jusque-là. ## Les résultats mesurés - Poids total du carrousel : de 6,4 Mo à 1,1 Mo, tous logos confondus. - LCP mesuré par Lighthouse mobile : de 5,8 secondes à 1,9 seconde. - Nombre d'images réellement chargées au premier affichage : de 40 à 5. Aucun changement n'a été demandé au script de carrousel lui-même ni à son fournisseur : l'essentiel du gain provient de la préparation des images en amont et de l'exploitation des options de chargement paresseux déjà disponibles mais non activées par défaut. ## Pour aller plus loin Ce cas ne traite volontairement pas le lazy-load natif de WordPress appliqué au contenu éditorial classique, déjà documenté ailleurs : il porte spécifiquement sur un composant tiers, un carrousel JavaScript, où le comportement de chargement dépend de la configuration propre au script et non du cœur de WordPress. ## En résumé Un carrousel de logos, souvent perçu comme un élément secondaire de la page d'accueil, peut à lui seul plomber le LCP d'un site si les images ne sont ni compressées ni chargées de façon différée. L'audit d'un composant tiers en apparence anodin reste une étape à ne jamais sauter lors d'un diagnostic de performance.