Qu'est-ce que le chargement paresseux ? Un concept clair

Un concept clair sur ce qu'est le chargement paresseux. Comment améliorer la vitesse de chargement du site en appliquant la technique de chargement paresseux. Quels sont les plugins de chargement paresseux d'images recommandés et plus encore ?

Le chargement différé est une technique dans laquelle les images, vidéos et autres fichiers multimédias ne sont chargés que lorsque cela est nécessaire (dans ce cas, la page défile jusqu'à l'image).

Le chargement paresseux a été popularisé par Google. Google l'a mis en œuvre sur la plupart de ses sites Web à fort trafic.

C'est en fait un excellent moyen d'améliorer les performances de votre site Web pour vos utilisateurs.

Il s'agit d'un meilleur moyen d'implémenter le chargement dynamique des ressources que le préchargement, car il est paresseux par nature et ne charge les actifs que lorsque cela est nécessaire.

Lorsque vous faites défiler la page, les fichiers multimédias sont chargés et les images en particulier. Cela réduit considérablement le temps de chargement initial de la page en réduisant le nombre de demandes de ressources HTML, CSS et JavaScript.

Le chargement paresseux des images peut toujours être implémenté à l'aide de plugins tiers, mais il est en fait assez simple à implémenter sur votre site Web existant si vous êtes à l'aise avec le code HTML/CSS.

Pourquoi devrais-je ajouter le chargement différé à mon site ?

Pendant longtemps, charger tous les éléments de la page en parallèle était la meilleure pratique. Mais aujourd'hui, il est très courant pour les utilisateurs d'avoir une connectivité limitée et des réseaux mobiles rapides.

Pour cette raison, c'est une bonne idée de ne charger que ce dont vous avez besoin dans un premier temps, puis de charger des ressources supplémentaires plus tard lorsqu'elles sont nécessaires.

Le chargement différé peut également réduire la quantité de travail qui doit être effectuée par le navigateur au moment du chargement de la page. Cela signifie finalement que vous obtiendrez un chargement de page plus rapide pour l'utilisateur.

Vous pouvez implémenter le chargement paresseux sur votre site Web de plusieurs façons. Comme toute technique, il y a des avantages et des inconvénients associés à chaque méthode.

Comment ajouter le chargement paresseux dans le site WordPress ?

Vous pouvez ajouter un chargement paresseux à n'importe quel site Web avec quelques ajouts simples de code CSS et JavaScript. Tout ce dont vous avez besoin est également un peu de balisage HTML.

Mais dans cet article, je ne parlerai que des plugins de chargement paresseux WordPress qui vous permettent de profiter des avantages du chargement paresseux d'images sur un site WordPress.

Comment ajouter le chargement paresseux à l'aide du plugin ?

Il existe de nombreux plugins WordPress disponibles qui ajouteront automatiquement la fonctionnalité de chargement paresseux à votre site Web en un seul clic.

Si vous souhaitez augmenter le temps de chargement global du site, je recommanderai le plugin d'optimisation de la vitesse Permatters. Ce plugin optimisera votre site Web pour une meilleure expérience utilisateur et de meilleures performances. Il dispose également de quelques fonctionnalités supplémentaires telles que le chargement paresseux, la compression gzip, etc…

Si vous voulez vous salir les mains avec du code ou si vous avez des exigences préalables, je vous recommanderai les autres plugins suivants.

WP Rocket est l'un des plugins de cache WordPress les plus populaires. C'est aussi le plugin le plus populaire pour le chargement paresseux d'images. Cela vous aidera à réduire la vitesse de chargement et à augmenter le nombre total de pages vues. Vous pouvez lire WP Rocket Review.

Vous pouvez également utiliser le plugin Light Speed ​​Cache qui est un autre plugin populaire parmi les utilisateurs de WordPress. Il vous permet d'utiliser des règles de mise en cache avancées pour votre site Web, ce qui contribue à améliorer le temps de chargement des pages et réduit également l'utilisation de la bande passante.

De plus, les plugins ci-dessus aident à charger des iFrames. Je vous recommande ces plugins pour cela.

Chargement paresseux vs chargement dynamique vs préchargement JavaScript vs chargement paresseux Eager

La grande différence entre les quatre termes est ce qui se passe lorsqu'un utilisateur visite votre site pour la première fois.

