Différer les images hors écran : comment résoudre cette opportunité Google Lighthouse

Mesurer les performances de votre site a souvent été un travail aléatoire. En effet, les outils disponibles ne nous ont pas donné un bon aperçu de l'expérience de l'utilisateur par rapport aux performances de ce site. Cependant, Google Lighthouse corrige bon nombre de ces inconvénients et vous permet de l'intégrer à votre flux de travail de développement. L'une des "opportunités" de Lighthouse consiste à différer les images hors écran dans WordPress. La bonne nouvelle est que c'est simple à réaliser.

Pour cet article, nous verrons 🔎 comment différer les images hors écran dans WordPress en utilisant à la fois du code et des plugins. Cependant, nous devons d'abord clarifier quelques termes sur Google Lighthouse, puis parler de l'endroit où la métrique Différer les images hors écran devrait figurer sur votre liste de priorités.

La différence entre une recommandation d'audit et une opportunité

Avant d'aborder la façon dont vous reportez les images hors écran dans WordPress, il est important de comprendre comment cette instruction s'intègre dans Google Lighthouse. Il s'agit d'une « opportunité » de performance plutôt que d'une recommandation d'audit. Voici la différence :

• Recommandation d'audit . Cela aura un impact définitif sur vos scores dans Google Lighthouse, et vous devez accorder votre attention à ces mesures en priorité.
• Opportunités . Bien que ceux-ci aient toujours une certaine importance, ils n'auront pas d'impact sur vos scores d'audit. En tant que tel, vous pouvez les considérer comme une préoccupation secondaire.

La métrique Différer les images hors écran est une opportunité. Cela signifie que cela peut toujours avoir un impact, mais c'est quelque chose que vous pouvez examiner une fois que votre score ne peut plus s'améliorer.

Différer les images hors champ – une définition

Votre site Web utilisera probablement des images dans toutes les sections de vos pages. Certains d'entre eux s'afficheront « au-dessus du pli », c'est-à-dire à l'écran sans qu'il soit nécessaire de faire défiler. En tant que telles, les images hors écran représentent tout le reste.

La métrique Différer les images hors écran fait référence aux éléments visuels qui répondent à l'un des quatre critères suivants :

• Une image doit commencer en dessous de la zone visible de la page et se terminer trois fois la hauteur de cette zone.
• Les très petites images (celles dont la taille est inférieure à 0,02 Mo) ne seront pas prises en compte dans la métrique Différer les images hors écran .
• Les pages qui mettent plus de 50 ms à se charger déclencheront l'opportunité.
• Si votre page définit un attribut de chargement, vous ne verrez pas du tout Différer les images hors écran . Alerte spoiler : soyez à l'aise avec loading="lazy" maintenant !

De plus, vous constaterez peut-être qu'un site avec beaucoup d'images hors écran obtiendra de mauvais scores LCP (Largest Contentful Paint). Cela apporte un changement déroutant à Google Lighthouse 10, que nous aborderons ensuite.

L'amélioration du temps d'interaction (TTI) est une mesure dépréciée

Dans les anciennes versions de Google Lighthouse, Différer les images hors écran affectait le TTI. Cependant, Google considère désormais qu'il s'agit d'une mesure dépréciée. La pondération de 10 % a donné le score global de l'audit de performance transféré à Cumulative Layout Shift (CLS) et fournit désormais une pondération de 25 % [1][2] .

Cela pose un problème, dans la mesure où, que vous reportiez ou non les images hors écran, cela ne provoquera pas de changement de mise en page. En tant que tel, c'est pourquoi Différer les images hors écran n'est plus qu'une opportunité, plutôt qu'une recommandation d'audit complète.

Pourquoi Google Lighthouse vous demandera de différer les images hors écran

Malgré la relégation de Différer les images hors écran , il a toujours une certaine importance pour la vitesse de chargement et les performances. Vous pouvez voir l'impact d'images hors écran entièrement chargées en quelques secondes, quel que soit l'outil que vous choisissez :

Bien que cette métrique n'ait pas d'incidence sur le CLS ou le TTI, elle peut avoir un impact sur le LCP, bien que mineur dans de nombreux cas. C'est aussi un bon rappel que vous ne devez charger des images que lorsque vous en avez besoin. Ensuite, nous discuterons pourquoi.

Pourquoi vous ne devriez pas charger toutes vos images en même temps

Dans la conversation, nous travaillons tous sur le « principe coopératif ». Ce n'est pas une leçon de sciences sociales, nous n'entrerons donc pas dans les détails ici. Cependant, il y a une facette importante de ce concept qui compte pour la métrique Différer les images hors écran . La «maxime de quantité de Grice» stipule que vous ne devez révéler que la quantité d'informations nécessaire pour établir le contexte.

Pourquoi est-ce important? Parce que si vous donnez trop d'informations, cela peut entraîner une surcharge pour l'auditeur (entre autres problèmes).

En tant que tel, vous ne devriez pas non plus charger toutes les images de votre site en même temps ! C'est pour quelques raisons solides:

• Un utilisateur ne verra pas les images hors écran et utilisera autrement les ressources dont vous aurez besoin pour les éléments à l'écran.
• Le chargement d'images hors écran peut contribuer à une mauvaise expérience utilisateur (UX), car une page se chargera sans que rien ne se passe de notable dans la fenêtre d'affichage.
• Pour l'utilisateur, cela pourrait également lui coûter cher financièrement. Par exemple, considérez quelqu'un qui navigue sur un site qui ne diffère aucune image hors écran tout en utilisant des données mobiles, plutôt que le Wi-Fi.

