Cas pratique d’optimisation de WordPress

Guillaume

16 déc. 2011 — 5 min read

Je ne suis pas expert en réseau, ni en sécurité, ni vraiment en quoi que ce soit d’ailleurs, mais je m’évertue à utiliser des outils simples et efficaces afin d’obtenir un résultat confortable, lisible, et pas trop moche dans le code (grosso modo). Cela vaut pour mon blog par exemple, et les indications de GTMetrix me sont fort utiles pour tenter d’alléger au maximum le chargement de mon blog, de même que leur page d’aide à l’optimisation d’un WordPress.

Specify image dimensions

Celle là est très conne pourtant : dans l’appel d’une image, il suffit d’inscrire sa dimension, par un « widht=* height=* ». Il faudra certainement passer le code au peigne fin, ça peut prendre un peu de temps pour le thème, mais rien d’impossible heureusement.

Leverage browser caching

Voilà, c’est pourtant clair : que les images statiques aient une règle dans le .htaccess afin de n’être rafraîchie que dans longtemps, un an par exemple, allégeant le chargement pour les visiteurs réguliers (cela concerne par exemple les images du thème si vous êtes partisan des couleurs et ce genre de choses).

Optimize images

Ou utiliser WP-Smushit pour faire ça d’un coup. Rien bien de sorcier.

Add Expires headers

La même chose que pour le Leverage, hélas ce n’est pas possible pour les contenus n’étant pas sur son propre serveur (donc c’est la merde).

Make fewer HTTP requests

Pour le site de Korben (coucou monsieur, c’est juste pour l’exemple, la bise) :

This page has 28 external Javascript scripts. Try combining them into one. This page has 7 external stylesheets. Try combining them into one. This page has 24 external background images. Try combining them with CSS sprites.

On peut imputer à cette case désastreuse la sur-utilisation de modules externes tels que Sharethis, Google Analytics, Cloudflare, Google Ads, Disqus, un module lié à Microsoft Office dont j’ignore l’utilité, … Bref un beau bazar, qui a l’air redondant et chaotique, dans lequel il faut faire un tri afin de rendre votre blog léger, légeeeeeeer, sans devoir investir des cents et des milles dans un serveur surpuissant (même si ça fait certainement plaisir quoiqu’un peu moins au portefeuille). Pour les images du thèmes, celles-ci semblent toutes chargées indépendamment alors qu’il est actuellement de bon ton d’utiliser des CSS Sprites plutôt que des chargements consécutifs (on ne charge l’image qu’une fois). Cette fois donc, il vaudra mieux prendre un thème pas trop mal fichu, en full HTML(5) + CSS(3) (c’est à dire, pour moi, viser la gestion visuelle du site avec un nombre restreint d’éléments différents) ce serait encore mieux ! Entendez par là restreindre au maximum les images chargées (une seule pour tout, par exemple), éviter le flash comme la peste parce que c’est LOURD et relativement peu lisible, etc.

Reduce DNS lookups

Par rapport au point précédent, voilà la liste des noms de domaines atteints en se connectant à la page de garde :

korben.info
w.sharethis.com
www.google-analytics.com
ajax.cloudflare.com
wd-edge.sharethis.com
partner.googleadservices.com
mediacdn.disqus.com
disqus.com
korben.disqus.com
www.google.fr
adserver.adtech.de
ad-emea.doubleclick.net
s0.2mdn.net
ad.doubleclick.net
api.flattr.com
www.korben.info
pictures.korben.info
leweb.net
perso0.free.fr
www.youtube.com
s.ytimg.com
excel.officeapps.live.com
r.office.microsoft.com
s1-excel.vo.msecnd.net
seg.sharethis.com
edge.sharethis.com
i3.ytimg.com
i4.ytimg.com

Dans mon jargon, on dit « une chiée », pour d’autres c’est « beaucoup trop », quoiqu’il en soit ça fait une dose importante de renvois pour se connecter à une seule et unique page. C’est typiquement le genre de situation que je préfère éviter en réduisant au maximum le nombre de renvois au partir de mon site.

Avoid URL redirects

