Tutoriel - Optimiser WordPress pour les performances

Au sein de la famille des CMS, WordPress a plutôt mauvaise réputation. L’évolution de son code pour le faire passer de plate forme de blogging pur à l’état de véritable CMS a été (et est encore) laborieuse. Chaque version amène son lot de petites nouveautés, de fonctionnalités qui mises bout à bout sans une véritable refonte de son coeur, ont contribué à la dégradation de ses performances. Très récemment j’ai du me pencher pour les besoins d’un projet, sur les moyens à disposition afin d’augmenter les performances de WordPress. Et je peux vous dire que les solutions existent bel et bien. Je vous expose ici mon expérience.

Il est de notoriété publique qu’un site qui met du temps à s’afficher pose 2 problèmes majeurs :

*Les visiteurs fuient
*Les moteurs de recherche pénalisent le site

Les deux combinés contribuent à une dégradation notable du nombre de visites, une explosion du taux de rebond, et une mauvaise réputation.

Petit état des lieux

Un site c’est avant tout un ensemble de ressources qui sont servies aux visiteurs. Ca comprend des données bien sûr, des feuilles de style CSS pour rendre le tout visuellement agréable à lire, et du javascript très souvent qui permet d’apporter des fonctionnalités souvent discutables. Toutes ces ressources demandent de la bande passante et de la mémoire. La maîtrise de ces deux facteurs est la clé vers l’optimisation d »un site de manière général, et tout particulièrement avec WordPress.

Première étape : Faire du ménage

La question qu’il faut toujours se poser et garder à l’esprit est la suivante :

*est-ce que cette fonctionnalité sert le contenu (et par extension, les visiteurs) ?*

Ca peut paraître bête dit comme ça, mais on a trop souvent tendance à rajouter des fonctionnalités pas toujours utiles à WordPress par l’intermédiaire des extensions. Et c’est compréhensible, avec plus de 32 000 plugins dispos sur le dépôt officiel, c’est tentant. Alors on arrête les frais et on ne garde/installe que ce dont on a besoin. Une extension doit être pertinente et apporter une vraie plu-value à votre contenu. A titre d’exemple, sur j’ai en tout et pour tout 6 extensions installées :

Akismet
Contact Form 7
Crayon Syntax Highlighter
WP-SEO
Jetpack par WordPress.com
WP Rocket

Et honnêtement je n’ai pas besoin de plus. Ces 6 extensions répondent à l’ensemble de mes besoins. Pareil pour les bibliothèques javascript, souvent activées par défaut dans votre thème. Sachez que même si vous ne les utilisez pas, elles se chargent en même temps que votre page. A défaut de les supprimer, mettez les au moins en commentaire dans votre code afin de pouvoir y revenir si besoin.

Externaliser les ressources

Les CDN (content delivery network), ça vous parle ? Ce sont des serveurs tiers qui hébergent tout type de ressource comme du javascript, vos images ou vos vidéos. Pourquoi faire appel à un CDN ? Pour économiser votre bande passante, tout simplement. Exemple, un fichier javascript qui pèse 40ko et qui se charge sur chaque page et pour chaque visiteur, ça peut vite chiffrer quand on en a une bonne dizaine. Alors pourquoi ne pas libérer cette bande passante pour vos contenus et laisser d’autres faire le sale boulot à la place de votre site ?

Quelques exemples de CDN :

www.jsdelivr.com
developers.google.com
www.maxcdn.com

Il en existe des centaines, voire des milliers. Même les bibliothèques javascript les plus populaires possèdent leur propre CDN. Si vous utilisez un framewwork comme Bootstrap ou les icônes de fontawesome, vous y avez droit. Pourquoi se priver ?

Alléger vos pages de leurs gadgets widgets

Un petit encart pour le partage ici, les derniers articles par là, les archives par ci… Stop ! Les visiteurs s’en tapent. S’ils veulent trouver quelque chose, ils utiliseront la fonction recherche et la taxonomie présente sur votre site. Et s’ils veulent partager vos contenus, ils le feront sans l’aide de vos boutons. Au passage ça évite de nuire à la lecture de vos contenus.

Jouer à cache cache

WordPress permet d’utiliser la mise en cache de vos contenus. Concrètement, un contenu qui a déjà été visite est servi directement de manière statique aux autres visiteurs. On évite les requêtes en base de donnée, ce qui n’est pas un mal avec WordPress quand on sait qu’il n’utilise pas encore PDO MySql. Je crois pouvoir dire sans me tromper de beaucoup que c’est la fonctionnalité la plus intéressante à votre disposition. Le hic, c’est que pour en profiter, il faut un plugin. Et là, on a l’embarras du choix. En ce qui me concerne, j’en ai testé plusieurs, et mon choix s’est arrêté sur WP-Rocket. A ce jour, c’est à mon avis la solution la plus aboutie, légère et complète en plus d’être extrêmement simple à mettre en place. Parmi les options que cette extension propose : lazy loading, minification des css, html et javascripts, et bien d’autres fonctionnalités bien sympa. A 29,00€ le plugin, c’est du pain béni et une véritable cure de jouvence pour WordPress. Un vrai investissement quoi ! Sinon, parmi les gratuits, je recommanderais W3 Total Cache.

Minification

La minification c’est le fait de mettre tous ses fichiers de ressources css, js, html bout à bout et au kilomètre afin de se charger plus vite. Ce n’est pas un gadget mais un véritable outil. Ajouté à la mise en cache, ce sont des performances accrues pour votre site et une meilleure disponibilité de vos contenus. Wp-Rocket inclut cette fonctionnalité, mais si vous recherchez un plugin gratuit : Better WordPress Minify.

Compression des données

Encore une véritable optimisation. Probablement l’une des plus importantes avec la mise en cache. Il s’agit de servir à vos visiteurs des contenus compressés. Cette manipulation n’est pas triviale et s’effectue côté serveur, à condition d’avoir les bons modules apache activés et les bonnes directives dans votre fichier .htaccess. Je ne m’étalerai pas sur ce sujet, car d’autres sites bien plus spécialisés sauront le faire mieux que moi. Je vous donne tout de même un lien : www.alsacreations.com. Ceci est également proposé en standard par WP-Rocket (je vous l’ai dit c’est une petite bombe :p)

Maîtriser son image

Aujourd’hui WordPress propose un outil pour la gestion des médias qui a bien évolué avec le temps. Beaucoup de tâches sont désormais possibles au travers de l’interface offerte. Mais n’oubliez pas qu’une image destinée au web n’est par défaut pas destinée à être imprimée. Donc on reste dans les standards du web et on optimise le poids des images en ajustant leur taille et leur résolution avant de les importer de préférence. Une image trop grande et de trop grande résolution ne sert à rien sur le net. 72dpi pour la résolution et 1024px de large maximum me semblent être un bon début. Au passage, pensez à bien nommer vos images avant import, pour le SEO, ça compte !

Mais que fait la police ?

Avant on n’avait pas le choix pour les typos de son site : Arial, Times New Roman etc étaient les standards tristement incontournables. Aujourd’hui ce n’est plus le cas et on peut vraiment se lâcher. Du coup on fait un peu n’importe quoi en servant des polices pas du tout optimisées pour le net. Là aussi il y a des services qui vous proposent des typos et ce sans trop alourdir votre site. Vous n’avez plus besoin de choisir entre rapidité et esthétique. Mon préféré est www.fontsquirrel.com avec une pléthore de fonts disponibles et gratuites, des packs webfont prêt à l’emploi, et même un webfont generator. Sinon il y a www.google.com/fonts. Pas mon préféré, mais il fait le job. Alors on arrête d’importer des fonts qui pèsent un âne mort comme des bourrins 🙂

Conclusion

J’ai volontairement été succinct en vous donnant toutes les pistes exploitables pour optimiser votre WordPress, car je n’ai pas la prétention d’être expert dans ce domaine. Mais ces pistes doivent être à mon avis un point de départ vers l’optimisation. Et ne jamais perdre de vue que ce qui prime sur un site c’est son contenu. Et que ces optimisations doivent être à son service. Je vous donne encore quelques liens utiles avant de vous quitter ainsi que ceux dont je vous ai parlé dans cet article, histoire de pas vous laisser sur votre faim 🙂

Si vous avez des remarques ou des idées et astuces pour améliorer les performances de votre site WordPress, ou que vous pensez qu’il manque quelque chose dans la liste, venez en discuter via les commentaires 🙂