Corriger les images hero lentes & Core Web Vitals

Comment corriger les images hero lentes - en bref

Les images hero sont de grandes images en haut d'une page web. Ces images hero causeront un long Largest Contentful Paint lorsque les images hero ne sont pas optimisées. 9 sites sur 10 que l'on me demande d'optimiser auront des problèmes avec les images hero. Dans cet article, je vais vous montrer différentes techniques pour accélérer les images hero.

Qu'est-ce qu'une image hero ?

Une image hero ou parfois appelée 'hero header' est une grande image avec du texte, souvent placée en haut d'une page web. Une image hero sert de premier aperçu de votre entreprise et de votre offre pour l'utilisateur en raison de son emplacement bien en vue vers le haut d'une page web qui s'étend généralement sur toute la largeur.

Un rappel rapide : Images hero, les Core Web Vitals et le Largest Contentful Paint

En raison de la taille de l'image hero (elle couvre généralement toute la largeur de la page et une bonne partie de la hauteur du viewport visible), cet élément deviendra l'élément Largest Contentful Paint dans presque tous les cas.

Le Largest Contentful Paint est une métrique Core Web Vitals importante. L'élément Largest Contentful Paint est le plus grand élément qui sera peint dans le viewport visible du navigateur.

Parce que les images non optimisées ont tendance à prendre beaucoup de bande passante et donc à mettre beaucoup de temps à charger, les images hero causeront souvent de mauvaises métriques Largest Contentful Paint

Optimiser l'image hero et le Largest Contentful Paint

Il existe de nombreuses techniques pour optimiser les images hero et le Largest Contentful Paint. Je vais les expliquer ici. La plupart des techniques peuvent être combinées pour des résultats encore meilleurs !

1 Précharger l'image hero ou envoyer des en-têtes 103

Lorsque vous voulez qu'un élément soit disponible dès que possible dans le navigateur, vous pouvez précharger cet élément. Le préchargement implique l'utilisation de resource hints. Les resource hints indiquent au navigateur quelque chose sur la priorité d'un élément et déclencheront un téléchargement très précoce de cette ressource.

<link 
  rel="preload" 
  as="image" 
  href="wolf.jpg" 
  imagesrcset="hero_400px.jpg 400w, hero.jpg 800w, hero_1600px.jpg 1600w" 
  imagesizes="50vw">

Dans un avenir proche, les 103 early hints seront supportés par les navigateurs Chrome. Cela permettra d'envoyer des resource hints AVANT que la réponse HTML finale n'ait été envoyée. On s'attend à ce que les 103 early hints changent la donne en matière d'amélioration du Largest Contentful Paint. Si vous êtes intéressé par l'apprentissage des early resource hints, consultez mon article.

2 Compresser l'image hero & utiliser des formats next-gen

Compresser les images rendra leur taille de fichier plus petite. Des tailles de fichier plus petites prendront moins de bande passante et sont disponibles pour le navigateur dès que possible. La compression des images peut être faite dans votre éditeur photo, dans votre CMS (astuce : votre développeur peut définir le niveau de compression WordPress) ou avec un outil de compression d'image en ligne

La plupart des images hero lentes sont plus lentes qu'elles ne devraient l'être parce qu'elles sont servies dans le 'mauvais' conteneur d'image comme PNG ou JPEG. Il existe des alternatives beaucoup plus rapides au JPEG et PNG comme WebP et AVIF. 

Pour de nombreux systèmes CMS, il existe des plugins de conversion qui convertiront vos images au format next-gen. Lorsque la conversion d'image est difficile à intégrer dans votre site web, un CDN avec support de conversion d'image pourrait être la solution que vous recherchez.

3. N'utilisez pas d'images d'arrière-plan, utilisez des images responsives normales

Votre image hero devrait être une image normale et jamais une image d'arrière-plan. La façon habituelle de faire des images hero est d'ajouter une image d'arrière-plan au conteneur hero et de définir la background-size de ce conteneur sur cover. Cela garantira que l'image hero s'adaptera à l'écran dans tous les cas.

Les images d'arrière-plan sont mauvaises pour les Core Web Vitals. Rappelez-vous-en ! Il n'y a aucune bonne raison de jamais utiliser des images d'arrière-plan.

