Lazy Load pour WordPress

Le Lazy Loading à toujours été l’une de mes techniques de web performance préféré. Rapide à mettre en place et le gain en performance est considrable.

Bref, le Lazy Load est un must!

La ressource la mieux optimisée est la ressource jamais envoyée.

En effet, Google n’a pas tord.

Qui-a-t’il de plus rapide que de ne rien charger du tout? Il s’agit du principe de base derrière le Lazy Load. Les ressources ne sont chargées que lorsqu’elles sont nécessaires.

Voici un exemple concrès sur le chargement d’une page.

Article sans Lazy Load

Article sans Lazy Load
Article sans Lazy Load Pingdom Speed Test

Le même article avec Lazy Load

Article avec Lazy Load
Article avec Lazy Load Pingdom Speed Test?

Le résultat est impressionnant. Regardez particulièrement la réduction du poids et des requêtes lorsque le Lazy Load est activé.

Qu’est-ce que le Lazy Loading et pourquoi vous devriez l’utiliser?

Le Lazy Load est une technique en performance web qui permet de cacher les images qui ne sont pas encore afficher à l’écran.

C’est vrai après tout, pourquoi charger toutes les images d’une page alors que nous ne savons même pas si l’utilisateur en aura besoins?

Du coup, le lazyloading consiste à charger les images au fur et à mesure que l’utilisateur en a besoins. Ce qui as un impact réelle sur le chargement initial de la page.

Démonstration du fonctionnement du Lazy Load dans l’inspecteur de Chrome. Les images sont chargé progressivement lors du défillement de la page.

Quand est-il du SEO?

Les bienfaits du Lazy Load sur la performance sont indéniable, mais quant-est-t-il des inconvénients?

Aucun souci pour les images

Heureusement, je ne serais pas anxieux à votre place pour l’indexation de vos images.

Pourquoi?

Et bien, parce que le Lazy Load d’images est une technique très simple. L’attribut SRC est seulement substitué pour un autre attribut. Comme par exemple DATA-SRC. L’image est donc présente dans le DOM dès le début. Rien à voir avec du contenu dynamiquement injecté dans une page!

Ensuite, la plupart des modules modernes ajoute un double de l’image entre balise <noscript> pour les utilisateurs avec le Javascript désactivé.

Alors, aucun souci à se faire pour l’indexation des images.

L’indexation des commentaires

Le Lazy Load fonctionne différament pour les commentaires.

D’entrée de jeux, sacher que les commentaires Facebook et Disqus, ne seront probablement jamais indexé par Google. Mais, ce n’est peut-être pas un problème pour vous selon votre stratégie SEO.

Ensuite, les commentaires WordPress natif injecté dans la page ne seront vraisemblablement pas aussi rapidement indexé, mais devraient l’être.

Configurer le Lazy Load avec un plugin

La plupart des articles à propos du Lazy Load vous affiche une liste interminable de plugins. Ce ne sera pas le cas ici.

Images et iframes

Lazy Load by WP Rocket est développé par l’équipe du très bon WP Rocket. En fait, je crois que c’est le même code utilisé dans les deux plugins.

Configuration super simple et vous avez même une option pour afficher une image à la place des vidéos Youtube.

Aucune dépendance à jQuery

Commentaires Disqus

Disqus Conditional Load est conçu pour les utilisateurs du système de commentaire Disqus. Chargement au clic ou au défillement de la page.

Contrairement au plugin officiel, celui-ci ne ralenti pas le chargement initial de la page. Les commentaires sont également importé automatiquement dans WordPress.

Aucune dépendance à jQuery

Commentaires WordPress natif

Lazy Load for Comments est conçu pour les commentaires natif de WordPress. Il permet un chargement au clic ou au défillement de la page.

Toutefois, je vous suggère de ne pas utiliser ce plugin à moins d’avoir énormément de commentaires sur vos articles.

Dépendance à jQuery

Commentaires Facebook

Lazy FB Comments permet le chargement différé des commentaires Facebook. le plugin permet un chargement au clic ou au défillement de la page.

Dépendance à jQuery

Activer le Lazy Load pour les thèmes TTFB

Nul besoins d’extension si vous utilisez l’un de nos thèmes. Le Lazy Load est intégré et optimisé dans le thème. Même les images de background sont traitées!

Nos thèmes intègrent l’excellent Lazysizes qui fonctionne avec le “intersection observer” pour une performance optimal. Le module est même recommandé par Google. :)

Activez seulement le Lazy Load dans les options de performance.

Comment activer le Lazy Load pour Light & Bold

Light & Bold Lazy Load Options

Comment activer le Lazy Load pour Minimall

Minimall Lazy Load Options

Conclusion

À mon avis, le Lazy Load devrait avoir une place importante dans votre stratégie de performance. La solution choisi dépend peux. Souvenez vous seulement de privilégier les modules utilisant le “intersection observer” pour fonctionner et idéalement, sans dépendances.

N’hésitez pas à écrire un commentaire si vous avez des questions.

En savoir plus
Smashing Magazine: Intersection Observer
Google Web Fondamental: Lazy Loading Images and Video
Kinsta: Configurer le Lazy Load pour WordPress