Souhaitez-vous découvrir comment implémenter le lazy loading sur WordPress ?
Si votre site Web WordPress repose fortement sur le contenu visuel, vous devez peut-être y ajouter la fonctionnalité de Lazy Loading -chargement paresseux. Cette fonctionnalité WordPress aide à améliorer la vitesse et les performances de la page d’un site Web, ce qui la rend essentielle pour vos efforts de référencement.
Cet article explorera comment fonctionne le Lazy Loading ainsi que ses avantages et ses inconvénients. Vous apprendrez également comment l’implémenter sur votre site Web et les moyens d’optimiser son utilisation pour de meilleurs résultats.
Sans plus tarder, nous vous invitons à consulter notre liste de thèmes WordPress. Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog
Ensuite revenons vers ce pourquoi nous sommes là.
Qu’est-ce que le Lazy Loading ou chargement paresseux ?
C’est une fonctionnalité qui permet à un site Web de ne charger que les images visibles par l’utilisateur. Elle aide le site web à maintenir une vitesse de chargement rapide en ne téléchargeant pas d’images en dehors de la fenêtre d’affichage.
Comment fonctionne le Lazy Loading de WordPress ?
Lorsqu’un utilisateur visite un site Web WordPress, son navigateur télécharge toutes les images de la page Web à la fois. Pour les pages avec de nombreuses images haute résolution, ce processus peut réduire considérablement le temps de chargement, ce qui peut nuire aux performances de votre site web.
L’ajout d’un Lazy Loading à votre site Web l’invite à ne télécharger que les images visibles sur l’écran de l’utilisateur. Le reste des fichiers multimédias est remplacé par une image d’espace réservé et n’est chargé que lorsque l’utilisateur fait défiler la page Web.
Avantages et inconvénients du Lazy Loading de WordPress
Si vous vous demandez toujours si vous devez implémenter le chargement paresseux d’images dans WordPress, voici les avantages et les inconvénients de la fonctionnalité :
Avantages:
- Réduit l’utilisation de la bande passante, réduisant les coûts d’hébergement.
- Améliore la vitesse du site web en améliorant ainsi l’expérience de navigation des visiteurs.
- Améliore l’expérience mobile.
- Améliore les efforts de référencement, augmentant le classement de votre site web sur les moteurs de recherche.
Contre:
- Provoque une mise en mémoire tampon du contenu, ce qui nuit à la vitesse de chargement.
- Ralentit le défilement rapide.
Comment ajouter le Lazy Loading à votre site web WordPress : 3 méthodes
Il existe trois façons d’implémenter le lazy loading sur votre site web WordPress. Nous vous recommandons de choisir la méthode qui conviendra le mieux à votre situation.
1. Mise à niveau vers WordPress 5.4 ou supérieur
WordPress 5.4 et les versions ultérieures prennent en charge le lazy loading par défaut. La mise à jour de votre WordPress vers la dernière version permettra automatiquement de prendre en charge un chargement paresseux.
Bien qu’il s’agisse de la méthode la plus simple, elle ne vous permet pas de configurer les images à charger paresseusement. Par conséquent, votre site Web peut abuser de la fonctionnalité, manifestant les inconvénients susmentionnés.
Un autre facteur à considérer est la nature différente de la fonctionnalité du Lazy Loading dans chaque version de WordPress. Récemment, WordPress a publié une nouvelle version de WordPress qui implémente des améliorations pour résoudre les problèmes avec les mauvais scores à contenu large des anciennes versions.
Cela signifie que les sites Web qui fonctionnent sur des versions plus anciennes de WordPress n’obtiennent pas les mêmes avantages que ceux utilisant WordPress 5.9 qui est la dernière version.
2. Activer le lazy loading natif via le navigateur
Les navigateurs populaires comme Chrome, Firefox et Opera prennent en charge le lazy loading. Il vous suffit d’ajouter l’attribut <img loading= “lazy”> aux images et vidéos ciblées pour l’activer automatiquement.
Dans le lazy loading natif de WordPress, l’attribut loading prend en charge ces trois valeurs :
- Auto : Déclenche le lazy loading par défaut, ce qui revient à ne pas inclure d’attribut de chargement.
- Lazy : Répartit le chargement des ressources jusqu’à ce que chacune atteigne la distance spécifiée par rapport à la fenêtre d’affichage.
- Eager : Charge toutes les ressources dès le chargement de la page, quel que soit leur emplacement.
Voici un exemple d’utilisation :
<img src=”nom-image.png” loading=”lazy” alt=”alt attribute” width=”800″ height=”411″>Cette méthode est idéale pour charger paresseusement certaines images, en donnant à chacune un attribut de chargement qui dicte leur heure d’apparition dans la fenêtre d’affichage. Cependant, le chargement paresseux d’images individuelles peut prendre un certain temps, surtout si votre site Web contient beaucoup de fichiers multimédias.
3. Installer un plugin WordPress
Étant donné que tous les navigateurs ne prennent pas en charge le Lazy loading pour les images et les vidéos, la deuxième méthode peut ne pas fonctionner tout le temps. Vous pouvez atténuer ce problème en installant un plugin WordPress de Lazy loading. Cette méthode vous donne plus de contrôle sur les images à charger paresseusement sans codage.
Voici les meilleurs plugins WordPress de lazy loading à choisir, accessibles via le répertoire des plugins WordPress.
Improve your Website Loading Speed
L’un des points positifs de ce plugin WordPress est qu’il prend en charge tous les types d’images, y compris AVIF. Ce plugin WordPress freemium de lazy loading fournit une optimisation et une mise à l’échelle de l’image pour les adapter aux appareils des visiteurs, assurant une expérience utilisateur optimale.
Lorsqu’il détecte un réseau plus lent, ce plugin WordPress vous donne la possibilité de dégrader la qualité de l’image. De plus, vous pouvez économiser de l’espace de stockage en stockant des images dans la bibliothèque cloud de ce plugin WordPress.
Ce plugin gratuit vous permet d’optimiser les images pour jusqu’à 5 000 visites mensuelles. L’achat du plan Pro vous permettra de charger paresseusement des images pour 25 000 visiteurs actifs mensuels et plus encore. Les images des deux plans sont diffusées via le CDN AWS Cloudfront.
Télécharger | Démo | Hébergement Web
Smush
Smush est un plugin d’optimisation d’image populaire qui prend en charge le lazy loading. Il est compatible avec les thèmes WordPress populaires, les constructeurs de pages et les plugins de bibliothèque multimédia. De plus, il vous permet d’enregistrer les paramètres du plugin dans des configurations illimitées et de les appliquer en quelques clics.
D’autres fonctionnalités utiles sont la détection de la taille d’image incorrecte, la prise en charge du multisite et les outils de compression d’image. La mise à niveau vers Smush Pro vous permet d’optimiser les grandes images sans limitation de taille, de sauvegarder les images originales et d’accéder à d’autres plugins WPMU Pro. Les prix commencent à partir de 5 $ / mois.
Télécharger | Démo | Hébergement Web
a3 Lazy Load
a3 Lazy Load est un plugin gratuit de lazy loading orienté mobile. Il est entièrement compatible avec WordPress 5.9 et un certain nombre d’outils populaires, y compris les plugins WebP et AMP.
En plus d’offrir des fonctionnalités de base du lazy loading, a3 Lazy Load vous permet également de charger des vidéos paresseuses, y compris des vidéos intégrées dans des pages, des articles, des types de posts personnalisés et des widgets. Des effets de lazy loading et la possibilité de charger des scripts à partir de l’en-tête ou du pied de page sont également disponibles.
D’autres fonctionnalités notables comme la prise en charge du multisite, la prise en charge des images WebP et la charge paresseuse iframe – cela s’applique aux iframes que le noyau WordPress ne charge pas, tels que Google Maps et les médias intégrés.
Télécharger | Démo | Hébergement Web
Conseils sur le lazy loading de WordPress
La clé pour tirer le meilleur parti du lazy loading est de l’utiliser correctement. Voici quelques conseils pour configurer un chargement paresseux sur votre site web WordPress :
- Ne chargez pas paresseusement les images d’entête. Comme les images placées en haut de la page sont visibles lors du chargement, leur chargement paresseux n’a aucun avantage.
- Choisissez les espaces réservés appropriés. Nous vous recommandons d’utiliser une couleur dominante unie ou une image de mauvaise qualité comme espace réservé pour vos images.
- Ajoutez du temps tampon pour le chargement de l’image. De cette façon, vos images sont prêtes juste avant d’entrer dans la fenêtre d’affichage des visiteurs, éliminant ainsi tout temps d’attente.
- Définissez les dimensions des conteneurs d’images. Cela vous aidera à éviter les changements soudains de mise en page, ce qui donnera à votre page Web un aspect ordonné lors du chargement.
- Implémentez le lazy loading sur les longues pages uniquement. Les pages longues comprennent celles qui prennent plus de deux tours de roulettes pour atteindre la fin et ont plus de cinq images.
Le lazy loading dans WordPress vous permet de donner aux visiteurs une meilleure expérience de navigation. En plus d’améliorer la vitesse du site web, cette fonctionnalité réduit également votre utilisation de la bande passante. Dans l’ensemble, cela contribue à vos efforts de référencement pour de meilleurs classements dans les résultats des moteurs de recherche.
Autres ressources recommandées
Nous vous invitons aussi à consulter les ressources ci-dessous pour aller plus loin dans la prise en main et le contrôle de votre site web et blog.
- Comment corriger les erreurs de redirection sur WordPress
- Quelques plugins pour intégrer des services Google sur votre blog
- 5 plugins WordPress pour afficher des notifications
- Comment créer des modèles personnalisés sur WordPress
- Comment utiliser des arrière-plans différents sur WordPress
Conclusion
C’est tout pour ce tutoriel qui vous montre comment implémenter le Lazy Loading sur votre site web WordPress. Nous espérons que cet article vous a aidé à comprendre comment tirer le meilleur parti de la fonctionnalité de lazy loading sur les sites web WordPress. Assurez-vous d’utiliser un hébergement WordPress de haute qualité pour améliorer davantage les performances de votre site web.
Si vous avez un quelconque souci, ou une suggestion, faites-nous-en part dans les commentaires.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
En attendant, partagez cet article sur vos différents réseaux sociaux.
…