• Les images d'arrière-plan sont chargées avec une priorité inférieure
• Les images d'arrière-plan ne sont pas responsives (à moins que vous ne vouliez vraiment compliquer les choses)
• Les images d'arrière-plan peuvent causer des problèmes de Core Web Vitals avec la plupart des bibliothèques de lazy loading.
  

La façon dont je le fais est d'ajouter une image normale en position absolue et de définir la propriété object-fit de cette image sur cover. Une fois que j'ai changé l'image d'arrière-plan en une image normale, je peux commencer à utiliser des images responsives

Les images responsives signifient que pour différents appareils (mobile, ordinateur, tablette), une version différente de la même image hero peut être envoyée. Pour un appareil de bureau, je pourrais envoyer une énorme image hero de 1920x1280 tandis que pour un appareil mobile, je n'aurais besoin d'envoyer qu'une plus petite image hero de 400*266 pixels. C'est 25 fois moins de données !

• Les images hero sont maintenant chargées avec une priorité plus élevée
• Je peux maintenant utiliser des images responsives pour l'image hero

style.css

<style>
#herocontainer{\r
    position:relative;\r
    padding:4rem 0\r
}\r
#heroimg{\r
    object-fit: cover;\r
    width: 100%;\r
    height: 100%;\r
    position: absolute;\r
    top: 0;\r
}\r
</style>

index.html

<div id="herocontainer">
<h1>Bienvenue sur mon site</h1>
<picture>
    <source 
        type="image/webp" 
        media="(max-width:540px)" 
        srcset="herosm.webp">
    </source>
    <img loading="eager" decoding="async" src="hero.webp" id="heroimg">
</picture>
</div>

4. Servez les images hero depuis le domaine principal & envisagez un Content Delivery Network (CDN)

Trop souvent, je vois l'image Largest Contentful Paint être servie depuis un domaine différent, par exemple 'static.mydomain.com'. Ces sous-domaines pointent souvent vers un CDN. Bien que j'encourage l'utilisation d'un CDN (voir ci-dessous), une configuration comme celle-ci n'est pas conseillée. L'image sur le sous-domaine nécessite une nouvelle connexion à un nouveau serveur. Les nouvelles connexions sont coûteuses et prendront un temps précieux. Lorsque l'image est servie depuis le domaine principal (www.mydomain.com par exemple), les images peuvent être récupérées beaucoup plus rapidement via la connexion serveur déjà établie.

Lorsqu'il est configuré sur le domaine principal, un CDN peut offrir une énorme augmentation de vitesse. Surtout lorsque votre site est visité du monde entier. Un CDN a des serveurs placés stratégiquement dans le monde entier où vos ressources statiques (comme les images sont mises en cache) pour des temps de réponse locaux rapides. Cela signifie que les données n'ont pas à voyager à travers le monde mais peuvent être servies depuis un serveur edge local.

5. Évitez de lazy load les images Largest Contentful Paint & chargez explicitement en eager l'image hero

Assurez-vous qu'aucun lazy loading n'est appliqué à votre image hero. Les images hero devraient toujours se charger en eager.

De nombreux sites, en particulier les sites WordPress, utilisent une sorte de plugin WordPress pagespeed comme WP Rocket ou WP Core Web Vitals. Ces plugins font généralement un excellent travail pour accélérer les sites lents mais ils ne peuvent pas réparer la bêtise :-)

Ces plugins vont lazy load les images qui semblent être de bons candidats au lazy load. Si l'image hero n'est pas une image eager, ces plugins vont probablement aussi lazy load l'image hero.

Cela, au mieux, causera un petit retard dans les métriques LCP. Au pire, surtout lorsque le lazy loading basé sur JavaScript est activé, cela causera un retard plus important.

Faire charger les images en eager est assez simple. Ajoutez simplement loading="eager" à l'image et vous avez terminé.

<img src="hero.webp" loading="eager" width="800" height="400">

6. Évitez les layout shifts causés par l'image hero

Un autre problème courant que je vois avec les bannières hero et les images hero est qu'elles causent un énorme layout shift. Ces layout shifts peuvent se produire pour différentes raisons.

