Dans ce chapitre, nous allons voir comment mesurer le temps de chargement de votre site et surtout, comment l'optimiser.
Vérifiez le temps de chargement de votre site
Regardez la vidéo de démonstration pour suivre les étapes clés.
Un site qui met longtemps à se charger génère de la frustration et un inconfort certain pour les visiteurs. À tel point que, selon Amazon, 100 ms de temps de chargement en plus va lui faire perdre 1 % de chiffre d’affaires ! Le temps de chargement est par ailleurs un des critères SEO pris en compte par les moteurs de recherche.
Il est donc important de mesurer les temps de chargement de ses pages, et de les optimiser.
De nombreux outils permettent de mesurer le temps de chargement d’une page. Les plus connus sont GT Metrix, Google Lighthouse et Pingdom. Nous allons ici utiliser Google Lighthouse car il fonctionne à la fois pour les sites en ligne mais aussi en local, là où se trouve pour le moment notre site. Il s’agit d’une extension de navigateur et elle est disponible pour la plupart d’entre eux (Chrome, Mozilla…).
Pour tester son temps de chargement avec Lighthouse :
Selon votre navigateur, rendez-vous sur la page d’installation de l’extension (si vous êtes sur Chrome, par exemple, rendez-vous sur sa boutique en ligne). Installez-la.
À partir de la page d’accueil de votre site, ouvrez les “Outils de développement” de votre navigateur et cliquez sur l’onglet “Lighthouse”.
Cochez les 4 premières catégories (“Performance/Performances”, “Accessibility/Accessibilité”, “Best practices/Bonnes pratiques” et “SEO”) et le mode “Desktop/Ordinateur”. Puis cliquez sur “Analyze page load/Analyser le chargement de page”.
Après quelques minutes, vous disposez des résultats d’analyse de performances.
Les indicateurs les plus importants sont les “Metrics” :
Largest Contentful Paint : correspond au délai pour afficher le contenu le plus grand de la page. Idéalement, il doit être inférieur à 2,5 secondes selon Google.
Total Blocking Time : c’est le temps que les scripts mettent à se charger et durant lequel les interactions sont bloquées ; il doit idéalement être inférieur à 300 ms, ce qui est déjà beaucoup.
Cumulative Layout Shift : mesure les décalages de rendu de la page (section qui s’agrandit suite au chargement d’une image, par exemple) et qui peuvent nuire à la lecture. Il doit idéalement être inférieur à 0,1.
Speed Index : mesure la progression de l’affichage en se mettant à la place de l’utilisateur. Il doit être le plus bas possible (inférieur à 4 secondes, par exemple).
Les recommandations données en dessous du résultat sont en revanche intéressantes pour identifier ce qui ralentit votre site.
Optimisez le temps de chargement de votre site
Maintenant que l’on a vu comment mesurer le temps de chargement, nous allons voir comment l’optimiser.
Mettez en place une solution de cache et d’optimisation de chargement des ressources statiques
Une façon simple et rapide d’optimiser le temps de chargement de ses pages consiste à installer un plugin de cache. Cela permet de stocker temporairement les pages pour ne pas les régénérer entièrement à chaque fois qu’elles sont visitées, et ainsi de les délivrer plus vite aux visiteurs.
Il existe plusieurs types de caches :
L’OP cache (Installé dans WordPress par défaut) qui met en cache les fichiers : à ne vider que si vous modifiez les fichiers du site via FTP, par exemple.
Le cache applicatif qui se configure via une extension et met en cache les pages et/ou les requêtes pour les générer.
Le cache serveur qui se configure côté hébergeur et qui met en général en cache l’intégralité des pages (full page cache).
Le plus efficace est le cache serveur, mais il n’est pas proposé par tous les hébergeurs. Dans ce cas, vous pouvez utiliser une extension pour mettre en place un cache applicatif.
En revanche, cela veut aussi dire que les modifications que vous apportez au site ne seront pas visibles immédiatement à moins de “vider le cache”. N’oubliez donc pas de le désactiver ou de le vider régulièrement quand vous travaillez sur le site, au risque de vous arracher les cheveux pour rien.
Pour vider le cache, les extensions ou hébergeurs ajoutent généralement un lien “Clear cache”, “Purge cache” ou “Vider le cache” dans la top bar d’administration WordPress.
Il est également conseiller d’optimiser le chargement des ressources statiques (fichiers JS et CSS) en minifiant les fichiers (nettoyage et suppression des lignes inutiles), en les concaténant éventuellement et en les préchargeant ou en en reportant l’exécution.
Si vous souhaitez un plugin qui met en place un cache et optimise également le chargement des ressources statiques, je vous propose WP Rocket. Il est très performant et simple, mais malheureusement payant et donc pas pour tous les projets.
Nettoyez votre base de données
Une autre raison de la lenteur des chargements est une base de données surchargée. De nombreux plugins stockent en effet des données temporaires sans pour autant les supprimer régulièrement, les historiques d’articles peuvent s’accumuler en base de données, etc.
Les extensions WP Rocket et Autoptimize vues précédemment incluent des outils pour nettoyer et optimiser votre base de données.
Utilisez des images légères
Une des causes les plus fréquentes d’un temps de chargement trop long est l’utilisation d’images non optimisées pour le web.
En effet, une image en haute résolution peut rapidement peser plusieurs mégas et ainsi mettre plusieurs secondes à se charger ! Une image doit en général ne pas peser plus de quelques centaines de Ko.
La meilleure solution consiste à optimiser les images avant de les importer dans votre WordPress, avec Photoshop ou des outils gratuits comme tinyjpg pour compresser vos images.
Une autre solution consiste à utiliser un plugin comme ShortPixel ou Imagify (celui que nous avons installé). Le plugin va optimiser automatiquement les images déjà utilisées dans votre site et il fera de même pour toute nouvelle image téléversée. Ces plugins sont très souvent premium avec un certain crédit d’optimisation mensuel offert (nous avons 20 Mo avec Imagify).
Utilisez les bonnes tailles d’images
Même si vos images sont optimisées en termes de poids, il faut faire attention à utiliser une taille adaptée à la taille utilisée dans le contenu.
Il est ainsi assez courant de voir des images affichées en 300 pixels de large à l’écran, mais dont le fichier fait 1 200 px de large ! C’est la raison pour laquelle WordPress génère automatiquement différentes tailles de miniatures, que vous pouvez sélectionner facilement dans Elementor ou dans l’éditeur WordPress en fonction de la taille d’affichage souhaitée. Il faut juste ne pas oublier de le faire.
Utilisez les bons formats d’images
Utilisez le format JPEG pour les photographies et les images complexes où une légère perte de qualité est acceptable.
Choisissez le format PNG pour les images avec des éléments graphiques simples, des logos, ou lorsque la transparence est nécessaire. Tout cela sans perte de qualité !
Évitez le format GIF, limité à 256 couleurs, sauf pour les images animées.
Le format WebP : c’est le format le plus récent développé par Google. Il offre une compression supérieure et peut traiter des images avec ou sans perte. La qualité est équivalente aux images PNG et JPEG mais avec des tailles de fichier nettement réduites. WebP est de plus en plus pris en charge par les navigateurs modernes. Je vous conseille de l’utiliser le plus souvent possible.
En résumé
Il est important de mesurer et d'optimiser les temps de chargement des pages avec des outils comme Google Lighthouse.
Si votre hébergeur ne propose pas de cache serveur, utilisez une extension de cache comme WP Rocket ou WP Super Cache pour optimiser vos temps de chargement.
Si cela n’est pas déjà géré par votre extension de cache, utilisez une extension comme Autoptimize pour optimiser le chargement des ressources statiques.
Optimisez le poids de vos images avec une extension comme ShortPixel ou Imagify, mais n’oubliez pas aussi d’optimiser la taille de l’image appelée, en sélectionnant la taille de miniature la plus adaptée à la taille réelle d’affichage à l’écran, et vérifiez que leurs formats ont la meilleure compatibilité possible pour le web.
Nous avons maintenant un site rapide et optimisé pour le SEO. Il reste cependant de nombreux points à vérifier avant de mettre votre site en ligne ; c’est ce que nous allons voir dans le chapitre suivant.
