Précharger l'image Largest Contentful Paint

Qu'est-ce que le préchargement ?

Le préchargement d'une ressource déclenche son téléchargement par le navigateur de manière anticipée, avant même que le rendu principal du navigateur ne commence. Cela garantit que la ressource est disponible plus tôt et qu'elle est moins susceptible de bloquer le rendu de la page, ce qui améliore les performances dans la plupart des cas. En termes de chronologie LCP, le préchargement réduit le Resource Load Delay : l'écart entre la réception du HTML par le navigateur et le début du téléchargement de l'image LCP.

<link rel="preload"
as="image"
href="image.jpg"
fetchpriority="high"
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w"
imagesizes="100vw">

Pourquoi précharger l'image Largest Contentful Paint ?

Les images visibles dans la zone d'affichage auront une priorité élevée et seront téléchargées relativement tôt dans le processus de chargement de la page. Les navigateurs comme Chrome feront de leur mieux pour prioriser ces images et font souvent un bon travail. Cependant, les navigateurs feront une estimation éclairée de l'ordre de téléchargement et prioriseront souvent d'autres ressources comme le JavaScript distant ou d'autres images visibles au détriment de l'image LCP.

En raison de ce comportement, le téléchargement de l'image LCP ne commencera pas aussi tôt que vous le souhaiteriez. Le préchargement de l'image Largest Contentful Paint résoudra ce problème.

Les chiffres le confirment. Selon le 2025 Web Almanac, 76 % des pages mobiles ont une image comme élément LCP. Pourtant, seules 2,1 % des pages préchargent réellement cette image. C'est une occasion manquée considérable. De plus, de nombreuses images LCP ne sont pas détectables dans le HTML initial car elles dépendent de JavaScript ou de CSS pour s'afficher. Le navigateur ne peut pas télécharger ce qu'il ne peut pas trouver. Une balise de préchargement résout ce problème.

Quel est l'impact du préchargement de l'image Largest Contentful Paint sur les performances de la page ?

Le préchargement de l'image Largest Contentful Paint rendra l'image disponible pour le rendu plus tôt dans le processus de rendu. Cela conduit généralement à un meilleur score LCP. Dans la quasi-totalité des cas, le préchargement de l'élément LCP vous donnera de meilleurs scores Lighthouse et de données terrain.

Parmi les sites surveillés par CoreDash, 98 % des chargements de pages avec une image LCP préchargée obtiennent un score « bon », contre 88 % sans préchargement. Le LCP au p75 pour les images préchargées est environ 2 fois plus rapide que pour les images non préchargées.

Le préchargement de l'élément LCP peut être encore plus bénéfique lorsque, pour une raison quelconque, l'image LCP n'est pas la première image à être téléchargée. Cela peut se produire lorsque :

