Saviez-vous que 47% des utilisateurs s’attendent à ce qu’une page se charge en 2 secondes ou moins?
La vitesse de la page est cruciale dans le monde du marketing digital 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 le processus, ont une forte probabilité d’abandonner votre marque pour leur article de blog ou leur produit et de chercher ailleurs.
Un délai 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 des pages entre 0 et 4 secondes et a constaté que les pages qui se chargent en moins d’une seconde convertissent à un taux environ 2,5 fois plus élevé que les pages qui se chargent plus lentement que cinq secondes ou plus.
C’est assez facile à comprendre. 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. Les seller avec une vitesse de page lente est un moyen infaillible de démarrer la relation du mauvais pied. Vous risquez même d’empêcher les utilisateurs réguliers et les clients de se convertir à nouveau.
C’est là que le chargement différé entre en jeu. Le chargement différé est l’une des nombreuses optimisations cruciales de la vitesse des pages que vous pouvez effectuer pour augmenter les performances et vous donner les meilleures chances de convertir de nouveaux utilisateurs.
Parlons-en!
Qu’est-ce que le lazy-load?
Le chargement différé ou Lazy Load, en un mot, vous permet de différer les éléments de page qui ont un chargement lent jusqu’à ce que votre page soit complètement chargée. C’est un moyen de s’assurer qu’un utilisateur «accède» à votre site (et ne rebondit pas) avant d’effectuer le lourd travail de chargement de certains des éléments les plus volumineux et non critiques de votre page Web.
Les avantages sont évidents. 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. Un site avec une vitesse de page lente est un moyen infaillible de démarrer la relation du mauvais pied. Vous risquez même d’empêcher les utilisateurs réguliers et les clients de se convertir à nouveau.
C’est là que le chargement différé entre en jeu. Le chargement différé est l’une des nombreuses optimisations cruciales de la vitesse des pages que vous pouvez effectuer pour augmenter les performances et vous donner les meilleures chances de convertir de nouveaux utilisateurs.
Vous pouvez penser à Core Web Vitals, que Google a présenté en mai 2020, comme étant les exigences de base pour la santé technique d’un site; indicateurs que Google utilise pour évaluer l’UX (expérience utilisateur) d’une page. Ils font eux-mêmes partie d’une mise à jour plus large de l’algorithme, appelée la mise à jour de l’expérience de page, qui rendra l’expérience utilisateur et les performances du site Web des facteurs de classement critiques en mai de l’année prochaine.
La vitesse a été, pendant un certain temps, un facteur de classement critique de Google, mais la sortie de Core Web Vitals et la pré-annonce de la mise à jour de l’expérience de page représentent des changements historiques dans la vitesse des pages de rouleau qui joueront dans le trafic organique à l’avenir.
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, il s’agit du premier composant, le plus grand contenu de peinture, où le chargement différé 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 bien plus grande chance de conserver, et également de convertir, cet utilisateur.
Comment savoir si votre site a besoin d’un chargement différé ?
La lenteur de votre site ne signifie pas nécessairement que vous devez mettre en œuvre un chargement différé. Une meilleure approche de l’optimisation de la vitesse des pages consiste à exécuter votre site via un outil de performance de vitesse de page tel que PageSpeed Insights ou GTmetrix.
Un exemple d’évaluation de la vitesse de la page à partir des insights PageSpeed.
Là, vous obtiendrez un certain nombre de recommandations qui nécessiteront ou non la mise en œuvre d’un chargement différé pour les images, mais qui incluront certainement d’autres éléments d’optimisation de la vitesse de la page, tels que:
- Activation de la compression Gzip
- Réduire JavaScript, CSS et HTML
- Réduire les redirections
- Suppression du JavaScript bloquant le rendu
- Tirer parti de la mise en cache du navigateur
- Amélioration du temps de réponse du serveur
- Utilisation d’un réseau de distribution de contenu (CDN)
- Optimiser les images et la vidéo
L’idée ici est de hiérarchiser les éléments qui donnent à votre site les meilleures chances d’augmenter la vitesse de la page, ou les plus grands «gains» en général.
Si vous voyez la recommandation «différer les images hors écran», c’est là que le chargement différé des images entre en jeu.
Vous pouvez également utiliser le nouveau rapport signaux web essentiels (Core Web Vitals) dans la Search Console pour avoir une vue d’ensemble des pages de votre site présentant des problèmes LCP.
Google définit un «bon» LCP comme étant de quatre secondes ou moins:
comment utiliser la console de recherche pour améliorer le chargement différé
Encore une fois, le fait que le LCP d’une page donnée dure plus de 4 secondes ne signifie pas nécessairement que vous devez implémenter le chargement différé. Mais ce rapport peut vous indiquer les endroits de votre site où les performances sont vraiment lentes; à partir de là, en utilisant certains des outils de vitesse dont nous venons de parler, 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 implémenter le chargement différé
Si vous essayez de mettre en œuvre le chargement différé par vous-même, voici notre premier conseil: ne le faites pas!
L’exception ici est si vous êtes un développeur chevronné. Ou, si vous êtes un développeur amateur avec les côtelettes pour mettre en œuvre le chargement paresseux sur un site de développement et tester de manière fractionnée vos nouveaux scores de vitesse par rapport à votre site en direct. Dans ces cas, vous pouvez et devriez vous sentir habilité à prendre en main le chargement paresseux.
Pour les utilisateurs de WordPress, il existe un certain nombre de plugins pratiques qui aident à la mise en œuvre du chargement différé, les plus importants d’entre eux étant Lazy Load et Smush. Smush, en particulier, est une solution d’optimisation d’image tout-en-un qui vous offre une compression d’image, un chargement paresseux et une conversion d’image de nouvelle génération, qui sont tous essentiels au référencement des images.
outils de chargement différé pour les images
Smush pour l’optimisation de l’image WordPress et le chargement diffété.
Cependant, selon votre système de gestion de contenu (CMS), que ce soit WordPress, Shopify, Bigcommerce, Webflow, le chargement différé peut ne pas être aussi simple que la mise en œuvre d’un plugin. Shopify, par exemple, recommande sa propre implémentation de chargement différé; tandis que Bigcommerce a ses propres plugins tiers qui prennent en charge le chargement différé sur des thèmes communs tels que Stencil et Blueprint.
A noter que sur la version 5.5 de WordPress, le Lazy load est inclus par défaut.
Si tout cela semble au-dessus de votre tête, revenons à notre sentiment initial: à moins que vous ne soyez confiant dans vos efforts de développement, ne passez pas votre temps et vos ressources à essayer de mettre en œuvre vous-même le chargement différé. Au lieu de cela, engagez un développeur professionnel – comme ceux de LOCALiQ – qui peut charger paresseusement des images sur votre site en toute sécurité et en toute confiance (et vous aider avec d’autres optimisations de vitesse de site pendant qu’il y est).
Si cela signifie donner à votre site ou à votre page Web deux secondes supplémentaires d’économies, et si vous êtes totalement confiant de le faire vous-même, donnez le chargement paresseux des ressources qu’il mérite, mais en sous-traitant la tâche à un développeur professionnel.
Il y a de fortes chances que cela se paie plus que lui-même en augmentant les taux de conversion et les revenus sur toute la ligne.
Dans quelle mesure le chargement différé est-il critique pour votre site Web?
Voici ce qu’il faut retenir: ne vous sentez pas obligé de passer votre temps ou celui de votre développeur à mettre en œuvre le chargement différé 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 devez prioriser si elles représentent le plus grand gain de temps de chargement (répété à nouveau: compression Gzip, minimisation de JavaScript, CSS et HTML, suppression de JavaScript bloquant le rendu, utilisation de la mise en cache du navigateur, amélioration du temps de réponse du serveur, etc.).
Si, d’un autre côté, 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 la Search Console, prenez le temps d’exécuter des diagnostics avec un outil de performance de vitesse du site. Le chargement différé peut considérablement améliorer les temps de chargement des sites et des pages avec des éléments plus gros sous le pli. Pour des sites comme ceux-ci, la mise en œuvre du chargement différé est une évidence.
