Meilleures façons de personnaliser votre propre chargement paresseux pour les sites Web
Publié: 2019-07-29Le chargement différé est utilisé pour différer le chargement de certaines images ou éléments de page Web pour plus tard lorsqu'un utilisateur visite une page Web. Cela se fait généralement pour les images et les éléments de site Web sous le pli. L'idée est que plutôt que de charger la page Web entière en une seule fois, vous chargez certaines parties de la page Web pendant que l'utilisateur continue de défiler vers le bas.
Le principal avantage de l'utilisation du chargement paresseux est qu'il réduit le temps de chargement de l'ensemble du site Web. Le Lazy Loading améliore les performances du site Web et offre une meilleure expérience utilisateur en chargeant d'abord la partie supérieure que les visiteurs peuvent immédiatement commencer à regarder ou à lire. Lorsque les visiteurs arrivent sur votre page Web et doivent attendre longtemps, ils perdent leur intérêt et peuvent s'en aller. Cependant, si vous leur donnez quelque chose à regarder ou à lire instantanément pendant que vous chargez le reste de la page Web, vous pouvez les garder accrochés à votre site Web. Le deuxième avantage du chargement paresseux est la réduction des coûts. Les images ne sont téléchargées que si le visiteur du site Web visite cette section particulière du site Web. Par conséquent, si le visiteur ne fait pas défiler vers le bas, moins de données sont téléchargées sur son appareil, ce qui lui permet d'économiser de l'argent.
En raison de ces avantages, le Lazy Loading est un excellent moyen d'améliorer l'expérience utilisateur et l'efficacité de votre site Web.
Vous pouvez personnaliser le chargement paresseux pour votre site Web de deux manières : en utilisant la propriété d'arrière-plan CSS ou en utilisant la balise <img>. Cependant, la méthode de balise <img> est la plus courante des deux car cette technique est facile à utiliser.
Propriété de la balise <img> :
Lorsque la balise <img> est utilisée, le navigateur utilise l'attribut src pour déclencher le chargement de l'image. Peu importe qu'il s'agisse de la 1ère image ou de la 100ème image de votre code. Si le navigateur reçoit l'attribut src, il déclenchera le chargement de l'image. Donc, pour charger ces images en différé, ajoutez l'URL de l'image à un attribut autre que src. Par exemple, si vous placez l'URL de l'image dans l'attribut data-src, le navigateur ne déclenche pas le chargement de l'image car l'attribut src est vide.
Maintenant que le chargement initial s'est arrêté, nous devons dire au navigateur quand l'image doit être chargée. Nous voulons déclencher le chargement de l'image dès qu'elle entre dans la fenêtre. Il existe deux manières de vérifier la synchronisation d'une image entrant dans la fenêtre :
1. Utilisation d'événements JavaScript :
Dans cette technique, les écouteurs d'événements sont utilisés pour les événements de redimensionnement, de changement d'orientation et de défilement dans le navigateur. L'événement de défilement est le plus évident. Il est utilisé pour vérifier quand l'utilisateur fait défiler la page Web. Les événements 'orientationChange' et 'resize' sont également essentiels pour le chargement paresseux. L'événement de redimensionnement est déclenché lorsqu'il y a des changements dans la taille de la fenêtre du navigateur. L'événement 'orientationChange' se produit lorsque l'appareil est pivoté du mode portrait au mode paysage ou vice versa. Dans ces cas, le nombre d'images visibles à l'écran changera et nous devrons donc déclencher le chargement de l'image.
Lorsque l'un de ces événements se produit, nous recherchons toutes les images présentes sur la page qui n'ont pas encore été chargées. En vérifiant toutes les images déchargées présentes sur la page Web qui se trouve maintenant dans la fenêtre d'affichage, nous découvrons celles qui doivent être chargées instantanément. Ceci est fait en utilisant le haut de défilement du document actuel, la hauteur de la fenêtre et le décalage supérieur de l'image.
Si une image est entrée dans la fenêtre d'affichage, nous prenons l'URL de l'image de l'attribut data-src et la plaçons dans l'attribut src qui déclenche le chargement de l'image. Ensuite, nous devons supprimer la classe lazy de l'image car cette classe charge les images paresseusement. Lorsque toutes les images sont chargées, les écouteurs d'événement sont supprimés.
Dans le cas du défilement, l'événement de défilement se déclenche en continu. Donc, pour augmenter les performances, nous pouvons ajouter un petit délai d'attente qui limitera l'exécution du chargement paresseux.
2. Utilisation de l'API d'observateur d'intersection :
L'API Intersection Observer est une API relativement nouvelle dans les navigateurs. Cette technique rend très simple la détection de la synchronisation d'un élément entrant dans la fenêtre. Cette technique offre d'excellentes performances sans utiliser de mathématiques complexes par rapport à la méthode précédente.
Tout d'abord, nous devons attacher l'observateur à toutes les images qui nécessitent un chargement paresseux. Lorsque l'API détecte qu'une image est entrée dans la fenêtre d'affichage, elle sélectionne l'URL à partir de data-src et la place dans l'attribut src à l'aide de la méthode 'isIntersecting' pour déclencher le chargement de l'image. Après cela, la classe paresseuse est supprimée avec la suppression de l'observateur.
L'API Intersection Observer fonctionne rapidement sans rendre le site plus lent lors du défilement par rapport à l'utilisation d'événements JavaScript. Avec la technique de l'écouteur d'événement, nous avons dû ajouter un délai d'attente qui ajoute un léger retard. Cependant, l'API Intersection Observer n'est pas prise en charge par tous les navigateurs. Par conséquent, l'écouteur d'événements est devenu un choix populaire pour les utilisateurs.
Propriété d'arrière-plan CSS :
Pour charger des images d'arrière-plan CSS, le navigateur doit créer le modèle d'objet CSS (CSSOM) avec le modèle d'objet de document (DOM) pour décider si le style CSS s'appliquera à un DOM présent dans le document existant. Si la règle CSS ne s'applique pas à l'élément, le navigateur ne chargera pas l'image de fond.
Avec cette technique, nous appliquons la propriété CSS background-image lorsqu'un élément arrive dans la fenêtre. Il existe un élément avec ID bg-image (image de fond) en CSS. Une fois que la classe lazy est ajoutée à l'image, dans la technique CSS, nous remplaçons la propriété bg-image et la rendons nulle.
L'ajout de la classe .lazy au #bg-image est préférable en CSS plutôt que d'utiliser #bg-image seul. Initialement, le navigateur applique background-image: none à l'élément. Une fois que nous avons fait défiler la page Web, les écouteurs d'événements ou l'observateur d'intersection détectent l'image présente dans la fenêtre d'affichage et suppriment la classe .lazy. Ceci n'est pas applicable dans la technique CSS car la propriété bg-image est appliquée à l'élément déclenchant le chargement de l'image d'arrière-plan.
Voici donc les deux façons de personnaliser votre propre site Web de chargement paresseux. Ces deux techniques donnent des résultats exceptionnels. Cependant, si vous voulez une technique simple, vous devriez opter pour la balise <img>. Il existe de nombreux plugins disponibles pour les utilisateurs de WordPress pour personnaliser également les images de chargement paresseux sur leurs sites Web WordPress. L'optimisation des images pour votre site Web WordPress à l'aide de ces plugins, ainsi que le chargement paresseux, amélioreront les performances de votre site Web, offriront une meilleure expérience et contribueront également au référencement.