Il n’y a rien de plus ennuyeux que des sites Web sans images ni vidéos. Si les gens voulaient lire un texte sans fin, ils achèteraient un livre, n’est-ce pas ? L’intégration de médias visuels dans des sites Web est assez simple, bien que l’ajout de lots puisse ralentir considérablement votre site. Cependant, c’est là que le chargement lazy load dans WordPress peut sauver la mise.

Qu’est-ce que le Lazy Loading dans WordPress ?

En règle générale, lorsqu’un visiteur arrive sur un site Web, l’intégralité du contenu de la page est téléchargée, y compris tous les médias intégrés à cette page. S’il y a beaucoup de médias, ou si les fichiers sont très volumineux – souvent le cas avec des vidéos ou des images haute résolution – la vitesse de chargement est sérieusement impactée. Nous avons tous visité des sites où nous étions frustrés d’attendre qu’une page se charge, alors nous passons ailleurs.

Le chargement lazy load de WordPress est une technique permettant d’optimiser la vitesse des pages qui contiennent beaucoup d’images ou de vidéos. Il fonctionne en téléchargeant uniquement les médias qui doivent être immédiatement visibles pour le visiteur. Le téléchargement de toute image ou vidéo actuellement “hors écran” est retardé jusqu’à ce que le visiteur fasse défiler la page plus bas. Donc, fondamentalement, les images et les clips vidéo ne sont téléchargés que lorsqu’ils sont réellement nécessaires et pas avant.

Pourquoi charger des images et des vidéos en lazy load sur votre site WordPress ?

La vitesse de la page est de plus en plus importante. Lorsqu’ils surfent sur le Web, les gens sont maintenant beaucoup plus impatients qu’il y a vingt ans et s’attendent maintenant à ce que le contenu se charge presque instantanément.

Les moteurs de recherche tels que Google et Bing ont reconnu cette impatience, car ils tiennent désormais compte de la vitesse des pages pour déterminer le classement des pages. Donc, en théorie, s’il y a deux sites Web avec un contenu identique, mais que l’un a été optimisé pour la vitesse, celui-ci sera mieux classé dans les recherches que celui qui n’a pas été optimisé.

Comme mentionné précédemment, les médias visuels sont probablement le plus grand coupable en ce qui concerne le chargement lent des pages. Si vous n’avez que quelques images de base qui ne sont pas de haute résolution, vous pouvez probablement survivre sans trop vous soucier de l’optimisation de la vitesse, même si c’est une bonne pratique de le faire. Mais si votre site contient beaucoup d’images ou de contenu vidéo, le chargement lazy load peut considérablement accélérer votre site WordPress.

Un autre avantage du chargement lazy load de WordPress est que seules les images et les clips vidéo visionnés sont téléchargés, ce qui économise la bande passante. Cela peut vous faire économiser beaucoup d’argent sur les coûts d’hébergement si vous utilisez un plan qui facture en fonction de l’utilisation de la bande passante.

Cet article vous montrera comment charger paresseusement des images manuellement ou en utilisant un plugin. Nous couvrirons les deux.

Comment charger des images et des vidéos lazy load WordPress de manière native

Si votre site Web fonctionne sur WordPress 5.4 ou une version antérieure, Chrome 76 de Google prend en charge le chargement lazy load natif – tout ce que vous avez à faire est d’utiliser l’attribut de chargement <img loading= “lazy”>. Il fonctionne avec la plupart des navigateurs alimentés par Chromium tels que Chrome, Opera, Firefox et Edge.

Vous trouverez ci-dessous un exemple de code incorporant l’attribut de chargement différé. Si cela vous convient, vous pouvez simplement le modifier, le couper et le coller dans les attributs de votre image si nécessaire :

<img src=”imagefilename.png” loading=”lazy” alt=”texte alternatif de l’image” width=”200″ height=”200″>

L’inclusion de loading= “lazy” active le chargement lazy load, de sorte que l’image (ou la vidéo) ne sera pas téléchargée avant le moment où le navigateur doit l’avoir prête pour l’affichage. Si vous deviez remplacer “lazy load” par “empressé”, l’image se téléchargerait immédiatement, quel que soit l’endroit où se trouve le visiteur sur la page par rapport à l’image.

Si vous utilisez WordPress 5.5 et versions ultérieures, il y a de bonnes nouvelles – ces versions ajoutent automatiquement l’attribut de chargement lazy load. Ainsi, n’est-il plus nécessaire de jouer manuellement avec les attributs ou d’installer des plugins, du moins pour les navigateurs les plus populaires.

