Qu’est-ce que le chargement différé et comment améliore-t-il l’expérience utilisateur ?

S’il y a un aspect d’un site Web que la plupart des propriétaires de sites Web ignorent, c’est bien le temps de chargement des pages. Vous consacrez beaucoup de temps et d’argent à la conception parfaite de notre site Web et à l’ajout de différents types de contenu pour maintenir l’engagement des visiteurs. Mais que se passe-t-il si cela ne suffit pas pour convertir vos visiteurs en utilisateurs ?

Des études montrent que pour chaque seconde supplémentaire nécessaire au chargement de votre site Web, les chances de convertir un visiteur en client diminuent. Selon Portent , les chances de conversion sont de 40 % à une seconde de chargement, alors qu'elles chutent à 34 % à la suivante et à 29 % à trois secondes. Vous vous demandez peut-être : « Quelle est la solution, alors ? »

Et c'est là qu'intervient le concept de Lazy Loading. C'est un moyen plus rapide de charger votre site Web sans sacrifier la qualité de votre contenu.

Dans cet article, nous explorerons le Lazy Loading, pourquoi l'utiliser et comment il se compare à d'autres méthodes. Allons-y !

Table des matières

• Qu’est-ce que le chargement paresseux ?
• L’importance du chargement paresseux
• Chargement impatient ou chargement paresseux
• Comment fonctionne le chargement paresseux
• Implémentation du chargement différé

Qu’est-ce que le chargement différé ?

Le chargement différé est un moyen de gagner du temps en chargeant uniquement les parties d'un site Web dont vous avez besoin immédiatement. Au lieu de tout charger en même temps, ce qui peut être lent et utiliser beaucoup de ressources, cette méthode charge le contenu petit à petit.

Les images ou vidéos qui ne se chargent pas immédiatement comportent souvent des éléments d'espace réservé jusqu'à ce qu'ils soient nécessaires. Par exemple, Lazy Loading ne charge pas toutes les images en même temps. Il ne charge que ceux que vous pouvez voir sur votre écran. Le reste ne se chargera pas tant que vous ne ferez pas défiler vers le bas

Au lieu d'attendre que tout se charge, vous pouvez voir immédiatement ce qui est déjà à l'écran.

Conseil d'expert : vérifiez le fonctionnement du chargement paresseux sur différents navigateurs et appareils.Ceci afin de s'assurer qu'il n'y a pas de problèmes de compatibilité.

L’importance du chargement paresseux

Nous savons déjà que le Lazy Loading peut vous aider à augmenter la conversion. Mais ce n’est pas le seul avantage qu’il présente. Voici quelques autres raisons pour lesquelles vous devriez implémenter le Lazy Loading sur votre site Web.

Optimiser les performances

Le chargement différé réduit les transferts de données lorsque quelqu'un visite votre site Web. Ceci est essentiel pour les personnes utilisant des appareils mobiles avec une connexion Internet lente et de petits forfaits de données.

Réduisez la bande passante et la charge du serveur

Le chargement paresseux enregistre les données et réduit le travail du serveur. Cela réduit les coûts pour les propriétaires de sites Web et les utilisateurs en empêchant le chargement du contenu lorsqu'il n'est pas nécessaire.

Améliorer le référencement

Les moteurs de recherche comme Google donnent tellement la priorité aux sites Web à chargement rapide qu'il s'agit d'un facteur de classement officiel. En utilisant la technique du Lazy Loading, vous pouvez augmenter la vitesse de chargement de vos pages, réduire le taux de rebond et amener votre site Web à un classement plus élevé.

Qu’est-ce que le chargement impatient ?

Le chargement hâtif est exactement le contraire du chargement paresseux. Il charge initialement toutes les ressources requises en même temps, y compris les fichiers multimédias, les scripts et les styles. Cela signifie que tous les éléments de page nécessaires sont immédiatement disponibles. Il n'y a donc pas de chargement supplémentaire lorsque les utilisateurs font défiler ou interagissent.

