Priorité des ressources : accélérer le LCP sans empiler les optimisations

Pour améliorer le LCP, identifiez d’abord l’élément réellement affiché en dernier dans la zone visible, puis corrigez ce qui retarde son téléchargement ou son rendu. N’ajoutez pas de preload à toutes les ressources : elles se disputeraient la même bande passante.

Le but est de faire découvrir tôt la ressource LCP et de lui donner une priorité suffisante, sans pénaliser le HTML, le CSS et les dépendances nécessaires au premier rendu.

Identifier l’élément LCP et son retard

Le LCP n’est pas forcément la plus grande image du design. Il peut s’agir d’une image, d’une vidéo avec image d’aperçu ou d’un bloc de texte : sur une page éditoriale, le titre peut devenir le LCP ; sur une fiche produit, il s’agit souvent de la photo principale.

Utilisez le panneau Performance des Chrome DevTools ou Lighthouse pour repérer l’élément et sa chronologie. Le diagnostic distingue généralement le délai avant chargement, la durée de chargement et le délai de rendu.

Délai de chargement élevé : la ressource est découverte trop tard ou sa priorité est insuffisante.
Durée de chargement élevée : le fichier est trop lourd, le serveur répond lentement ou trop de requêtes occupent le réseau.
Délai de rendu élevé : du CSS, du JavaScript ou du travail de rendu bloque l’affichage après le téléchargement.

Contrôlez aussi les données de terrain dans PageSpeed Insights. Un test local reproduit mal les appareils modestes et les réseaux mobiles ; les données réelles permettent de vérifier que le gain profite aux visiteurs.

Choisir la bonne priorité

Une ressource présente directement dans le HTML est découverte tôt. À l’inverse, une image ajoutée par JavaScript, injectée par un composant client ou utilisée dans un carrousel peut être découverte tardivement, même si elle devient le LCP.

Utilisez fetchpriority="high" pour une image LCP déjà présente dans le HTML initial, lorsqu’elle doit passer avant d’autres téléchargements. Limitez-le à l’image qui a de fortes chances d’être visible dans le viewport initial.

<img src="/images/produit.webp" width="1200" height="800" fetchpriority="high" alt="Chaussure de course bleue">

Utilisez preload seulement si une ressource critique ne peut pas être découverte assez tôt, par exemple une image héros déclarée avec background-image dans une feuille CSS ou une police indispensable au premier écran. Le preload doit viser exactement la ressource utilisée ; pour une image responsive, employez imagesrcset et imagesizes afin de ne pas précharger une version trop lourde sur mobile.

<link rel="preload" as="image" href="/images/hero.webp" fetchpriority="high">

Faites l’inverse pour les images hors écran : ajoutez loading="lazy" sous la ligne de flottaison, jamais à l’image LCP présumée. Donner une priorité élevée à plusieurs images ou multiplier les preloads annule leur intérêt et augmente la concurrence réseau.

Préserver le premier rendu

Placez l’image LCP dans le HTML initial lorsque c’est possible, avec width et height. Servez une image adaptée à son contexte et évitez les carrousels automatiques au-dessus de la ligne de flottaison : plusieurs candidates peuvent être téléchargées ou décodées alors qu’une seule est visible.

Si le LCP est un titre, une police web peut retarder son rendu ou provoquer un changement visuel tardif. Préchargez uniquement le fichier exact requis au premier écran, avec as="font", type="font/woff2" et crossorigin si nécessaire ; utilisez aussi font-display: swap ou une stratégie adaptée à votre exigence typographique.

Les scripts classiques sans attribut bloquent l’analyse du document. Préférez defer pour les scripts nécessaires mais non requis avant le premier rendu, et réservez async aux scripts indépendants, car leur ordre d’exécution n’est pas garanti.

Mesurez après chaque changement : corrigez d’abord la taille, l’emplacement ou la découverte de la ressource, puis ajoutez une priorité si elle reste nécessaire. Cette approche complète les optimisations décrites dans réduire le temps de chargement d’un site moderne.