Comment charger paresseusement des images et des vidéos WordPress avec un plugin

D’accord, d’accord, nous admettons que nous venons de dire que WordPress 5.5 et plus traite automatiquement le chargement et que vous n’avez pas besoin de jouer avec les plugins. Mais il y a un « mais ». Deux en fait :

• Il existe encore des navigateurs spécifiques, dont Safari, qui ne prennent pas en charge le chargement lazy load WordPress par défaut. Un plug-in lazy load peut résoudre ce problème et garantir que tous les visiteurs de votre site bénéficient du chargement lazy load, quel que soit le navigateur qu’ils utilisent.
• Alors que l’attribut de chargement lazy load natif prend en charge les iframes, tels que les vidéos intégrées, les cartes, etc., WordPress ne l’ajoute pas actuellement aux iframes. Cela signifie que pour charger des vidéos paresseusement, un plugin ou l’ajout manuel de l’attribut discuté précédemment sera nécessaire.

Par conséquent, nous allons maintenant passer en revue certaines des options de plug-in disponibles et ce qu’elles peuvent faire pour vous. Avant de commencer, cependant, nous vous suggérons fortement de prendre l’habitude d’optimiser vos photos et vidéos avant de les télécharger dans votre WordPress. De nombreux conseils sont disponibles en ligne sur la façon de procéder, ou vous pouvez utiliser un plugin pour le faire pour vous. Cela dit, quelques-uns des plugins de chargement lazy load dont nous discutons regroupent également des outils d’optimisation d’image, alors lisez la suite.

Optimole

Comme Smush, Optimole est un chargeur lazy load combiné à un optimiseur d’image tout en un. Il est également disponible dans les versions gratuite et Pro.

La version gratuite regroupe quelques fonctionnalités intéressantes, notamment : 

• Chargement lazy load sans jQuery
• Compression d’image sans perte de qualité
• Entièrement automatisé
• Tous les types d’images sont pris en charge
• Prise en charge des images Retina et WebP
• Prise en charge des bibliothèques d’images Cloud
• Diffuse gratuitement des images à partir d’un réseau mondial de diffusion de contenu (CDN)
• Optimisation et dimensionnement réactifs des images en fonction de l’appareil utilisé par le visiteur, y compris les appareils Retina
• Aucun changement de contenu
• Ajouter automatiquement des filigranes aux images
• Baisser la qualité de l’image lorsque des connexions plus lentes sont détectées
• Prise en charge du constructeur de pages

Dans le cadre du forfait gratuit, vous pouvez optimiser un nombre illimité d’images pour un maximum de 5 000 visites mensuelles. Pour les sites à fort trafic, la mise à niveau vers Pro étendra les visites mensuelles à 25 000. Pro coûte à partir de 23 €/mois ou 229 €/an, et ajoute également les fonctionnalités supplémentaires suivantes :

• Mise à l’échelle automatique de l’image
• Chargement lazy load intelligent
• Bande passante illimitée
• Assistance par e-mail 24h/24

Optimole a une note moyenne d’utilisateurs de 4,8/5,0 et plus de 80 000 installations actives existent.

Smush

Avec plus d’un million d’installations actives, Smush est de loin le plugin de chargement lazy load le plus populaire pour les images disponibles aujourd’hui. Mais ce qui rend ce plugin encore plus impressionnant, ce sont ses outils d’optimisation d’image intégrés. Ainsi, en plus du chargement lazy load d’images sur votre site, vous pouvez également les optimiser facilement sans avoir besoin d’autres plugins.

La version gratuite de Smush vous offre les fonctionnalités suivantes :

• Chargement différé pour retarder les images hors écran jusqu’à ce qu’elles soient nécessaires
• Compression d’image sans perte – la qualité des images reste inchangée
• Optimisation et compression en bloc – jusqu’à 50 images à la fois
• Redimensionnement de l’image
• Détection d’image de taille incorrecte pour trouver les images qui entravent la vitesse de votre site
• Optimiser les images, y compris celles qui ne se trouvent pas dans la médiathèque
• Optimisation automatisée
• Optimisez les images PNG, JPEG et GIF jusqu’à 5 Mo
• Intégration du bloc Gutenberg pour afficher toutes les statistiques directement dans les blocs d’image
• Compatibilité multisites
• Compatible avec la plupart des thèmes, plugins, constructeurs de pages et bibliothèques multimédias

Smush Pro coûte 6 $ par mois ou 60 $ par an. Il ajoute les fonctionnalités supplémentaires suivantes :

