Comment j'ai réduit mon LCP de 70 %

Dernière révision par [url=https:\/\/www.linkedin.com\/in\/arjenkarel\/]Arjen Karel[\/url] en mars 2026

Un peu de contexte

Je suis un spécialiste de la vitesse de page et mon site web est ma vitrine. Sur ma page d'accueil, je proclame fièrement que mon site est le plus rapide au monde. C'est pourquoi j'ai besoin que ma page se charge aussi vite que possible et que j'extraie chaque goutte de performance de mon site.

Les techniques que je vais vous montrer aujourd'hui pourraient ne pas être viables pour un site (WordPress) moyen sans le soutien d'une équipe de développement dédiée et talentueuse. Si vous ne pouvez pas reproduire cette technique sur votre propre site, je vous encourage tout de même à lire l'article pour apprendre comment je réfléchis à la vitesse de page et quelles sont mes considérations.

Le problème : de grandes images dans le viewport visible

Une grande image dans le viewport visible deviendra souvent l'élément Largest Contentful Paint. Il arrive fréquemment que cette image LCP ne passe pas les Core Web Vitals. Je vois des résultats comme celui-ci quotidiennement.

Il existe several façons de s'assurer que cet élément apparaisse rapidement à l'écran :

1. [url=\/pagespeed\/preload-largest-contentful-paint-image]Précharger l'élément LCP[\/url]. Le préchargement de l'image LCP garantira que cette image est disponible pour le navigateur le plus tôt possible. Combinez cela avec fetchpriority="high" pour dire au navigateur de prioriser cette image par rapport aux autres ressources.
2. Utiliser des images responsives. Assurez-vous de ne pas servir d'images de taille bureau aux appareils mobiles.
3. [url=\/pagespeed\/optimize-images-for-core-web-vitals]Compresser vos images[\/url]. La compression d'images peut réduire considérablement la taille de l'image.
4. Utiliser des formats d'image de nouvelle génération. Les formats d'image de nouvelle génération comme WebP surpassent les anciens formats comme JPEG et PNG dans presque tous les cas.
5. [url=\/pagespeed\/fix-eliminate-render-blocking-resources]Minimiser le chemin critique du rendu[\/url]. Éliminez toutes les ressources bloquant le rendu comme le JavaScript et les feuilles de style qui pourraient retarder le LCP.

   Malheureusement, malgré toutes ces optimisations, dans certains cas, les métriques LCP pourraient encore ne pas passer l'audit des Core Web Vitals. Pourquoi ? La taille de l'image seule suffit à retarder la phase de [url=\/core-web-vitals\/largest-contentful-paint\/resource-load-duration]durée de chargement de la ressource[\/url] du LCP.

   La solution : le chargement en 2 étapes et les Web Workers

   La solution que j'ai mise en œuvre (après avoir optimisé tous les autres problèmes sur mon site) est le chargement d'images en 2 étapes.

   L'idée est simple : au premier rendu, afficher une image de basse qualité ayant exactement les mêmes dimensions que l'image finale de haute qualité. Immédiatement après l'affichage de cette image, lancez le processus qui remplace l'image de basse qualité par une image de haute qualité.

   Une implémentation très basique pourrait ressembler à ceci : tout d'abord, ajoutez un écouteur d'événement de chargement à une image. Lorsque l'image se charge, cet écouteur se détache et la source (src) de l'image est remplacée par l'image finale de haute qualité.

   <imgwidth="100"height="100"alt="un texte alternatif"src="lq.webp"onload="this.onload=null;this.src='hq.webp'"
   >