Chargement paresseux : avec le chargement paresseux, les ressources sont chargées selon les besoins (comme son nom l'indique). Cela signifie qu'en fonction des actions des utilisateurs, certains éléments peuvent ne pas être chargés du tout.

Chargement dynamique : Avec le chargement dynamique, vous devrez tout précharger, même si ce n'est pas nécessaire. Ainsi, selon la quantité de données que vous devez envoyer, cela peut augmenter considérablement le temps de chargement de la page, même si une partie de ce contenu n'est jamais vue par personne.

Préchargement JavaScript :

Le préchargement JavaScript est une partie importante du processus de chargement différé de l'image. Il facilite le cache du navigateur en fournissant HTML (et CSS si vous utilisez une solution basée sur le style).

Il utilise AJAX pour fournir un fichier séparé pour chaque image de votre page. Cela permet aux navigateurs de commencer à télécharger des images avant qu'elles ne soient entièrement chargées, augmentant ainsi le nombre d'images pouvant être chargées via une connexion réseau lente ou avec un ordinateur client lent.

Chargement paresseux impatient : Ceci est similaire au chargement paresseux, et vous chargerez les ressources selon vos besoins. La différence est qu'avec la méthode impatiente, vous n'avez pas à vous soucier de savoir si quelque chose est visible ou non en ce moment. S'il est déjà chargé, tant mieux – sinon, chargez-le simplement lorsque cela devient nécessaire.

Comprendre le Lazy Loading pour le SEO

Certaines personnes craignent que le chargement paresseux des images ait un impact négatif sur la capacité d'un SEO à accéder à son contenu.

Google fait un excellent travail de mise en cache des ressources sur votre site Web chaque fois qu'il l'explore, donc si vous chargez des éléments d'une manière qui reste rapide dans le temps et ne change pas trop souvent, je ne pense pas que quiconque devrait s'inquiéter d'affecter sa recherche rang moteur.

Chargement différé et CDN

Il existe des CDN utiles dans l'industrie qui peuvent vous aider à distribuer vos fichiers image et multimédia. La plupart de ces services offrent une excellente expérience utilisateur en implémentant pour vous une fonctionnalité de chargement paresseux.

Cloudflare CDN est l'un que je voudrais souligner parmi les autres services CDN.

Cloudflare est un réseau de diffusion de contenu qui offre un CDN gratuit et payant à tous les utilisateurs de son compte. Il optimise également votre site Web et améliore la sécurité en mettant en œuvre des stratégies avancées telles que l'optimisation de la vitesse des pages, HTTP/2 et bien d'autres. Il vous aide également à charger paresseusement l'image de votre site Web et les fichiers multimédias.

Chargement paresseux sur ordinateur ou mobile : quel impact cela a-t-il sur le référencement Google ?

Le chargement paresseux existe depuis longtemps sur les ordinateurs de bureau. C'est une fonctionnalité disponible dans la plupart des principaux navigateurs, mais certaines fonctionnalités, telles que le préchargement et le chargement partiel, ne sont pas disponibles pour tous les navigateurs.

Avec les appareils mobiles, cependant, le chargement paresseux est quelque chose auquel vous devrez faire attention.

Il est important que vous le considériez comme un facteur de classement SEO, car Google prête désormais attention au chargement paresseux des images sur les appareils mobiles.

La clé ici n'est pas seulement d'implémenter le chargement paresseux, mais aussi de s'assurer qu'il charge les ressources de manière rapide et efficace. Si ce n'est pas le cas, il est possible que votre classement dans les moteurs de recherche en soit affecté négativement.

Image de chargement paresseux dans différentes tailles

Une autre raison pour laquelle vous devriez vous concentrer sur le chargement paresseux des images est l'utilisation accrue du mobile.

Les gens aiment naviguer et faire des recherches avec leur téléphone, mais ils ne sont pas aussi rapides ou précis lorsqu'il s'agit de cliquer sur des liens, donc avoir des images plus grandes signifie que les gens cliqueront probablement avant le chargement complet de l'image.

Donc, avoir des images plus petites sera évidemment mieux pour les appareils mobiles, même si cela signifie que plus de données doivent être chargées, cela en vaut la peine à long terme car les gens cliqueront plutôt que de quitter complètement votre site Web.

Quels frameworks sont utilisés en lazy load ?

Quelques options s'offrent à vous :

1. Picturefill (utilisation par défaut)

Picturefill est un script qui fournit une fonctionnalité de chargement paresseux pour vos images. Cette bibliothèque JavaScript légère fonctionnera avec presque tous les principaux navigateurs et elle est également réactive. Il changera donc son comportement en fonction du type d'appareil que vous utilisez.

2. LazyLoadJS (par défaut utilisé)

LazyLoadJS est un script qui fournit une fonctionnalité de chargement paresseux pour vos images. Il est très léger et fonctionne avec tous les principaux navigateurs. Vous n'avez donc pas à vous soucier des problèmes lors de son utilisation.

Il comporte également plusieurs files d'attente afin d'améliorer les performances globales de votre site Web et il est très facile à utiliser - les développeurs de tous niveaux de compétence ne devraient avoir aucun problème à l'utiliser.

3. LoadCSS (par défaut utilisé)

LoadCSS est un script qui fournit une fonctionnalité de chargement paresseux pour vos feuilles de style, contrairement à d'autres bibliothèques qui ne fonctionnent qu'avec des images ou des fichiers vidéo. Cela préchargera également HTML et JavaScript.

4. SlimerJS (non disponible)

SlimerJS est un script qui fournit une fonctionnalité de chargement paresseux pour vos images et il n'utilise aucune bibliothèque JavaScript, mais il possède sa propre API que vous pouvez utiliser pour configurer le fonctionnement du chargement paresseux de votre image.

Il est également très léger et rapide, de sorte qu'il n'aura aucun impact sur les performances de votre site Web.

Le chargement différé fonctionne-t-il dans les images d'arrière-plan ?

Oui, cela fonctionnerait dans les images d'arrière-plan.

Conclusion

Le chargement paresseux est l'une des techniques d'optimisation des performances les plus sous-utilisées en ce qui concerne WordPress et les sites Web en général.

C'est très facile à mettre en œuvre une fois que vous savez comment, mais peu de gens le savent. Si vous souhaitez améliorer la vitesse de chargement de votre page, je vous recommanderai vivement d'implémenter le chargement paresseux pour les fichiers image et multimédia.