Précharger l'image du Largest Contentful Paint

Qu'est-ce que le préchargement ?

Le préchargement indique au navigateur de télécharger quelque chose tôt, avant que le rendu principal ne commence. Le fichier est prêt plus tôt et ne bloque pas le rendu de la page. En termes de timing 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 devrais-je précharger l'image du Largest Contentful Paint ?

Les images visibles dans le viewport auront une haute priorité et seront téléchargées relativement tôt dans l'ensemble du processus de chargement de la page. Les navigateurs comme Chrome feront de leur mieux pour prioriser ces images pour vous et feront souvent un bon travail. Cependant, les navigateurs font 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 par rapport à l'image LCP.

En raison de ce comportement, le téléchargement de l'image LCP ne commencera pas aussi tôt que vous pourriez le souhaiter. Précharger l'image du 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, seuls 2,1% des pages préchargent réellement cette image. C'est une opportunité manquée considérable. De plus, de nombreuses images LCP ne sont pas découvrables dans le HTML initial car elles dépendent de JavaScript ou de CSS pour le rendu. 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.

Comment le préchargement de l'image du Largest Contentful Paint affecte-t-il les performances de la page ?

Précharger l'image LCP la rend disponible pour le rendu plus tôt. Le résultat : un meilleur score LCP dans Lighthouse et les données de terrain.

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

Le préchargement est encore plus important lorsque l'image LCP n'est pas la première image que le navigateur télécharge. Cela se produit lorsque :

• Il y a plusieurs images dans le viewport 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 slider 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. Seuls 62% des origines mobiles passent le LCP. Ces deux faits ne sont pas sans lien. 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 sauf si vous l'augmentez explicitement. Combiner rel="preload" avec fetchpriority="high" sur la balise link et 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, largement grâce à WordPress qui l'a ajouté au cœur du système. Si votre CMS ne le définit pas automatiquement, ajoutez-le vous-même.

Comment précharger l'image du Largest Contentful Paint

Précharger l'image LCP est facile. Il n'y a que 3 étapes à suivre :

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'image au srcset de la balise de préchargement. Sinon, nous préchargerons 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
   <!-- indicate preload -->
   rel="preload"
   <!-- as is required and indicates we are preloading an image -->
   as="image"
   <!-- image src -->
   href="wolf.jpg"
   <!-- boost priority -->
   fetchpriority="high"
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- must match the sizes attribute on your img element -->
   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 du viewport, utilisez imagesizes="50vw". Se tromper signifie que le navigateur précharge la mauvaise variante de l'image.

Ne préchargez que l'image LCP. Si vous préchargez trop de ressources, vous diluez l'augmentation de priorité et le navigateur ne peut plus distinguer ce qui compte le plus. 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 encore ê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 le guide complet.

Le préchargement n'aide que pour une partie du timing LCP : le délai avant que l'image ne commence à être téléchargée. Si votre Time to First Byte est lent, aucun 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 du Largest Contentful Paint dans WordPress

Précharger l'image du Largest Contentful Paint dans WordPress n'est pas du tout difficile. Habituellement, l'image du 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 de l'image mise en avant et le srcset 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 } ?>