Quelques astuces pour rendre le chargement de votre site WP plus rapide – #PROductivity 2
Temps de chargement, ce tueur de l’ombre…
Le chargement de votre site a une importance primordiale. Depuis une dizaine d’années de nombreux rapports affichent un lien très clair entre le temps de chargement de votre site et le nombre d’abandon des visiteurs. Il est donc essentiel de rester en dessous de 3 secondes pour obtenir une bonne rétention de vos lecteurs ou utilisateurs. Il y a deux axes principaux à explorer : ce qui peut être fait sur votre site et ce qui peut être fait via votre hébergement.
J’ai calculé le temps total que les humains ont attendu devant le chargement des pages Web. Cela annule tous les gains de productivité de l’ère de l’information. Parfois, je pense que le web est un grand blog pour garder les gens comme moi loin de la société normale.
Scott Adams
Côté software
C’est probablement le moins cher, mais celui qui vous demandera le plus de travail. Voici les différents points à améliorer :
Optimiser les images
Les images sont lourdes, voire très lourdes, pensez à optimiser leur compression pour rendre votre site plus rapide.
Il y a de nombreux outils, sur Mac je vous recommande l’excellent Image Optim qui est aussi disponible sous forme de service web. Pour les amateurs de Windows, l’outil File Optimizer est aussi très intéressant, car il ne se limite pas aux images.
Si vous souhaitez optimiser directement dans WordPress, il y a une option encore plus simple : les modules de compression d’images, il y en a une pléthore, celui de ShortPixel est assez intéressant.
Optimiser le chargement (async)
Synchrone et asynchrone, qu’est-ce que c’est que ce mot barbare ? Imaginez que le chargement de votre site est une suite de paquets livrés par un facteur. Si vous devez attendre que le paquet (A) soit livré pour recevoir le paquet (B) et ceci jusqu’à (Z), ce qu’on appelle synchrone, cela va prendre plus de temps que de se faire livrer tout en même temps par plusieurs facteurs, technique asynchrone.
Attention : en pratique, tous les chargements ne peuvent pas se faire séparément les uns des autres, mais cela sera déjà bien utile de pouvoir les séparer en plusieurs parties.
Utiliser une solution de caching
Bon nombre d’utilisateurs savent vider le cache de leur navigateur, mais ne connaissent pas véritablement l’utilité de celui-ci. Le cache n’est pas un technique d’historique ni une surveillance de votre vie privée ; le fait que les navigateurs proposent de vider toutes ces informations en même temps apporte de la confusion.
Le cache est le fait de préparer le résultat des requêtes qui peuvent être demandées par l’utilisateur. Pour l’expliquer de manière métaphorique et très abrégée, imaginez que vous commandez une boisson. La personne qui vient prendre la commande, arrive directement avec un exemplaire de toutes les boissons qu’il y a à la carte et vous le donne directement, cette personne ne va pas repartir chercher les boissons : vous gagnez un sacré temps.
Le cache peut exister du côté du serveur web, mais aussi sur l’ordinateur qui le consulte. Il y a même encore d’autres niveaux de cache, mais sur lesquels vous n’aurez aucune emprise, comme par exemple votre fournisseur d’accès internet : il ne va pas aller rechercher un million de fois la nouvelle petite image du logo de Google, il va mettre cela en cache.
Pour WordPress, il y a deux plugins principaux qui monopolisent les solutions de caching, grâce à leur excellence et le fait de posséder une version gratuite : W3 total cache et WP Super Cache. Essayer de les départager serait une mission difficile, testez vous-mêmes le résultat de l’une et de l’autre sur votre site.
Minimiser !
Les fichiers CSS et JavaScript peuvent être réduits de taille simplement en enlevant tous les commentaires et les espaces et retour à la ligne, la différence est significative. Procurez-vous la version minifiée ou certaines solutions de caching le font aussi automatiquement.
Restez simple !
Les anglophones parlent souvent de KISS (keep it simple and stupid). Limitez le nombre de modules (appelés plugins en anglais), ils contiennent souvent des ”Hooks”, c’est à dire une sorte de point d’ancrage appelé à chaque chargement (d’une page, d’un site ou autre) afin d’appeler le module pour lui laisser faire son travail. C’est tout à fait vital pour son fonctionnement, mais cela prend du temps, si vous avez 50 modules actifs ou 12, l’impact sera très différent. L’avantage de WordPress est de pouvoir désactiver un module sans l’effacer, tirez parti de cette fonctionnalité !
N’ajoutez pas trop d’éléments et d’animations par page.
En conclusion
Il n’est pas forcément possible d’utiliser toutes les techniques en même temps ; surtout si votre site se doit d’être en plus responsive design, multilingue et beau ! Souvenez-vous, n’ajoutez qu’une technique à la fois et regardez comment votre site réagit. Si certains éléments ne fonctionnent pas, utilisez-en d’autres, il est probable que certain thèmes ou modules ne puissent pas fonctionner avec toutes ces optimisations.
Dans notre prochain article nous parleront de l’optimisation côté hébergeur.