• Compression d’image 2x
• Optimisez des images illimitées
• Option pour stocker les images originales en tant que sauvegardes
• Redimensionnement et mise à l’échelle automatiques
• Prise en charge WebP
• Conversion automatique des images PNG en JPEG
• Compresser des images plus grandes (> 5 Mo)
• Soutien

Vous pouvez essayer Smush Pro gratuitement pendant sept jours, bien qu’à notre avis, la version gratuite convienne à la plupart des gens, sauf si vous avez beaucoup de très grandes images à gérer. Le plugin a une note moyenne impressionnante de 4,8/5,0 étoiles.

a3rev Lazy load

a3 Lazy Load est également un plugin de chargement lazy load très populaire pour WordPress, avec plus de 200 000 téléchargements actifs et une note moyenne des utilisateurs de 4,3/5,0 étoiles. Il prend en charge le chargement lazy load pour les images et les iframes/embeds. Cela donne également un niveau de contrôle sur le fonctionnement du chargement lazy load, par exemple, quand le contenu doit commencer à se charger, exclure certains contenus du chargement lazy load, etc.

a3 Lazy Load est un plugin gratuit, mais cela ne veut pas dire qu’il manque d’excellentes fonctionnalités :

• Sélectionnez s’il faut ou non charger toutes les images qui ne sont pas chargées à partir de la médiathèque WordPress dans les publications, les pages, les types de publication personnalisés, les widgets, les vignettes de publication et les Gravatars
• Prise en charge des images dans les conteneurs qui utilisent le défilement horizontal
• Chargement différé pour les vidéos intégrées par URL dans les publications et les pages de toutes les zones de contenu et widgets
• Prend en charge le contenu ajouté par iframe à partir de n’importe quelle source que le noyau de WordPress ne charge pas, par exemple, les médias intégrés WordPress, les boîtes “J’aime” de Facebook, les boutons “J’aime” ou “Recommander”, le profil Google+, Google Maps
• Compatible avec WordPress embed post sur n’importe quelle fonctionnalité du site
• Prise en charge des images WebP
• Effets de chargement lazy load : FADEIN, SPINNER, couleur d’arrière-plan de préchargement personnalisé
• Excluez toutes les images ou vidéos par nom de classe de l’application de l’effet de chargement lazy load
• Noscript fallback si un utilisateur a désactivé JavaScript dans son navigateur
• Compatible avec n’importe quel thème WordPress qui suit le WordPress Theme Codex, ainsi qu’avec de nombreux plugins

Ces fonctionnalités devraient être plus que suffisantes pour la plupart des utilisateurs souhaitant s’assurer que leur site se charge paresseusement sur tous les types de navigateurs tout en ajoutant un niveau de contrôle sur celui-ci.

Lazy Load pour les vidéos

Vous aurez probablement déjà deviné d’après le nom que Lazy Load for Videos est un plugin qui ajoute un chargement lazy load aux vidéos Vimeo ou YouTube intégrées à votre site Web. Il est idéal pour étendre le chargement lazy load d’images natives intégré à WordPress pour inclure également des vidéos.

Le plugin fonctionne en remplaçant les vidéos intégrées par des vignettes statiques et cliquables. Le chargement de la vidéo complète ne commence qu’en cliquant sur les vignettes. Vous pouvez configurer le fonctionnement des intégrations, par exemple en spécifiant les fonctionnalités du lecteur à utiliser.

Une autre fonctionnalité intéressante de Lazy Load for Videos est les publicités pré-roll et post-roll. Cela vous permet de convertir toutes les vidéos en une liste de lecture. Vous pouvez ensuite ajouter automatiquement votre propre vidéo d’entreprise, un teaser de produit ou tout autre matériel publicitaire vidéo à chaque vidéo de cette liste de lecture – parfait pour la marque et la publicité vidéo.

Lazy Load for Videos est entièrement gratuit, mais malgré cela, il vous offre toujours d’excellentes fonctionnalités, notamment :

• Option pour afficher les titres vidéo sur les vignettes de prévisualisation
• Choisissez parmi les tailles de vignettes standard ou de couverture
• Ajoutez une clause de non-responsabilité relative à la conformité au RGPD en plus des aperçus
• Possibilité de supprimer les annotations telles que “s’abonner à la chaîne”
• Option pour masquer les commandes du lecteur YouTube et des informations telles que le titre de la vidéo et le téléchargeur au début de la lecture de la vidéo
• Chargement lazy load de vidéos YouTube dans des widgets de texte
• Choisissez parmi différents styles de bouton de lecture
• Barre de progression rouge ou blanche pour YouTube et couleur personnalisée pour le lecteur Vimeo
• Option pour ne pas afficher les vidéos liées à la fin des vidéos
• CSS personnalisé prêt
• Compatibilité multisites

De manière impressionnante, plus de 10 000 installations actives de Lazy Load for Videos sont en cours d’exécution, et il a obtenu une note d’utilisateur de 4,5/5,0 étoiles. C’est un excellent moyen d’augmenter gratuitement la vitesse de votre page si vous avez de nombreuses vidéos intégrées à votre site.

Lazy Load pour les commentaires

Alors que les images et les vidéos sont probablement les plus grands contrevenants lorsqu’il s’agit de ralentir les sites, les commentaires des visiteurs peuvent également causer des problèmes. Cela est particulièrement vrai lorsque vous avez un site Web extrêmement populaire avec des sections de commentaires très actives. Les choses s’aggravent encore lorsque vous utilisez Gravatar pour les images d’avatar, car cela peut entraîner de nombreuses requêtes HTTP externes qui ralentissent davantage la vitesse de votre page.

Les principales fonctionnalités de Lazy Load for Comments incluent :

• Les commentaires ne se chargent que lorsqu’ils sont nécessaires, ce qui améliore la vitesse de chargement des pages
• Réduction du nombre de requêtes HTTP
• Les gravatars sont chargés lazy load
• Prise en charge de Genesis et Divi
• Traduction prête
• Configuration simplifiée
• Crochets pour les développeurs

Lazy Load for Comments est un plugin entièrement gratuit qui obtient un score très respectable de 4,8/5,0 étoiles auprès des utilisateurs, et il existe plus de 6 000 installations actives à partir du répertoire de plugins WordPress. Donc, si vous avez beaucoup de grandes sections de commentaires qui ralentissent la vitesse sur votre site Web, nous vous recommandons fortement d’envisager d’utiliser ce plugin.

Incidemment, également disponible auprès du même développeur est Lazy Social Comments . C’est très similaire à Lazy Load for Comments, sauf que c’est spécifiquement pour les commentaires Facebook.

Veuillez noter que bien que cet article se concentre sur l’activation du chargement lazy load dans WordPress, vous vous demandez peut-être “comment puis-je me débarrasser du chargement lazy load dans WordPress ?” lorsque vous rencontrez des conflits entre votre plugin et le chargement lazy load WordPress natif. La désactivation du chargement lazy load WordPress natif peut facilement être effectuée en :

• en utilisant un plugin gratuit tel que Disable Lazy Loading , ou
• en ajoutant cet extrait de code au fichier functions.php de votre thème enfant ou à un plugin comme Code Snippets :

add_filter(‘wp_lazy_loading_enabled’, ‘__return_false’);

En cas de doute, reportez-vous à la documentation utilisateur du plugin ou vérifiez auprès du développeur si la désactivation du chargement différé natif est nécessaire ou non.

Veuillez noter que tous les plugins suggérés dans cet article sont testés sur WordPress version 5.7.2 et sont à jour.

C’est parti !

Vous avez maintenant appris que même si les dernières versions de WordPress intègrent déjà le chargement lazy load d’images, de vidéos, etc., il peut arriver que vous ayez besoin de plus de contrôle sur son fonctionnement sur votre site. De plus, certains navigateurs, tels que Safari d’Apple, doivent encore rattraper WordPress sur le front du chargement lazy load. L’utilisation d’un plug-in garantira que, quel que soit le navigateur utilisé par les visiteurs de votre site Web, le contenu multimédia sera chargé paresseusement et, par conséquent, la vitesse des pages sera optimale. Et nous savons tous que des vitesses optimales signifient des visiteurs heureux.

Comment gérez-vous les images et les vidéos sur votre site ? Avez-vous déjà entendu parler du chargement lazy load ou est-ce quelque chose de complètement nouveau pour vous ? Utilisez-vous simplement le chargement lazy load natif de WordPress, les verrues et tout ? Ou utilisez-vous un plugin pour plus de contrôle ou pour vous assurer que tous les types de navigateurs sont couverts ? Et optimisez-vous manuellement vos images avant de les télécharger sur WordPress, ou utilisez-vous un plugin (soit une optimisation d’image, soit une combinaison optimisation/chargement lazy load) pour vous aider ?

Dans la même catégorie :

Aucun article similaire