Là, c’est typiquement dû à des modules ou des liens mal configurés qui font des renvois d’URL. Donc, il est intéressant de se demander si ces plugins (une fois identifiés) sont « bons » ou n’alourdissent pas considérablement et inutilement la navigation sur le site. C’est souvent le cas lors d’appels à des services centralisés externes (et pour moi à l’encontre de ce Web où chacun fait sa popote chez lui, avec ses propres outils, et va voir la popote du voisin sans y ramener sa meute).

CSS & Javascript

Toujours pour exemple, korben utilise le plugin wp-minify et ça se voit :

/wp-content/plugins/wp-minify/min/?f=wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js
wp-includes/js/jquery/jquery.js
wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js
wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js
wp-content/plugins/audio-player/assets/audio-player.js
wp-content/plugins/cforms/js/cforms.js&m=1323769491

Hélas, tous les fichiers ne sont pas minifiés en un seul (concaténation), ce qui permettrait pourtant d’alléger le chargement. Il existe heureusement une extension qui le fait, et ce assez simplement.

Solution ?

Je dirais qu’il est important de faire un tri drastique dans les solutions externes utilisées, les modules installés, pour se concentrer sur un fonctionnement quasi autarcique (donc exit au maximum Gravatar, les régies publicitaires, les gestionnaires centralisés de commentaires ou les CDN qui sont un peu trop gourmands et aspirent tout le trafic), où tout ou du moins le maximum du contenu restent bel et bien sur son serveur, et pas sur celui d’un prestataire qui en ferait ce qu’il veut.

Avantage ?

Ce que je vise, c’est une réduction conséquente de la charge du site, ce qui pourrait permettre de ne pas avoir à faire appel à des gars comme ceux de CloudFlare qui absorbent le trafic mais aussi les identifiants des lecteurs qui pourraient se connecter, etc. Ce qui n’est résolument pas une bonne chose, dans ma vision très anarcho-égoïste-nazi de la présence sur les Internets.

Outils ?

On passera par quelques plugins et de petits aménagements côté serveur, sans se faire beaucoup de mal. Disons que ça pourrait prendre une heure au maximum pour être fignolé aux petits oignons.

Premièrement, je crois qu’il est de première importance de virer, purement et simplement, la majeure partie des outils externes. C’est une plaie, ça ne s’intègre pas facilement, ça rajoute des chargements de CSS et JS, … En gros, ça ralentit, donc c’est mal, vous voyez la logique ? Personnellement, j’utilise ces extensions-ci, encore que je cherche à pouvoir me passer d’Akismet sans devoir valider ou supprimer le SPAM à la main.

Ensuite, quand on a bien fait le ménage (au Kärcher, si vous voulez, oui), il convient d’installer cette formidable extension qu’est W3 Total Cache, W3TC pour les intimes – rendant WP Minify et alternatives du genre obsolètes.

Pour l’utilisation de cette extension, cette page est relativement complète, quoique simplement introductive. Nicolargo offre une méthode parmi d’autres afin de tirer le meilleur parti de sa configuration, elle est toujours bonne à lire – comme le reste de ses tutoriels liés à l’hébergement d’ailleurs.

Notons toute fois qu’il vaut mieux effecteur une minification manuelle afin de pouvoir ajouter les JS et CSS à prendre en compte (et se faire des petites frayeurs avec tout ce que l’on peut bien charger automatiquement).

D’ailleurs, même si je préfère l’utilisation d’un CDN « maison » (static.nomdedomaine.extension), cette extension gère à merveille le CloudFront d’Amazon, Amazon S3, MaxCDN, Rackspace, … ainsi qu’un compte CloudFlare qui sera mis à jour automatiquement, si vraiment vous ne pouvez pas vous en passer.

La partie CDN peut être gérée très finement, également, en hébergeant les fichiers statiques de /wp-includes/ sur un espace externe, de même que les thèmes, les CSS et JS minifiés, poussés par une mise à jour automatique dudit CDN.

Cela donnerait, en arborescence :

static
wp-content
- uploads
- themes
- plugins
- w3tc
wp-includes
…
blog
wp-admin
wp-includes (le reste, si je ne me trompe pas)
wp-content
…

Je ne crois pas qu’il s’agisse d’un luxe, et c’est simplement pour le confort des lecteurs. Mes respects à Manuel Dorne.