• Il y a plusieurs images dans la zone d'affichage visible
• L'image LCP est une image d'arrière-plan (les images d'arrière-plan sont généralement téléchargées plus tard que les images de premier plan)
• L'élément LCP dépend de JavaScript. Par exemple avec un script de carrousel ou si votre site est construit sur un framework JavaScript comme React.

Pourtant, 17 % des sites mobiles chargent leur image LCP en lazy-loading selon le 2025 Web Almanac. Seules 62 % des origines mobiles réussissent le LCP. Ces deux faits ne sont pas sans rapport. Si vous chargez votre image LCP en lazy-loading, corrigez cela d'abord, puis préchargez-la.

Utilisez fetchpriority="high" sur l'image LCP

En plus du préchargement, vous devriez également ajouter fetchpriority="high" à l'élément image LCP lui-même. Cela indique au navigateur de prioriser cette image par rapport aux autres ressources. Un test sur Google Flights a montré des améliorations du LCP de 2,6 secondes à 1,9 seconde simplement en ajoutant cet attribut.

<img src="hero.jpg"
     fetchpriority="high"
     width="800"
     height="400"
     alt="Hero image">

Une image préchargée conserve la priorité par défaut à moins que vous ne l'augmentiez explicitement. La combinaison de rel="preload" avec fetchpriority="high" à la fois sur la balise link et sur l'élément img donne au navigateur le signal le plus clair possible. Pour en savoir plus sur la façon dont les navigateurs décident quoi télécharger en premier, consultez le guide complet de la priorisation des ressources.

<link rel="preload"
      as="image"
      href="hero.jpg"
      fetchpriority="high">

L'adoption de fetchpriority="high" est passée de 0,03 % des sites mobiles en 2022 à 17,3 % en 2025, en grande partie grâce à l'ajout par WordPress dans son cœur. Si votre CMS ne le définit pas automatiquement, ajoutez-le vous-même.

Comment précharger l'image Largest Contentful Paint

Le préchargement de l'image LCP est simple. Il suffit de suivre 3 étapes :

1. Déterminez l'élément LCP : Lancez un audit Lighthouse et vérifiez l'élément Largest Contentful Paint. Assurez-vous que l'élément LCP est bien une image !
2. Vérifiez les formats d'images responsives. Si vous utilisez des images responsives, vous devez ajouter toutes ces tailles d'images au srcset de la balise de préchargement. Sinon, vous préchargerez la mauvaise image. Cela ne fera que ralentir la page.
3. Ajoutez la balise de préchargement. Il ne reste plus qu'à ajouter la balise de préchargement.

<link
   <!-- indique le préchargement -->
   rel="preload"
   <!-- as est requis et indique que nous préchargeons une image -->
   as="image"
   <!-- source de l'image -->
   href="wolf.jpg"
   <!-- augmenter la priorité -->
   fetchpriority="high"
   <!-- optionnel : le srcset de l'image responsive -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- doit correspondre à l'attribut sizes de votre élément img -->
   imagesizes="100vw">

La valeur de imagesizes doit correspondre à l'attribut sizes de votre élément <img>. Si votre image s'affiche à la moitié de la largeur de la fenêtre, utilisez imagesizes="50vw". Une erreur ici signifie que le navigateur préchargera la mauvaise variante d'image.

Ne préchargez que l'image LCP. Si vous préchargez trop de ressources, vous diluez le gain de priorité et le navigateur ne peut plus distinguer ce qui est le plus important. Un seul préchargement pour l'image LCP suffit. Pour une approche encore plus agressive, vous pouvez combiner le préchargement avec les 103 Early Hints pour démarrer le téléchargement avant même l'arrivée du HTML.

Le préchargement permet de commencer le téléchargement de l'image plus tôt, mais l'image elle-même doit toujours être optimisée. Servez-la dans un format moderne comme WebP ou AVIF et aux bonnes dimensions. Consultez optimiser les images pour les Core Web Vitals pour un guide complet.

Le préchargement n'aide qu'avec une partie du timing LCP : le délai avant que l'image ne commence à se télécharger. Si votre Time to First Byte est lent, aucune quantité de préchargement ne compensera. La balise de préchargement se trouve dans le HTML, donc le navigateur doit d'abord recevoir le HTML. Vérifiez votre TTFB avant d'ajouter des indications de préchargement.

Comment précharger l'image Largest Contentful Paint dans WordPress

Le préchargement de l'image Largest Contentful Paint dans WordPress n'est pas du tout difficile. En général, l'image Largest Contentful Paint est l'image mise en avant d'un article de blog ou d'une page. Avec seulement quelques lignes de code, nous pouvons récupérer l'URL et le srcset de l'image mise en avant et les ajouter au head de la page.

Ajoutez simplement ce code directement après l'élément title dans le fichier header.php de votre template actuel.

<?php if((int)get_post_thumbnail_id() > 0){
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 $sizes = wp_get_attachment_image_sizes(get_post_thumbnail_id());
?>
 <link rel="preload"
       as="image"
       href="<?php echo $imgurl;?>"
       fetchpriority="high"
       imagesrcset="<?php echo $srcset;?>"
       imagesizes="<?php echo $sizes;?>">
<?php } ?>