WordPress : améliorer le temps de chargement de votre site web

Le temps de chargement des pages d’un site internet est un facteur important pour les moteurs de recherche, notamment Google. Plus une page se charge rapidement, plus les internautes sont satisfaits d’être sur le site en question. Or les internautes sont chouchoutés par Google qui met leur satisfaction au centre de toutes les règles à respecter pour positionner une page correctement dans ses résultats.

Or dans un site internet créé sous WordPress, les optimisations de code ne sont pas toujours accessibles. Et la vitesse de chargement dépend beaucoup du thème utilisé. Voici quelques astuces pour mesurer et améliorer ce facteur.

Mesurer le temps de chargement d’une page

Il existe quelques sites internet capables de vous fournir gratuitement le temps de chargement d’une page de votre site internet. Et comme notre objectif est de plaire au dieu Google, soyons logique : utilisons l’outil Google qui effectue cette mesure : Page Speed. Saisissez l’url de la page à optimiser et l’outil vous donne une note /100 très pratique pour comparer avant/après l’optimisation. Page Speed vous donne aussi la liste des points à améliorer pour un affichage sur ordinateur, et pour un affichage sur mobile. Il classe même les recommandations en 2 catégories : « à corriger » puis « à corriger éventuellement ». Enfin, il vous fournit des liens vers l’Aide de Google si vous avez besoin d’être guidé.

Quelles optimisations pour réduire le temps de chargement ?

Plusieurs facteurs peuvent être optimisés pour optimiser le temps de chargement d’une page.

Optimiser les images

Il s’agit ici de trouver le juste équilibre entre des images très légère et leur qualité. Il est habituel d’optimiser les images à afficher sur le  web en 72 ddpi. Pensez également à réduire leur taille dans votre logiciel préféré. WordPress réduit effectivement lui-même l’affichage les images trop grandes mais elles restent lourdes à télécharger. Je vous conseille donc de réduire leur taille avant de les télécharger sur le serveur.

Exploiter la mise en cache du navigateur

Il s’agit ici de permettre aux navigateur de garder en mémoire certains éléments de votre site internet. Ainsi, lorsque l’internaute se connecte de nouveau sur votre site, son navigateur ira chercher ces éléments en local, sur l’ordinateur de l’internaute, au lieu de les faire venir de votre serveur ; ce qui, logiquement, prend beaucoup moins de temps.

Sur WordPress, il suffit d’installer un plugin de mise en cache. Je n’ai toujours pas trouvé la perle rare. J’avais testé WPSuperCache mais mon site ne se chargeait plus du tout sur mobile. Je vous invite donc à tester et si vous trouvez un plugin intéressant, n’hésitez pas à l’indiquer dans les commentaires de cet article. Je suis preneuse…

Permettre l’affichage d’éléments au dessus de la ligne de flottaison

Dans certains cas, le navigateur doit attendre le chargement de codes javascript et css pour commencer à afficher les éléments d’une page web situés au dessus de la ligne de flottaison.

Deux solutions s’offrent à vous concernant les codes javascript. Si le code n’est pas grand, il est conseillé de l’inclure dans votre code html. S’il est plus important, il faut le laisser en externe tout en permettant l’affichage des éléments avant qu’il soit chargé.

Pour les css, le principe est le même.

Compresser certaines ressources

Google Page Speed vous donne  la liste des éléments afficher dans votre page qui sont trop lourds et ralentissent le chargement. Il s’agit souvent de widget extérieurs que vous avez intégrés. Vous pouvez les compresser avec un système comme Gzip.

La taille des ressources html, javascript et css peuvent également être réduite. Google propose un outil d’optimisation html : une extension Chrome de Google Page Speed qui vous donne le code html optimisé de votre page.

Petit à petit…

Ces facteurs d’amélioration sont détaillées dans les pages d’Aide de Google. Attention lorsque vous effectuez une modification : le temps qu’elle soit prise en compte et affichée dans votre navigateur peut être plus ou moins long. Vous pouvez avoir l’impression que ça ne fonctionne pas, alors qu’il faut juste attendre un peu. Du coup, si je peux vous donner un conseil, c’est de mettre en application ces mesures les unes après les autres, jour après jour, et surtout pas toutes en même temps car si vous rencontrez un bug, vous ne saurez pas à quelle modification il est dû.

Allez… Retroussez-vous les manches et parez votre site de ses plus beaux atours pour plaire aux moteurs.