Comment diagnostiquer et améliorer un LCP lent ?

Question

IT Interview Practice · Accepted Answer

Commencez par identifier **quel est l'élément LCP** et **pourquoi il est en retard**. Le LCP se décompose en quatre sous-parties — corrigez la plus importante. ## Diagnostic : les quatre sous-parties du LCP ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] serveur quand le fetch DÉMARRE téléchargement de l'image l'afficher ``` Chrome DevTools et PageSpeed Insights montrent quelle tranche domine. Coupables courants : serveur lent (TTFB), image LCP découverte tardivement, ou script/CSS render-blocking retardant le paint. ## Correctifs par sous-partie - **TTFB lent** → mettez le HTML en cache sur un CDN, utilisez SSG/ISR, accélérez l'origine/la base de données. - **Load delay (image trouvée tardivement)** → préchargez-la et augmentez sa priorité pour que le navigateur la récupère immédiatement plutôt qu'après le CSS/JS : ```html

``` - **Load time (image trop grosse)** → servez de l'AVIF/WebP, dimensionnez-la correctement avec `srcset`, compressez. - **Render delay** → réduisez le CSS/JS render-blocking ; mettez le CSS critique en inline ; utilisez `defer` sur les scripts. ## Pièges - Lazy-loader l'image LCP (ou la cacher derrière l'hydratation JS) — la blessure LCP auto-infligée n°1. - Les web fonts bloquant le texte LCP ; utilisez `font-display: swap` et un `preload` de la police. - Optimiser le LCP en lab pendant que les utilisateurs réels en 4G restent lents — confirmez toujours avec les données de terrain. ## Pourquoi c'est important Le LCP est la métrique de chargement phare et un facteur de classement dans les moteurs de recherche. Être capable de nommer les quatre sous-parties et d'associer chacune à un correctif concret est exactement l'approche structurée et fondée sur les preuves que recherchent les recruteurs.

Diagnostic : les quatre sous-parties du LCP

Correctifs par sous-partie

Pièges

Pourquoi c'est important

Questions connexes