Catégories Comptes-rendus

Optimiser son site WordPress, oui mais comment ? – Compte-rendu du meetup du 11/01/2018


Photo du meetup WordPress Bordeaux meetup du 11/01/2018

Hier soir, la communauté WordPress Bordeaux s’est réunie dans l’espace de coworking La Loco, à Pessac, pour un meetup dédié à l’optimisation de nos sites web.

La séance a débuté par un tour de table concernant les solutions de cache et de compression d’images utilisées par les un·e·s et les autres. La question des dimensions « idéales » des images a été posée, et de leur adaptation au thème Divi en particulier. Difficile d’y apporter une réponse définitive, mais l’article  The Ultimate Guide to Using Images within Divi, publié sur le blog d’Elegant Themes a été cité en tant que bonne référence pour s’attaquer à ce sujet.

Jonathan Buttigieg, co-fondateur de WP Media (société créatrice des solutions WP Rocket et Imagify), nous a ensuite rejoint pour nous parler du sujet du jour, sous la forme d’un « live testing » de sites.

Quels outils & quelles métriques pour tester la performance d’un site ?

Pour commencer, il nous a parlé de plusieurs solutions pour tester la performances de nos sites web :

  • GtMetrics (outil non-recommandé par Jonathan, qu’il estime moins fiable que Pingdom) ;
  • Page Speed Insights (outil  de Google, non-recommandé par Jonathan, car il  l’estime peu fiable) ;
  • Dareboost ;
  • Pingdom Tools (l’outil utilisé par Jonathan pour sa démo).

Quel que soit l’outil utilisé pour mesurer la performance de votre site, focalisez vous sur le temps de chargement, et pas sur le « performance grade » qui ne garantit pas la rapidité de votre site. Autre « détail » d’importance, la localisation du serveur utilisé pour vos tests – un site hébergé en France mais testé sur un serveur à San Francisco  affichera toujours un temps de chargement plus long que le même site testé à Stockholm.

Jonathan a ensuite détaillé les différentes métriques à étudier et analyser pour détecter ce qui cause les lenteurs d’un site : poids des images et des fichiers, nombre de requêtes, redirections, intégration de modules externes (Youtube, Instagram, Facebook ou Photon sont très gourmands…). Dans tous les cas, il conseille de réfléchir aux contenus qui posent problème, et de réfléchir à leur réelle utilité sur le site : avez-vous besoin d’une « likebox » Facebook ? D’un flux d’images Instagram ? D’un CDN ?

L’optimisation des images

Pour optimiser les images de vos sites WordPress, il existe différents outils en ligne et des extensions WordPress, certains gratuits, d’autres payants :

  • Photoshop : toujours efficace pour optimiser les images avant de les téléverser sur votre site (NDLR : d’autant plus si vous maîtrisez ses fonctionnalités d’automatisation) , mais ne prendra pas en compte les miniatures créées lors de l’ajout de ces images dans la bibliothèque de médias. Vous risquez donc de vous retrouver avec un grand nombre d’images non-optimisées ;
  • WP Smush : dispose d’une version gratuite dispensable (car ne compressant que très peu les images), sa version payante est a préférer ;
  • ShortPixel (modèle freemium) ;
  • TinyPNG (modèle freemium) ;
  • Imagify (modèle freemium, démo rapide par Jonathan. Notez qu’Imagify propose un outil permettant de simuler l’optimisation des images d’un site grâce à son url).

Les solutions de cache

Il existe différentes formes d’outils pour optimiser cette partie de votre site : des solutions spécialisées dans certaines tâches (par exemple la gestion de cache) et les outils tout-en-un (Jonathan conseille plutôt ce type d’outils).

Les outils de cache :

  • WP Cache ;
  • Cache Enabler.

Les outils tout-en-un :

  • W3 Total Cache (c’est une extension gratuite, mais attention, le développeur n’assure plus son maintien, ni son support) ;
  • Comet Cache (modèle freemium)
  • WP Rocket (extension payante).

Quel que soit l’outil que vous choisissez d’utiliser, Jonathan indique que :

  • En installant et activant une extension de gestion de cache, même en laissant sa configuration par défaut, votre site sera automatiquement plus rapide ;
  • Si vous hésitez entre modèle gratuit et modèle payant, sachez que l’avantage d’une extension payante, c’est son support.

En résumé

  • Intéressez-vous au temps de chargement d’un site plutôt qu’à son « performance grade » ;
  • Choisissez le bon serveur pour tester vos pages web ;
  • En moyenne, une page d’accueil d’un poids de 1Mo pour 100 requêtes s’affiche en 1.2 à 1.5 secondes. Vous pouvez utiliser cette donnée pour faire vos corrélations et comparatifs ensuite ;
  • Les redirections HTTP ajoutent au temps de chargement d’une page ;
  • Le poids de la page, des fichiers, des extensions et le nombre de requêtes jouent sur le temps de chargement ;
  • Évitez au maximum les requêtes externes (Facebook, Youtube, Instagram…) qui pèsent beaucoup sur le temps de chargement ;
  • Dans tous les cas, intéressez-vous à la raison du temps de chargement de votre site : l’analyser vous permettra de déceler les sources de ralentissements de votre site, et si possible de les résoudre.

Quelques liens, pour finir :

Merci à tou·te·s les participant·e·s de ce meetup 🙂 On se retrouve le 8 février prochain au Node pour un nouveau meetup WordPress Bordeaux, durant lequel nous apprendrons ensemble à passer nos sites au HTTPS (pensez à amener vos ordinateurs !).