• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 05/07/2021

Optimisez les temps de chargement de votre site

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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

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 et Pingdom. Nous allons ici utiliser GT Metrix. Pour tester son temps de chargement avec GT Metrix :

  • rendez-vous sur https://gtmetrix.com et créez-vous un compte gratuit pour avoir un historique et bénéficier de plus d’options ;

  • cliquez sur “Analysis option” et choisissez la ville la plus proche de votre zone géographique cible (ici, London) ;

  • saisissez l’URL de la page et cliquez sur “Analyze”.

Après une minute ou deux, vous disposez des résultats d’analyse de performances.

  • Les indicateurs les plus importants sont les “web vitals” : 

    • Largest Contentful Paint : correspond au délai pour afficher le contenu de la page. Idéalement, il doit être inférieur à 1,2 s.

    • 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 à 150 ms.

    • 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.

  • Les scores PageSpeed et Yslow n’ont en revanche pas vraiment d’importance et donnent une mesure subjective des performances de la page.

  • Les recommandations données en dessous du résultat sont en revanche intéressantes pour identifier ce qui ralentit votre site.

  • L’onglet Waterfall est aussi intéressant et permet d’identifier les ressources (internes, comme des images, ou externes, comme des scripts Google Analytics, Google Maps, etc.) qui ralentissent le temps de chargement de votre page.

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 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) ;

  • et 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. Si vous utilisez Themecloud, vous pouvez l’activer dans l’onglet “‘Outils” en choisissant “Cache FastCGI”. Il n’est pas nécessaire d’utiliser d’extensions de cache dans ce cas, mais une extension d’optimisation de chargement des ressources statiques reste utile.

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” ou “Purge cache” dans la top bar d’administration WordPress. Sur Themecloud, “Purge cache” apparaît ainsi si vous activez le cache FastCGI.

Il est également recommandé d’optimiser le chargement des ressources statiques (fichiers JS et CSS) en minifiant les fichiers, en les concaténant éventuellement et en les préchargeant ou en en reportant l’exécution.

Je recommande l’utilisation du plugin de cache WP Rocket, développé par WP Media, une société française spécialisée WordPress ! Il est très simple d’utilisation, extrêmement performant, et dispose d’une bonne équipe de support francophone. Il couvre à la fois le cache et les optimisations de chargement des ressources statiques. En revanche, ce plugin est payant, donc pas forcément adapté à tous les projets.

Une bonne alternative gratuite est le plugin WP Super Cache qui est très simple d’utilisation et offre de bonnes performances. Si vous vous sentez l’âme d’un expert, vous pouvez aussi jeter un œil à W3 Total Cache, gratuit aussi, mais offrant une multitude d’options pour optimiser finement les performances.

Cette extension ne couvre en revanche pas l’optimisation du chargement des ressources, vous pourrez donc l’associer à l’extension Autoptimize qui gère ces aspects.

Après la mise en place de WP Super Cache, vous devriez obtenir un excellent score et un temps de chargement d’environ 1 s dans GT Metrix !

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.

Optimisez les images

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 !

La meilleure solution consiste à optimiser les images avant de les importer dans votre WordPress, avec Photoshop ou des outils gratuits comme https://tinyjpg.com/ pour compresser vos images.

Une image doit en général ne pas peser plus de quelques centaines de Ko.

Si vous êtes pressé ou que vous récupérez un site comportant de nombreuses images non optimisées,  vous pouvez aussi utiliser des plugins d’optimisation des images.

L’équipe de WP Rocket propose le plugin Imagify, payant lui aussi. Une bonne alternative freemium est ShortPixel, qui vous permet d’optimiser gratuitement 100 images par mois sans limite de taille ou de poids ! Attention, cependant, les miniatures sont prises en compte comme des images, donc le crédit s’épuise rapidement…

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 px 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. ;-)

Il existe de nombreux autres axes d’optimisation des performances que nous n’avons pas le temps de voir ici, mais pas d’inquiétudes, Google regorge de ressources à ce sujet !

En résumé

  • 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, 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.

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.

Exemple de certificat de réussite
Exemple de certificat de réussite