Le chargement hâtif était la méthode conventionnelle utilisée dans le passé, et de nombreux sites Web l'utilisent encore aujourd'hui.

Bien qu’il soit facile à mettre en œuvre, le chargement hâtif est devenu moins pertinent en raison de plusieurs facteurs, notamment :

Augmentation de la taille des pages Web

Les sites Web modernes utilisent davantage de médias riches et de parties interactives. Cela signifie que la page Web moyenne est beaucoup plus grande qu’auparavant. Ainsi, un chargement rapide peut entraîner des temps de chargement initiaux de pages plus longs. Surtout pour les utilisateurs dont les connexions Internet sont plus lentes.

Impact négatif sur les performances

Des temps de chargement de page plus longs peuvent nuire à d'importantes mesures de performances des sites Web , telles que First Contentful Paint (FCP) et Largest Contentful Paint (LCP). Ce sont des éléments clés pour le référencement et l’expérience utilisateur.

Montée des utilisateurs mobiles

Avec l’utilisation massive de la navigation mobile, il est devenu crucial de charger les choses très rapidement dès le départ.

Chargement impatient ou chargement paresseux

Voici une comparaison rapide entre Eager Loading et Lazy Loading :

Le chargement paresseux et le chargement hâtif sont deux méthodes différentes de chargement de ressources avec leurs propres avantages et inconvénients. Cependant, du point de vue technologique actuel, le Lazy Loading est considéré comme la technique préférée pour la plupart des sites Web modernes en raison de son efficacité, de ses avantages en termes de performances et de sa meilleure expérience utilisateur.

Comment fonctionne le chargement différé

Maintenant que vous savez pourquoi le Lazy Loading garantit de meilleurs résultats entre les deux, voyons comment il y parvient.

Navigation et interaction des utilisateurs : le chargement paresseux dépend de la manière dont les utilisateurs utilisent la page Web.Cela démarre souvent lorsque les utilisateurs font défiler ou déplacent leur souris. Au fur et à mesure du défilement, le navigateur devine qu'un nouveau contenu est nécessaire dans la zone qu'il peut voir. Il commence ensuite à charger ces ressources. Le chargement paresseux peut également démarrer par d'autres actions, comme cliquer sur un bouton ou survoler un élément.

Implémentation technique pour les images : Lazy Loading fonctionne différemment pour différents types de contenu.Pour les images, très courantes, vous commencez généralement par afficher un espace réservé de mauvaise qualité ou une simple icône de chargement. Lorsque l'utilisateur fait défiler l'image à proximité de l'image réelle, celle-ci, claire et de haute qualité, se charge. De cette façon, les utilisateurs n'attendent pas des images qu'ils ne peuvent pas encore voir.

Application différentes ressources Web : Le chargement différé est une méthode flexible qui peut être utilisée pour divers éléments, pas seulement pour les images.Cela fonctionne aussi bien pour les vidéos, les iframes et même les éléments qui nécessitent beaucoup de scripts. En chargeant ces éléments uniquement lorsque cela est nécessaire, vous pouvez considérablement améliorer la vitesse de chargement de votre page et gérer efficacement vos ressources. Ceci est particulièrement crucial pour les ressources lourdes telles que les vidéos haute définition.

Implémentation du chargement différé

Dans cette partie, nous allons vous montrer les différentes manières de mettre en œuvre le Lazy Loading sur votre site Web.

Méthode 1 – Implémentation manuelle du Lazy Loading

La manière manuelle d’implémenter le Lazy Loading n’est pas pour tout le monde. C'est complexe et vous devez au moins avoir une connaissance intermédiaire en codage.

Pour ce faire, vous utiliserez principalement HTML et JavaScript. Avant de commencer, assurez-vous d'avoir accès aux fichiers de thème de votre site WordPress et n'hésitez pas à modifier le HTML et le JavaScript.

