Quand on a un site ou un blog, la question d’optimisation se pose très vite. On veut voir son site se charger en quelques centièmes de seconde et les pages s’ouvrir à peine le visiteur a cliqué sur un lien. S’il n’existe pas à ma connaissance de formule magique pour réaliser ce vœu – informez-moi si vous en trouvez une –, il existe cependant des outils qui permettent d’améliorer son score. Dans cet article, je vais lister quelques techniques qui permettent d’alléger un site et donc de le rendre plus rapide et mieux optimisé.
Le système de cache
Sur un site, une page qui s’affiche est le résultat d’un processus. Sur WordPress, les contenus de vos pages, articles, etc., et les informations relatives à vos médias (images, vidéos etc.) sont stockés dans une base de données, de même que certaines informations telles que le nom du site, l’image utilisée comme logo, les couleurs et autres images d’arrière-plan.
Donc, chaque fois qu’un visiteur accède à votre site, une requête est envoyée au serveur pour récupérer les informations concernant la page que vous voulez voir. WordPress va rapidement fouiller dans la base de données pour récupérer ces informations, les organiser et les afficher. Vous imaginez bien que ça demande du temps pour faire tout cela, et même si ce n’est que quelques millisecondes, plus il y a de demandes – visiteurs – plus le processus peut prendre du temps.
Pour contourner il existe ce qu’on appelle la cache. Le principe de la cache est simple : lorsqu’une page est ouverte pour la première fois, WordPress récupère son contenu de la base de données, l’affiche et le stocke. Si la même page est demandée par un autre visiteur, WordPress ne cherche plus dans la base de données, mais affiche simplement la page préalablement stockée. Non seulement ça réduit le temps d’affichage de la page, mais en plus ça réduit le nombre de requêtes envoyées au serveur, ce qui rend le site plus rapide.
Pour mettre en place la cache, il suffit d’installer un plugin approprié, et de l’activer. Sur WordPress il en existe plusieurs qui ont des versions gratuites. Essayez WP Optimize, Autoptimize ou LiteSpeed Cache.
Le Lazy Load
L’un des éléments qui ralentit le chargement d’un site, ce sont les images. Et là il se pose un problème : des images de grande taille sont lourdes et donc réduisent le temps de chargement de la page, mais les petites images sont mauvaises pour le rendu final, ce qui ne rend pas service au design du site.
Il est donc question de choisir le juste milieu entre la qualité visuelle du site et la vitesse de chargement des pages. Un choix cornélien, il faut le dire. Si une première étape consiste à uploader des images d’une taille raisonnable (ou à les compresser à l’aide d’un plugin), il faut avouer que ça ne règle pas totalement le problème. Heureusement, il y a une technique qui permet de gagner « en abscisses et en ordonnées », c’est-à-dire autant en qualité d’image qu’en vitesse de chargement : le lazy load.
Traduit littéralement, le terme signifie chargement paresseux. Il s’agit d’une technique qui consiste à ne charger une image que lorsqu’elle doit s’afficher à l’écran. Lorsqu’un visiteur affiche une page de votre site, toutes les images ne s’affichent pas au même moment, ce qui réduit le temps de chargement de la page. Les autres images seront chargées et s’afficheront au fur et à mesure que la page sera déroulée.
La mise en place du lazy load passe également par certains plugins, dont Lazy Load, Smush ou Optimole.
Le Script to Footer et la Minify-cation
Lors que vous visitez un site au design époustouflant, sachez que c’est parfois le fruit de milliers de lignes de code CSS et JavaScript. Or, plus un fichier a du contenu, et plus il est lourd. Plus un fichier est lourd, plus il prend du temps pour être chargé par le navigateur. Plus il prend du temps pour être chargé et plus le temps de chargement de la page est long.
Pour essayer de contourner ce problème, les développeurs combinent deux astuces : certains fichiers, notamment les fichiers JavaScript, sont chargés dans le pied de page du site (c’est-à-dire après que tout le contenu ait été chargé, ce qui n’impacte pas ni le First Contentful Paint ni le First Meaningful Paint). En général, les développeurs chargent les fichiers JavaScript dans le pied de page. Mais si ce n’est pas fait, les plugins Scripts to Footer ou Speed Up – JavaScript To Footer vous assistent dans cette tâche.
Même dans le pied de page, les fichiers peuvent encore être lourds. Il est ainsi courant de « minifier » les fichiers CSS et JS, qu’ils soient insérés en pied en page ou non. Le principe de la « minification » est simple : tout espace inutile dans le fichier est supprimé. En gros, les espaces et sauts de ligne sont supprimés, et certains noms de fonctions ou de variables sont réduits. Au final, on obtient un fichier plus compact et plus léger.
Alors, comment minifier vos fichiers ? Utilisez les plugin WP Fastest Cache, Autoptimize ou WP Performance.
Connaissez-vous d’autres techniques ou plugins d’optimisation ? Partagez-les avec nous ; )