Étant donné que Google Lighthouse se concentre sur l'expérience utilisateur et sur la manière dont les performances perçues l'affectent, il est essentiel de comprendre tout ce qui précède. La bonne nouvelle est qu'il existe un moyen simple de différer les images hors écran.

Comment différer les images hors écran sur votre site

La réponse est : chargement paresseux. C'est le moyen le plus simple et le plus efficace de réduire l'impact des images hors écran sur les performances perçues de votre site. Encore mieux, la plupart des navigateurs supportent le chargement différé :

Cependant, Firefox ne prend en charge que le chargement paresseux pour les images, ce qui sera important si vous choisissez de l'implémenter pour les cadres en ligne. Pourtant, vous avez plusieurs façons de mettre cela en œuvre. L'approche principale utilise l'attribut loading HTML dans un élément <img> ou <iframe> . Vous aurez la possibilité d'utiliser trois valeurs différentes :

• eager . Cela indiquera au navigateur de charger ces images en premier. C'est l'option par défaut, et c'est aussi bien que de ne pas l'inclure du tout, dans la mesure où les images seront toujours rendues, quel que soit leur emplacement sur la page.
• lazy . Cela différera le chargement d'une image ou d'une iframe jusqu'à ce qu'elle atteigne une distance codée en dur de la fenêtre d'affichage. La distance exacte peut différer d'un navigateur à l'autre et vous voudrez également toujours spécifier les dimensions de l'image.
• auto . Le navigateur choisira la meilleure option pour le travail.

C'est aussi simple à mettre en œuvre que prévu :

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

Bien sûr, il n'y a rien à voir sur le frontend ici, car l'image sera de toute façon hors écran et invisible.

Si vous choisissez d'utiliser les pages mobiles accélérées (AMP), vous pouvez implémenter le chargement différé de manière automatique à l'aide de l'élément amp-img . Lorsqu'il s'agit d'autres plates-formes, les modules ou plugins sont le meilleur moyen d'implémenter le chargement paresseux.

Si vous souhaitez différer les images hors écran dans WordPress, vous voudrez utiliser un plugin dédié pour le faire. Par défaut, WordPress implémente le chargement paresseux pour toutes les images, mais ce pinceau large peut ne pas répondre exactement à vos besoins.

Utiliser des plugins WordPress pour ajouter du chargement paresseux à votre site

Chaque fois que vous souhaitez ajouter des fonctionnalités supplémentaires à WordPress, un plugin est toujours votre meilleur pari. En ce qui concerne le chargement paresseux, cela peut également être le cas.

WordPress a un certain nombre de plugins qui peuvent vous aider à ajouter du chargement paresseux, mais tous ne sont pas égaux. Par exemple, certains ont des notes et des critiques médiocres, d'autres ne reçoivent pas beaucoup de mises à jour et certains ne peuvent même pas fournir le bon niveau de fonctionnalité. Cependant, Optimole peut livrer la marchandise en matière de compression d'image et de chargement paresseux.

Ce ne sera pas un aperçu de ce qu'Optimole peut faire en général - notre site partenaire Themeisle peut vous le montrer. Au lieu de cela, nous mettrons en évidence les options rapides et sans douleur dont vous disposez pour charger les images paresseusement. Pour trouver les bonnes options, accédez à l'écran Média > Optimole > Paramètres , puis recherchez les images à l'échelle et le commutateur à bascule de chargement paresseux . Vous devez vous assurer que ceci est activé :

Une fois cela fait, une multitude d'options deviendront disponibles dans la section Avancé > Lazyload :

Cela vous donne un ensemble précieux d'options avec lesquelles travailler. Par exemple, vous pouvez activer un espace réservé pour vos images, basculer entre le chargement paresseux natif ou classique du navigateur, activer la mise à l'échelle des images, etc.

Cependant, il y a deux paramètres que vous voudrez approfondir. Le premier vous permet d'exclure un nombre défini d'images du chargement. La valeur par défaut est trois, mais vous pouvez la définir sur le nombre d'images que vous avez au-dessus du pli. Cela signifie que vous implémenterez le chargement différé pour toutes les images sur le site :

L'autre fonctionnalité intéressante est la possibilité de spécifier des sélecteurs CSS pour vous aider à charger paresseusement les images d'arrière-plan :

Cela vous permet de personnaliser l'intégralité de l'expérience de chargement paresseux en fonction de vos besoins et de votre score Lighthouse, tout en conservant une certaine flexibilité. De plus, tout ce qui précède est possible avec la version gratuite d'Optimole !

Conclusion 🧐

Si les images ne sont pas à l'écran, vous n'avez pas besoin de les charger. Sans une solution telle que le chargement paresseux, vous risquez d'allonger le temps de chargement de votre site. Cela affectera également certaines des mesures les plus importantes liées aux performances. L'opportunité Différer les images hors écran de Google Lighthouse vous pousse à implémenter une sorte de chargement paresseux, et il existe de nombreuses façons de le faire sans code.

Par exemple, Optimole est l'un des meilleurs plugins pour vous aider à différer les images hors écran dans WordPress. Vous pouvez définir des options avec une plus grande spécificité que l'approche globale "toujours active" de WordPress. Cependant, il existe d'autres plugins qui vous aident également à le faire, tels que les plugins de mise en cache. Même le chemin de codage est simple, et mieux encore, vous bénéficiez de l'assistance de presque tous les navigateurs.

Optimole deviendra-t-il votre méthode pour différer les images hors écran dans WordPress ? Partagez vos pensées avec nous dans la section des commentaires ci-dessous!