Publié le 16.01.2020

Comment optimiser la vitesse de chargement de son site wordpress grâce au lazy load

GuerinDLC
Directeur artistique

La vitesse de chargement de votre site web est un facteur important. En effet, il peut avoir un impact direct sur la transformation de vos visiteurs à d'éventuels prospects.

La vitesse de chargement d’un site comporte plusieurs facteurs (CMS, contenu, images, scripts, structure du code, temps de réponse du serveur….), et, il est important de faire son maximum afin de les optimiser, tant pour améliorer l’expérience utilisateur que pour marquer des points dans son classement Google. 

Les résultats d’une mauvaise optimisation ? Avec un temps de chargement supérieur à 2 secondes ou plus, vos visiteurs risquent de quitter la page avant même de l’avoir chargé, résultat, un taux de rebond important, perte de trafic, expérience utilisateur négligée. 

L’utilisation d’images à tendance à alourdir considérablement vos pages web, nous vous donnons ici quelques astuces simples à appliquer afin d’optimiser leurs poids et leur chargement dans la page. 

1

Qu’est ce que le lazy load, et pourquoi l’utiliser ?

Au lieu de charger toutes les images / ressources de votre page à la fois, le Lazy load (ou chargement paresseux) consiste à charger seulement les ressources nécessaires visibles sur l’écran des utilisateurs à l’instant T. 

Ce n’est que lorsque vous scrollez vers le bas, que votre site charge petit à petit les ressources qui sont désormais visibles dans la zone de visualisation du navigateur.
En réalité, c’est un procédé commun que vous avez surement déjà dû croiser sans même vous en rendre compte, que ce soit sur les feeds facebook, les épingles de tableaux pinterest, ou bien encore sur twitter.

L’utilisation du lazy load vous permettra donc de proposer à vos utilisateurs un site plus dynamique, et réactif, qui chargera en fonction de leurs besoins. 

2

Comment utiliser le lazy load sur wordpress.

Pour cela, il existe différents plugins, l’équipe de fière allure en a testé et sélectionné deux pour vous :

Lazy load by WP Rocket 

Mis à jour régulièrement et compatible wordpress 4.7 ou ultérieur ce plugin gratuit permet d’afficher les images d’une page uniquement lorsqu’elles sont visibles par l’utilisateur. Il en résulte une réduction du mécanisme de requêtes HTTP améliorant ainsi le temps de chargement.
Le plugin fonctionne : 

Sur les images dans les articles, les miniatures ainsi que les images dans un widget texte, les avatars, les iframes et les smileys.

Il vous permet également de remplacer les iframes Youtube par une miniature d’aperçu afin d’accélérer davantage le temps de chargement du site.

WordPress infinite scroll – Ajax load more 

Mis à jour régulièrement et compatible wordpress 4.0 ou ultérieur, ce plugin WordPress à est destiné à “lazy loadé” les articles, les commentaires, etc.. Basé sur des requêtes Ajax, ce plugin est spécialement conçu pour un défilement infini, et est livré avec un Shortcode Builder. Les shortcodes peuvent ainsi être injectés dans les pages via l’éditeur de texte wordpress ou directement dans votre thème. Ce plugin est également compatible avec les plugins de e-commerce populaire tels que WooCommerce et Easy Digital Downloads.

3

Testez votre site

Il existe différents outils d’analyse pour votre site internet, afin de voir si votre site aurait besoin d’optimisation, ou de voir si la mise en place d’un plugin de lazy load à améliorer votre temps de chargement, vous pouvez tester :

Pingdom tool website speed test

GTmetrix speed test

4

Lazy load d’accord, mais comment optimiser encore plus mes images ?

Que votre site comporte beaucoup d’images ou non, nous vous conseillons de systématiquement compresser vos images, à différents degrés évidemment pour ne pas trop perdre en qualité.
Chez fière allure, cela est un automatisme avant même d’uploader nos ressources dans les médias wordpress. 

Nous utilisons :

OptimZilla (outil en ligne, simple et efficace qui permet de choisir son degré de compression et de compresser de multiples fichiers en simultané).

Or, si vous trouvez ce procédé fastidieux il est aussi possible d’utiliser un plugin qui se chargera de cela pour vous automatiquement (de notre côté, nous préférons utiliser un outil en ligne et éviter au maximum la surcharge de plugins, pour garder un temps de chargement optimal) :

Imagify

Mis à jour régulièrement, et avec plus de 200 000 installations à son actif, Imagify est une référence dans le domaine.
Ce plugin gratuit compresse automatiquement (sur 3 niveaux de compression au choix) toutes vos images téléversés dans les médias wordpress.

5

Un plugin tout en un c’est possible ?

Image optimization & lazy load by optimole

Mis à jour régulièrement et compatible wordpress 4.7 ou ultérieur, Optimole est LA solution tout-en-un pour tous vos besoins d’optimisation d’image.

Ce plugin optimise vos images en temps réel avec un système basé sur le cloud pour accélérer votre site Web et fournir des images de haute qualité parfaitement dimensionnées pour chaque appareil.

Donc, si vous cherchez un plugin qui permet le LazyLoad, avec un CDN (content delivery network) et des images parfaitement dimensionnées, alors Optimole est parfait pour vous.

Le plan basic permet d’utiliser ce plugin gratuitement si vous ne dépassez pas les 5000 visiteurs / mois. Au delà, il faudra envisager un plan payant.

Le mot de la fin

Il existe de nombreuses manières d’optimiser de temps de chargement de votre site internet, le lazy load en étant une simple à mettre en place qui permet d’améliorer considérablement les performances. 

Nous espérons que cet article vous a aidé à choisir le meilleur plugin lazy load en fonction de vos besoins pour votre site web ! Si vous avez besoin d’aide afin de pousser les optimisations de votre site web, n’hésitez pas à nous contacter !

Je veux que mon projet
ait Fière Allure

CONTACTER LE STUDIO

Notre mission est simple :

Rendre le digital accessible en accompagnant les professionnels dans leurs projets digitaux.

Vous aussi,
vous voulez avoir
Fière Allure ?

Donnez vie à votre projet avec l’aide de notre Studio polyvalent !
Parlons-en !
© 2020 - 2021 Fière Allure 
crossmenuchevron-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram