Optimisation WordPress, vitesse & performances
La vitesse de chargement d'une page web est critique en terme d'expérience utilisateur.
Regardons les choses en face : si une page met trop de temps à s'ouvrir, je ne vais pas rester. Le contenu, aussi intéressant soit-il, ne sera pas lu. Sous prétexte que le haut débit est maintenant répandu, les gens oublient de faire au plus léger. Les images non-spritées, le CSS redondant et les vingtaines de requêtes http par pages sont devenus légion. Et on semble se satisfaire de quelques secondes pour ouvrir une page.
Une seconde c'est déjà trop !
Bing et Google sont d'accord pour dire que les pages lentes perdent des utilisateurs. Personnellement je n'attends pas plus de 3 secondes à l'ouverture d'un site web. Je ferme l'onglet. C'est dans cette optique que je me suis mis en tête d'optimiser mon installation WordPress et gagner de précieuses secondes.
Les outils nécessaires pour benchmarker son blog.
Firefox
Je me fais pas de soucis pour vous. Vous devez tous l'avoir. J'espère.. On en a besoin pour Firebug. Au pire on le trouve sur cette page.
Firebug
L'extension reine pour les développeurs web. Vous devriez déjà l'avoir, sinon vous pouvez la récupérer sur cette page. On en a besoin pour YSlow.
YSlow
Un plugin Firebug fait par Yahoo. Il analyse la page web et donne une note suivant plusieurs critères. Dans le but d'avoir une page web rapide. Lien.
Webkit Web Inspector
Disponible à l'intérieur de Chrome, Safari & d'autres navigateurs webkit. Il donne des infos intéressantes, notamment avec son onglet des ressources. Pratique pour voir la taille des différents fichiers, et le temps mis pour les télécharger.
Page Speed
Encore un plugin pour Firebug. Il propose à peu près la même chose que YSlow. Lien.
Webmaster Tools
Un must-have. Google enregistre aussi la vitesse d'ouverture de notre site au cours du temps. Pratique. Lien.
Optimisation de la taille des fichiers CSS.
Le code !
La première étape est d'avoir un CSS optimisé au niveau du code. Je vois parfois des devs qui mettent tout le chemin du DOM dans leurs règles CSS. Il faut aller au plus simple :
#footer nav ul li a /*pas bien */ #footer a { ... } /* bieeeen */
Autrement dit, essayez de voir si vous ne pouvez pas réduire la taille du fichier simplement en écrivant moins de code.
Compression
On peut réduire énormément la taille des fichiers CSS en les minifiant. Les retours à la ligne inutiles, les commentaires et les espaces en trop seront supprimés. À faire uniquement quand on ne touche plus au fichier, car ça devient complètement illisible. Le problème c'est que pas mal de plugins WordPress viennent avec leurs propres CSS pas forcément compressés. Vous pouvez le faire vous même en les remplaçant. Mais à chaque mise à jour du plugin.. on recommence. À vous de voir !
Et à propos des fichiers Javascripts ?
Placement
Souvent les appels aux fichiers .js se trouvent dans la balise <head> de la page. Le problème avec ça, c'est que pour voir le contenu de la page, ces fichiers doivent d'abord être chargés. Autant que possible je place mes fichiers javascript juste avant la fin de la balise <body>. De cette manière le contenu de la page peut déjà s'afficher et les fichiers javascripts se charger en arrière-plan. J'essaye aussi de charger tout mes scripts de manière asynchrone.
Compression
Sur le même principe que les fichiers css, la compression marche aussi pour le javascript.
Faire attention aux images aussi.
Sprites
15 images = 15 requêtes http. 1 sprite = 1 requête http. Faire un sprite c'est juste mettre toutes vos images dans une seule. Pratique volée aux créateurs de jeux-vidéo ;)
La taille des images
Vous voulez afficher une image en 150x150, et bien enregistrez la en tant que telle. Google conseille aussi de rajouter dans la balise <img> la taille de l'image en dur, pour accélérer le rendu. Enfin jouez sur la compression de l'image pour gagner de précieux ko.
Et mon serveur alors ?
Il peut aussi nous aider dans notre tâche.
- En compressant en Gzip les données envoyées.
- En mettant des headers spéciaux aux fichiers, pour que les utilisateurs les gardent en cache.
Si vous êtes sous Apache il suffit de rajouter les lignes suivantes dans votre .htaccess (après les règles WordPress). Vous devez avoir certains modules activés (mod_expires, mod_headers, mod_gzip).
La même chose est possible sous Nginx & Lighttpd. Si ça vous interesse je peux en parler dans un autre article.
Et maintenant le coeur de WordPress.
Plugins à désactiver
Désactivez ce que vous n'utilisez pas. Ça doit être un réflexe. Car chaque plugin vient avec son lot de js/css/php qui se charge à chaque page ou presque.
Système de cache
C'est l'élément le plus important de notre installation. Celui qui va nous faire gagner pas mal de temps et pas mal de ressources serveur. Par défaut, pour chaque page, le blog fait des requêtes SQL pour chercher les infos à afficher. Le truc c'est que le contenu d'un billet change rarement après la soumission. Mettre ces infos en cache permet de sauter l'étape BDD et d'afficher la page comme si c'était une page web html.
J'utilise personnellement W3 Total Cache. Il propose plein de trucs sympathiques : il peut par exemple prendre en compte l'envoi des données en Gzip si vous avez la flemme de le faire à la main dans le .htaccess.
WP Minify
Je vous ai raconté dans la première partie comment réduire la taille des fichiers js et css. Et bien ce plugin le fait pour vous en fait. Et le truc génial c'est qu'il les combine en un seul fichier pour réduire le nombre de requêtes http. Il se trouve ici.
Pour finir...
On va dire que tout ça ce sont les grandes lignes. Il y a toujours moyen de faire mieux. Mais disons que c'est la petite todo-list que je vais essayer de mettre en place (j'ai déjà commencé). Il est possible que techniquement vous ne puissiez pas tout faire.. l'important est d'essayer de faire au mieux. Même si vous n'avez pas l'impression de gagner énormément à chaque étape.. le tout cumulé lui sera visible.
En lançant YSlow entre chaque optimisation, on peut vite se rendre compte de ce qu'il reste à faire.
Pour un meilleur web ;)
Articles similaires
- Wallpapers of the week J'ai réussi à vous trouver cette semaine de nouveaux fonds ...
- Wallpapers of the week On ne change pas les habitudes, nouvelle semaine, donc une ...
- Wallpapers of the week Nouvelle session wallpapers of the week. Avec cette semaine 3 ...
- Lithium - Un thème noir pour Gnome Lithium est un thème assez réussi je dois l'avouer. Un ...
- Wallpapers of the Week 1-62 by *inmymind81 So High. by =GoldenCadillac 26th - Breeze by *BSA-Danny The ...