Voici un guide détaillé pour vous aider tout au long du processus :

Étape 1 : Sauvegardez votre site

Sauvegardez toujours votre site WordPress avant d'apporter des modifications aux fichiers de thème pour éviter de perdre des données si vous faites une erreur.

Étape 2 : Editer le fichier function.php du thème

• Accédez aux fichiers de votre site WordPress (à l'aide d'un client FTP ou d'un gestionnaire de fichiers dans votre panneau de contrôle d'hébergement).
• Accédez à /wp-content/themes/your-theme/ et recherchez le fichier function.php .
• Ouvrez function.php pour le modifier.

Étape 3 : Ajoutez le script Lazy Loading

Dans function.php , ajoutez une fonction pour mettre en file d'attente un fichier JavaScript pour le Lazy Loading. Voici un exemple de base :

fonction add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

Ce code suppose que vous disposez d'un fichier JavaScript nommé lazy-load.js dans un dossier js dans votre répertoire de thème.

Étape 4 : Créez le fichier JavaScript

• Créez un nouveau fichier nommé lazy-load.js dans le dossier js de votre répertoire de thème.
• Ajoutez JavaScript pour gérer le chargement paresseux. Voici un exemple de base utilisant IntersectionObserver :

document.addEventListener("DOMContentLoaded", function() {

laissez lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

if (« IntersectionObserver » dans la fenêtre) {

let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

entrées.forEach(fonction(entrée) {

si (entrée.isIntersecting) {

laissez lazyImage = entrée.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.classList.remove("paresseux");

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(function(lazyImage) {

lazyImageObserver.observer(lazyImage);

});

}

});

Étape 5 : Mettez à jour vos balises d'image dans WordPress

Modifiez vos balises d'image pour prendre en charge le chargement différé. Dans vos modèles PHP ou directement dans vos articles/pages, modifiez vos balises d'image comme suit :

<img class="lazy" src="placeholder-image.jpg" data-src="original-image.jpg" alt="description de l'image">

Remplacez placeholder-image.jpg par une image basse résolution ou un graphique de chargement, et original-image.jpg par l'URL réelle de l'image.

Conseil d'expert : utilisez des espaces réservés réactifs pour les images chargées paresseusement afin de garantir que la mise en page reste stable.

Étape 6 : Testez vos modifications

• Si un plugin de mise en cache est installé, assurez-vous de vider le cache de votre site.
• Ensuite, accédez à votre site Web et faites défiler jusqu'à la section où une image est censée être chargée paresseusement.
• Prenez un moment pour voir si les images se chargent correctement lorsque vous faites défiler.

Remarques

• Assurez-vous de toujours tester d'abord dans un environnement de développement, avant de le faire sur votre site Web en ligne.
• Pensez à créer un thème enfant en faisant cela. Les mises à jour du thème peuvent remplacer vos modifications.
• Pour d'autres types de contenu comme les vidéos ou les iframes, une approche similaire peut être utilisée où l' attribut src est remplacé par un attribut data-src et chargé via JavaScript dans la fenêtre d'affichage.

Cette technique est un moyen simple d’incorporer le Lazy Loading. Si vous avez des sites Web plus complexes ou des exigences spécifiques, vous souhaiterez peut-être explorer une solution plus performante ou un plugin.

Méthode 2 – Utiliser un plugin WordPress pour implémenter le Lazy Loading

C'est la méthode la plus simple des deux, car vous pouvez utiliser un plugin WordPress pour activer le Lazy Loading en toute sécurité. Plusieurs plugins vous permettent de le faire, mais nous utiliseronsWP-Optimize dans cet exemple.WP-Optimize est un puissant plugin WordPress qui vous aide à augmenter la vitesse de votre site Web et à améliorer l'expérience utilisateur.

Il offre une méthode simple et facile pour configurer vos images, iframes et vidéos en chargement paresseux. Sa fonction Lazy Load intégrée retarde automatiquement le chargement des ressources Web jusqu'à ce qu'elles soient visibles, ce qui entraîne des temps de chargement des pages beaucoup plus rapides. Il s’agit cependant d’une fonctionnalité premium de WP-Optimize.

Pour activer la fonctionnalité :

• Ouvrez l' ongletWP-Optimize > Images depuis votre tableau de bord d'administration WordPress
• Ouvrez le sous-onglet Lazy Load Images
• À partir de là, vous pouvez activer le chargement paresseux pour les images et les vidéos/Iframes.

Si vous devez désactiver le chargement différé pour certaines images, images d'arrière-plan, vidéos ou iframes, activez-le simplement à partir d'ici. Vous pouvez également choisir d'ignorer certaines classes d'images.

Avant et après

Nous avons testé la vitesse d'un exemple de site Web avant et après la mise en œuvre de Lazy Load. Le site Web était déjà assez rapide, avec un temps de chargement First Contentful Paint (FCP) de 1,5 seconde,selon GTMetrix.

Après avoir activé le Lazy Loading, le FCP est passé à 344 ms, ce qui est bien plus rapide que ce que nous avions auparavant. Les résultats peuvent varier en fonction de la quantité de contenu que vous avez sur votre page, mais dans la plupart des cas, votre score FCP s'améliorera.

Prêt à accélérer le temps de chargement de vos pages ?

Alors c'est ça! Nous avons parlé de ce qu'est le Lazy Loading et du rôle important du Lazy Loading pour les sites modernes. En attendant de charger les éléments jusqu'à ce que vous en ayez besoin, cela accélère le chargement des pages, enregistre les données Internet et rend la navigation plus fluide, en particulier sur les téléphones avec des données limitées.

Nous avons également donné quelques conseils utiles sur la façon d’utiliser le Lazy Loading dans WordPress. Nous couvrons tout, depuis le bricolage avec du code jusqu'à l'utilisation d'un plugin comme WP-Optimize.

Essayez d'ajouter le Lazy Loading à votre site Web et dites-nous comment cela affecte vos performances. Vous avez des questions ? N'hésitez pas à demander dans les commentaires.

Questions fréquemment posées

Le Lazy Loading est-il bon ou mauvais ?

Le Lazy Loading est généralement considéré comme une bonne pratique car il présente plusieurs avantages. Il contribue à améliorer les temps de chargement des pages Web et améliore l'expérience utilisateur en chargeant le contenu uniquement lorsque cela est nécessaire.

Qu’est-ce que le chargement paresseux dans l’interface utilisateur ?

Le chargement paresseux dans l'interface utilisateur fait référence à la pratique consistant à charger des éléments visuels tels que des images et des vidéos uniquement lorsqu'ils se trouvent (ou à proximité) de la fenêtre d'affichage de l'utilisateur.

Le Lazy Loading affecte-t-il le référencement ?

Lorsqu'il est mis en œuvre correctement, le Lazy Loading peut avoir un impact positif sur le référencement en améliorant les temps de chargement des pages et en améliorant l'expérience utilisateur, qui sont tous deux des facteurs de classement importants.

Devriez-vous charger paresseux toutes les images ?

Bien qu'il soit avantageux de charger paresseusement les images hors écran, cela n'est pas nécessaire pour les images immédiatement visibles lors du chargement de la page. Le chargement immédiat de ces images peut éviter tout retard dans leur affichage.

Quels sont les problèmes liés au chargement différé ?

Certains problèmes liés au Lazy Loading incluent des retards de chargement du contenu lorsque les utilisateurs font défiler le contenu, des problèmes potentiels d'indexation des moteurs de recherche s'il n'est pas implémenté correctement et le recours à JavaScript, qui peut ne pas être pris en charge par tous les navigateurs.