• L'élément hero est créé avec JavaScript. Certains plugins hero et constructeurs de pages comme Elementor sont connus pour dépendre de JavaScript pour rendre le contenu hero. Bien qu'il n'y ait rien de mal avec JavaScript, assurez-vous que l'élément hero se rend de la même manière sans JavaScript.
• Les polices dans l'élément hero causent un layout shift. L'élément hero contient généralement un grand texte avec un appel à l'action et un tagline. Assurez-vous que ces grandes polices ne causent pas de layout shift.
• Dimensions d'image manquantes. Lorsque l'image hero n'est pas une image de couverture (soit en tant qu'image d'arrière-plan, soit en tant qu'image positionnée de manière absolue), les dimensions d'image manquantes (largeur et hauteur) causeront certainement un grand layout shift.

Bien que corriger le layout shift n'améliore pas le Largest Contentful Paint, cela améliorera les Core Web Vitals de la page. Pour plus d'informations sur la façon de corriger le layout shift, veuillez lire ce guide approfondi sur la façon de corriger le layout shift !

7. Utilisez le chargement en 2 étapes pour améliorer les Core Web Vitals hero

Le chargement en 2 étapes est une technique rapide que nous appliquons à toutes nos images. Nous servons d'abord une image de qualité extrêmement basse qui devrait se télécharger beaucoup plus tôt que la plus grande image de haute qualité. Une fois que l'image de basse qualité a été peinte à l'écran, le navigateur est déclenché pour récupérer l'image de haute qualité en arrière-plan. Une fois que les images de haute qualité ont été téléchargées, les images de basse qualité seront remplacées par l'image de haute qualité.

Il existe 3 méthodes de chargement en 2 étapes. Les deux premières sont des méthodes que vous devriez considérer. La dernière est celle que vous ne devriez pas faire.

1. Chargement complet en 2 étapes

Avec le chargement complet en 2 étapes, la première image de basse qualité a exactement les mêmes dimensions (largeur et hauteur) que l'image originale de haute qualité.

Le résultat de ce chargement en 2 étapes est que l'élément Largest Contentful Paint sera l'image de basse qualité, beaucoup plus rapide (qui sera ensuite échangée paresseusement). L'échange de l'image se produira si vite qu'un visiteur occasionnel ne le remarquera probablement jamais. Le résultat de cette technique est que le LCP est peint beaucoup plus tôt, la page semble 'prête' beaucoup plus tôt, ce qui contribue à une bien meilleure user experience et à des Core Web Vitals améliorés.

2. Espaces réservés en ligne plus petits

L'espace réservé plus petit est une technique assez cool qui a un inconvénient : elle n'améliore pas les Core Web Vitals. C'est quand même une excellente technique car elle améliore la user experience.

L'idée de base est la même que pour la technique de chargement en 2 étapes mais au lieu d'une image de basse qualité avec les mêmes dimensions, une image beaucoup plus petite avec des dimensions plus petites est placée en ligne via une data uri. L'image hero finale qui sera l'image Largest Contentful Paint est toujours téléchargée en arrière-plan. Cette astuce n'améliorera pas le Largest Contentful Paint mais fera apparaître la page prête encore plus vite que la technique de chargement en 2 étapes

3. Espaces réservés transparents

Une technique courante de chargement en 2 étapes et une méthode pour tromper le navigateur afin qu'il envoie une métrique Largest Contentful Paint précoce consiste à utiliser des éléments svg transparents. Ces éléments sont petits et peuvent être placés en ligne, tout comme l'espace réservé en ligne plus petit.

L'utilisation d'éléments svg en ligne et leur échange est en fait une technique de lazy loading. L'avantage de cette technique est qu'elle fonctionne cross-browser. 

Le lazy loading, bien sûr, ne devrait être appliqué qu'aux éléments en dehors du viewport. Dans ce cas, l'élément svg transparent ne fera que retarder la vraie image hero et n'a aucune valeur ajoutée pour votre visiteur. Là où les métriques de peinture pourraient être excellentes, l'UX de la page va en fait empirer.

C'est pourquoi l'image hero devrait toujours être chargée de manière eager sans astuces qui causent une mauvaise UX.