Le preload d’image responsive pour améliorer le LCP

Identifier le LCP

Pour améliorer le LCP, impossible d’y aller à l’aveugle, il faut un outil fiable pour l’identifier.

Avec LightHouse

Que cela soit sur Web.dev ou directement dans Chrome, l’outil LightHouse Lighthouse est un outil open-source de Google qui permet d'auditer la performance, l'accessibilité, le SEO et les bonnes pratiques des sites web. Il fournit des rapports détaillés et des recommandations pour améliorer les performances. vous donne le sélecteur exact de ce qu’il considère comme étant le plus grand élément de contenu utile, et par conséquent le responsable du Largest Contentful Paint. Il suffit d’ouvrir l’accordéon du même nom dans la partie Diagnostics.

Avec l’onglet Performance de Dev Tools

Ouvrez Dev Tools dans Chrome (F12) puis exécutez un enregistrement du rendu de la page Web qui vous indique le LCP.

 

Testez dans différents contextes

Attention, le LCP dans un contexte desktop n’est forcément le même dans un contexte mobile. Par exemple, pour cet article, les exemples illustrés montrent que l’image à la une est l’élément référant du LCP. Mais si on test en mobile…

Et oui, c’est le problème on n’a pas le même élément…

Principe du Preload

Comme son nom l’indique, le preload nous permet de précharger des éléments constitutifs de la page et d’ainsi d’en prioriser le chargement avant son rendu. Bien sûr, on peut précharger toute sorte de ressources : images, font Une font (police de caractères) est un ensemble de caractères typographiques ayant un style et une taille spécifiques. Elle détermine l'apparence du texte sur un site web ou dans un document. , css Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. , etc… Exemple de preload avec une font (comme on vous le recommande de faire) :

<link rel="preload" as="font" type="font/woff2" href="https://mondomaine.com/font/mapolice.woff2" crossorigin="anonymous" />

Notez que l’utilisation de l’attribut « crossorigin » ici est important ; sans cet attribut, la police préchargée est ignorée par le navigateur et une nouvelle extraction a lieu. En effet, les polices sont censées être récupérées de manière anonyme par le navigateur, et la demande de préchargement n’est rendue anonyme qu’en utilisant l’attribut « crossorigin » .

C’est presque la même chose avec une image :

<link rel="preload" as="image" href="https://mondomaine.com/images/monimage.jpg" />

Le preload pour une image responsive pour améliorer le LCP

Evidemment, dans le contexte responsive dans lequel nous sommes, il va de soi que nous ne pouvons pas nous contenter d’indiquer qu’une version de l’image. On pourrait imaginer faire un preload pour chaque version d’image avec un attribut « media » selon chaque résolution d’appareil.

<link rel="preload" as="image" href="https://mondomaine.com/images/monimage-x1.jpg" media="(max-width: 767px)" />
<link rel="preload" as="image" href="https://mondomaine.com/images/monimage-x2.jpg" media="(min-width: 768px)" />

Mais cela n’est pas si simple car un smartphone avec un écran Retina préférera une version plus grande de votre image.

Pour résoudre le problème, il suffit d’utiliser une syntaxe proche de l’inclusion HTML Le HTML (HyperText Markup Language) est le langage standard utilisé pour structurer et afficher le contenu sur le web. Il définit des éléments comme les titres, paragraphes, liens, images, et autres composants d'une page web. d’une image dans la page elle-même. Il suffit de remplacer les attributs « scrset » et « sizes » par « imagesrcset » et « imagesizes » comme ceci :

<link rel="preload" as="image" 
    href="https://mondomaine.com/images/monimage-920x414.jpg"
    imagesrcset="https://mondomaine.com/images/monimage-920x414.jpg 920w, 
                https://mondomaine.com/images/monimage-1600x720.jpg 1600w, 
                https://mondomaine.com/images/monimage-1220x549.jpg 1220w, 
                https://mondomaine.com/images/monimage-720x324.jpg 720w, 
                https://mondomaine.com/images/monimage-360x162.jpg 360w"
    imagesizes="(max-width: 920px) 100vw, 920px" />

Ainsi le navigateur préchargera l’image qui correspond le mieux à l’appareil. C’est lui qui choisit, vous n’avez pas à déterminer quelle version est la mieux adaptée. Dans le cas où c’est la même image utilisée pour Largest Contentful Paint dans tous les résolutions d’écrans, vous devriez améliorer le LCP de manière significative.

Améliorer le LCP et non pas l’inverse !

