Précharger l'image Largest Contentful Paint

Qu'est-ce que le préchargement (Preloading) ?

Le préchargement d'une ressource déclenchera le téléchargement d'une ressource par le navigateur très tôt, avant même que le rendu principal du navigateur ne commence. Cela garantit qu'une ressource est disponible plus tôt et risque moins de bloquer le rendu de la page, ce qui améliorera les performances dans la plupart des cas.

<link rel="preload" 
as="image" 
href="image.jpg" 
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w">

Pourquoi devrais-je précharger l'image largest contentful paint ?

Les images qui sont visibles et dans la fenêtre d'affichage auront une priorité élevée 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 du bon travail. Cependant, les navigateurs feront une estimation éclairée de l'ordre de téléchargement et prioriseront d'autres ressources comme le JavaScript distant ou d'autres images visibles par rapport à l'image LCP.

À cause de ce comportement, le téléchargement de l'image LCP ne commencera pas aussi tôt que vous pourriez le souhaiter. Le préchargement de l'image Largest Contentful Paint surmontera ce problème.

Comment le préchargement de l'image Largest Contentful Paint affecte-t-il la performance 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 presque tous les cas, le préchargement de l'élément LCP vous donnera de meilleurs scores Lighthouse et RUM.

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

• Il y a plusieurs images dans la fenêtre 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 slider ou si votre site est construit sur un framework JavaScript comme REACT.

Comment précharger l'image Largest Contentful Paint

Le préchargement de l'image LCP est relativement facile. Il y a juste 3 étapes à suivre :

1. Déterminer l'élément LCP : Exécutez 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érifier les formats d'image réactifs. Si vous utilisez des images réactives, vous devez ajouter toutes ces tailles d'image au srcset de la balise preload. Sinon, nous préchargerons la mauvaise image. Cela ne fera que ralentir la page.
3. Ajouter la balise preload. Tout ce qu'il reste à faire est d'ajouter la balise preload. La syntaxe est simple.

<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" 
   <!-- optionnel : le srcset de l'image réactive -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w">

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

Le préchargement de l'image Largest Contentful Paint dans Wordpress n'est pas difficile du tout. Généralement, l'image Largest Contentful Paint est l'image mise en avant pour un article de blog ou une page. Avec juste quelques lignes de code, nous pouvons récupérer l'url de l'image mise en avant et le srcset et ajouter cela au head de la page.

Ajoutez simplement ce code directement après l'élément title dans le fichier header.php de votre modèle 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());
 <link rel="preload" 
       as="image" 
       href="<?php echo $imgurl;?>" 
       imagesrcset="<?php echo $srcset;?>">
<?php } ?>.