Qu’est-ce que Lazy Loading ?

Saviez-vous que 50 % des utilisateurs s’attendent à ce qu’une page se charge en moins de 2 secondes ?

La vitesse des pages est cruciale dans le monde du marketing numérique d’aujourd’hui pour un certain nombre de raisons. Les utilisateurs qui ne peuvent pas accéder à votre site, ou qui sont frustrés par sa lenteur, ont une forte probabilité d’abandonner votre site et vos produits et de chercher ailleurs.

Un retard de vitesse de connexion de seulement 500 millisecondes peut entraîner une augmentation du « pic de frustration » de plus de 26 %, et une diminution de l’engagement de 8 %. Moz fixe le temps de chargement idéal de la page à 0-4 secondes, et a constaté que les pages qui se chargent en moins d’une seconde se convertissent à un taux environ 2,5 fois plus élevé que les pages qui se chargent plus lentement.

Le point à retenir est évident. Pour la plupart des gens, le temps qu’il faut pour accéder à votre site Web est leur première expérience avec votre marque. Une vitesse de page lente est un moyen infaillible de commencer la relation d’un mauvais pas. Vous risquez même le désintéressement des anciens utilisateurs.

C’est là qu’intervient le « Lazy Loading » (ou le « chargement paresseux »). Le Lazy Loading est l’une des nombreuses optimisations cruciales de la vitesse des pages que vous pouvez faire pour augmenter les performances et vous donner les meilleures chances de convertir de nouveaux utilisateurs.

Qu’est-ce que le Lazy Loading ?

Le chargement paresseux, en un mot, vous permet de reporter les éléments de page à chargement lent jusqu’à ce que votre page soit rendue. C’est une façon de s’assurer qu’un utilisateur « arrive » à votre site avant de faire le gros travail de charger certains des éléments les plus grands sur votre page Web.

L’idée ici est de raccourcir la durée qu’il faut à l’utilisateur pour atteindre le contenu entier de votre page. Cela représente la vitesse de chargement pour Google. « LCP » a toujours été un élément crucial de la vitesse de la page et de l’expérience utilisateur. C’est encore plus un facteur maintenant que Google a publié ses Core Web Vitals. Google l’a introduit comme les exigences de base pour la santé technique d’un site, indicateurs qu’il utilise pour évaluer l’expérience utilisateur d’une page.

Pour plus d’aide sur le référencement technique, rendez-vous sur notre article sur la façon de faire un audit technique de référencement. La vitesse a, depuis un certain temps, été un facteur de classement critique de Google, mais la sortie de « Core Web Vitals » et l’annonce préalable de la mise à jour de l’expérience de la page représentent des changements marquants dans la vitesse de la page qui permettront d’obtenir du trafic organique.

Les deux derniers composants de Core Web Vitals – First Input Delay (FID) et Cumulative Layout Shift (CLS) – ont à voir avec la façon dont un utilisateur interagit avec une page une fois qu’il l’a atteinte. Pour nos besoins ici, c’est le premier composant, Largest Contentful Paint, où le Lazy Loading peut vraiment avoir un impact. En retardant les temps de chargement des éléments non critiques jusqu’à ce qu’un utilisateur ait atteint votre page Web, vous vous donnez une chance beaucoup plus grande de conserver – et non seulement de conserver, mais aussi de convertir – cet utilisateur.

Comment savoir si votre site a besoin d’un chargement paresseux

Le fait que votre site soit lent ne signifie pas nécessairement que vous devez mettre en œuvre un chargement paresseux. Une meilleure approche de l’optimisation de la vitesse de page consiste à exécuter votre site via un outil de performance de vitesse de page comme PageSpeed Insights ou GTmetrix.

Un exemple d’évaluation de la vitesse de la page à partir des informations PageSpeed.

Là, vous obtiendrez un certain nombre de recommandations qui peuvent ou non nécessiter la mise en œuvre d’un chargement paresseux pour les images, mais qui comprendront certainement d’autres éléments d’optimisation de la vitesse de la page tels que :

• Activation de la compression Gzip
• Minification de JavaScript, CSS et HTML
• Réduire les redirections
• Suppression du JavaScript de blocage de rendu
• Tirer parti de la mise en cache du navigateur
• Améliorer le temps de réponse du serveur
• Utilisation d’un réseau de distribution de contenu (CDN)
• Optimisation des images et des vidéos

L’idée ici est de donner la priorité aux éléments qui donnent à votre site la meilleure chance d’augmenter la vitesse de la page, ou les plus grandes « gains » dans l’ensemble. S’il vous arrive de voir la recommandation « différer les images hors écran », c’est là que le chargement paresseux des images entre en jeu. La recommandation « déduire les images hors écran » est un signe infaillible que vous avez besoin d’un chargement paresseux.

Vous pouvez également utiliser le nouveau rapport Core Web Vitals dans Search Console pour obtenir une vue d’ensemble des pages de votre site qui ont des problèmes de LCP.

Google définit un « bon » LCP comme quatre secondes ou moins : Encore une fois, ce n’est pas parce que le LCP d’une page donnée est plus long que 4 secondes que vous devez mettre en œuvre un chargement paresseux. Mais ce rapport peut vous donner un avis aux endroits sur votre site où les performances sont vraiment lentes ; à partir de là, en utilisant certains des outils de vitesse dont nous venons de discuter, vous pouvez exécuter des diagnostics sur des pages individuelles et voir si « reporter les images hors écran » signifie la nécessité d’un chargement paresseux.

Comment mettre en œuvre le Lazy Loading

Si vous essayez de mettre en œuvre le Lazy Loading par vous-même, voici notre premier conseil : ne le faites pas ! L’exception ici est si vous êtes un développeur chevronné. Dans ces cas, vous pouvez et devez vous sentir habilité à prendre le Lazy Loading entre vos propres mains.

Pour les utilisateurs de WordPress, il existe un certain nombre de plugins pratiques qui aident à l’implémentation du chargement paresseux, le plus important parmi eux étant Lazy Load et Smush. 

Smush, en particulier, est une solution d’optimisation d’image tout-en-un qui vous offre la compression d’images, le chargement paresseux et la conversion d’images de nouvelle génération, qui sont tous essentiels au référencement des images.

Cependant, en fonction de votre système de gestion de contenu (CMS), le Lazy Loading peut ne pas être aussi simple que la mise en œuvre d’un plugin. Shopify, par exemple, recommande sa propre implémentation de chargement paresseux ; tandis que Bigcommerce dispose de ses propres plugins tiers qui prennent en charge le chargement paresseux sur des thèmes courants.

Quelle est la critique du Lazy Loading pour votre site Web ?

Voici le point à retenir : n’ayez pas l’impression d’avoir besoin de passer votre temps ou celui de votre développeur à mettre en œuvre un chargement paresseux s’il ne s’agit pas d’un élément d’action potentiellement à haut rendement trouvé dans vos rapports PageSpeed Insights et GTMetrix. Il existe une liste complète d’autres améliorations de la vitesse du site que vous pouvez et devriez prioriser si elles représentent la plus grande quantité d’économies de temps de chargement (compression Gzip, élimination de JavaScript, CSS et HTML, suppression du blocage du rendu JavaScript, mise à l’exploitation de la mise en cache du navigateur…). 

Si, d’autre part, vous avez un site Web visuel avec beaucoup d’images, et si vous trouvez beaucoup de pages LCP lentes dans votre rapport Core Web Vitals dans Search Console, prenez le temps d’exécuter des diagnostics avec un outil de performance de vitesse du site. Le chargement paresseux peut améliorer de manière significative les temps de chargement pour les sites et les pages.