Attention, un précision qui a son importance : dans votre code HTML, utilisez la mention Preload APRÈS la mention du Viewport Le viewport est la zone visible d'une page web dans un navigateur. Il définit la partie du site qui est affichée à l'écran et s'adapte en fonction de la taille de l'appareil, comme un ordinateur, une tablette ou un smartphone. , sinon, le navigateur risque de précharger une image plus grande que ce dont il a besoin ! Et si vous avez fait cette erreur, il chargera 2 versions de l’image :

• la plus grande car il n’a pas encore déterminé le viewport
• et celle dont il a besoin au moment d’afficher l’image en connaissant le viewport.

Et doubler le chargement, en matière de Web Performance, c’est pas vraiment l’objectif souhaité…

Le preload responsive

Oui mais voilà, cela ne résout pas notre problème ci-dessous : le LCP en mobile est le premier paragraphe de l’article et ce n’est l’image que pour les versions desktop.

En fait c’est assez simple, il suffit d’ajouter un attribut « media » à notre preload pour lui préciser pour quelle résolution celui-ci peut-être actif.

<link rel="preload" as="image" 
    href="https://mondomaine.com/images/monimage-920x414.jpg"
    imagesrcset="https://mondomaine.com/images/monimage-920x414.jpg 920w, 
                https://mondomaine.com/images/monimage-1600x720.jpg 1600w, 
                https://mondomaine.com/images/monimage-1220x549.jpg 1220w, 
                https://mondomaine.com/images/monimage-720x324.jpg 720w, 
                https://mondomaine.com/images/monimage-360x162.jpg 360w"
    imagesizes="(max-width: 920px) 100vw, 920px"
    media="(min-width: 768px)" />

Le tour est joué ! Avec cet attribut le preload ne sera exécuté que si l’appareil en question à une résolution minimum de 768px.

Utilisation avec WordPress

Bien entendu, ceci n’est qu’un exemple. Vous devrez adapter ce code en fonction de vos besoins. Par exemple pour une conception de site web avec WordPress WordPress est un système de gestion de contenu (CMS) open-source qui permet de créer et gérer facilement des sites web, des blogs et des boutiques en ligne sans compétences en programmation. , il suffira d’utiliser un filtre sur la fonction wp_head() ou dans le template adéquat définissant le <head> pour utiliser ce principe en récupérant l’image mise en avant pour les singles post.

if( is_singular( 'post' ) ) :
    $imgid = get_post_thumbnail_id(); ?>
        <link rel="preload" as="image"
                 href="<?php echo wp_get_attachment_image_src( $imgid, 'wide-md' )[0]; ?>"
                 imagesrcset="<?php echo wp_get_attachment_image_srcset( $imgid, 'wide-md' ); ?>"
                 imagesizes="(max-width: 920px) 100vw, 920px"
                 media="(min-width: 768px)" />
    <?php 
endif;

C’est exactement la méthode utilisée pour le site que vous consultez en ce moment.

Petite astuce

Prenez-soin de changer la valeur de l’attribut « loading » mis automatiquement à « lazy » sur toutes les images par WordPress ( depuis sa version 5.4 ). En effet, vous n’avez aucun intérêt à retarder l’affichage de l’image responsable du LCP. Modifier vos templates en conséquence :

<?php the_post_thumbnail('wide-md', ['loading' => 'auto']); ?>

En résumé pour améliorer le LCP

Le travail est à faire pour chaque mise en page sensible de votre page ; il vous faut :

1. déterminer si l’élément du LCP est une image pour chaque contexte,
2. utiliser le preload d’image en responsive,
3. et si cela est nécessaire en le contraignant à un contexte particulier avec l’attribut « media » ,
4. enfin assurez vous que cette image n’a pas d’attribut « loading » ou que sa valeur soit à « auto » .

Ainsi, l’indicateur LCP devrait être grandement améliorer. N’oubliez pas pour autant d’optimiser vos images (et si vous pouvez passer à l’avif). Dans notre cas, sur la page d’accueil en mobile, nous avons gagné plus d’une demi-seconde ! Dès lors, grâce à cette lecture vous avez désormais toutes les clefs pour comprendre ce qu’il faut faire sans vous en prendre à votre belle chevelure chatoyante qui me fait désormais défaut.

Si toutefois je ne suis pas assez clair dans mes explications, n’hésitez pas à contacter notre agence web basée à Rennes, je me ferai un plaisir de répondre à vos questions.

Photo de Ryan Snaadt via Unsplash.