Optimiser son site WordPress

par vtabary · 9 mars 2012

Bon, allez, changeons un peu de sujet pour passer du côté obscur de la ~~force~~ technique.

Cela fait plusieurs articles que je ne parle que de création d’entreprise et d’administratif, je vais changer de thème en débordant sur quelques éléments bassement informatiques, et plus spécifiquement, sur l’optimisation d’un site web basé sur WordPress.

Mais finalement que cache ce terme d’optimisation ? Ici nous parlerons de vitesse d’affichage uniquement, bien que le terme puisse intégrer bien d’autres choses.

Il s’agit en fait d’utiliser ce qu’on appelle un cache, ou bien une compression des images, du code HTML, CSS, ou JavaScript, …

Compréhension

Pour ceux qui ne sont pas familiers avec ces termes, voici quelques définitions :

Cache : le principe consiste à diminuer le nombre de calculs effectués par le serveur. En effet moins il doit faire de calcul, plus vite le serveur transmettra la page demandée par le visiteur. Pour cela, la méthode la plus commune consiste à calculer le fichier final une fois pour le sauvegarder, et transmettre cette sauvegarde à tous les visiteurs plutôt que le calculer à chaque fois.
Compression d’image : Une même image, avec les mêmes dimensions, peut prendre une place différente selon les besoins. C’est un des procédés magiques de l’informatique. Le but de la compression d’une image consiste à détériorer l’image de façon à ce qu’elle reste tout de même agréable à regarder à l’œil humain.

Exemple de compression d'image, à gauche légèrement compressé, à droite fortement compressé

Compression de code : Une compression de code HTML, CSS, ou JavaScript consiste à faire la même chose que pour une image, mais plutôt que de perdre des données essentielles, nous allons retirer les données inutiles uniquement comme les commentaires, généralement à destination des développeurs, les retours à la ligne, …

Avantages

Ainsi l’optimisation d’un site peut être utile dans de nombreux cas. Tout d’abord, puisqu’il y a moins de calcul, un serveur sera moins surchargé, et pourra répondre à plus de demande en même temps. Ensuite, si la page est affichée plus rapidement, cela apporte un confort non négligeable au visiteur. Il préférera toujours attendre 1 ou 2 secondes de moins.

Indirectement, et c’est aussi une bonne motivation en règle générale, elle améliore aussi le référencement sur les moteurs de recherche. C’est en effet un critère important du classement en plus des critères de SEO (Définition Wikipedia). Pour un même contenu, Google, par exemple, préférera la page plus rapide à afficher.

Inconvénients

Avoir un système de cache est très simple à mettre en place pour des sites au contenu entièrement public. Mais dès qu’il s’agit de personnaliser une page en fonction d’un ou plusieurs critères, ce système devient vite une plaie. Pourquoi ? Pour rappel, le cache consiste à générer une seule fois une page pour tous les visiteurs. Il prendra donc les premiers critères rencontrés, et ne recalculera pas la page dans les autres cas. Bien sûr il y a toujours des solutions de configuration, mais ce sera évidemment un peu plus compliqué.

En ce qui concerne les compressions, chaque type à son inconvénient. Les personnes ayant un pied dans le domaine de l’image, par exemple, peuvent être assez tatillon. Pour les photographes ou graphistes, la compression risque donc de les choquer là où un utilisateur lambda n’y verra que du feu.

Pour la compression des données, cela dépend de la qualité du code fourni. En effet, le fait de supprimer des retours à la ligne par exemple peut provoquer des erreurs JavaScript et empêcher son exécution. Pire Internet Explorer sera tellement affolé qu’il risque de nuire à l’expérience utilisateur en affichant à tout-va des boîtes de dialogues.

Application

Chaque développeur ayant été confronté à cette question, la communauté propose maintenant de nombreux outils permettant de le faire de manière automatique et très simplement. Plusieurs outils sont donc disponibles pour WordPress. Personnellement, voici ceux que j’utilise ou que j’ai déjà testé :

W3 Total Cache : propose de gérer un système de cache dans WordPress, avec des possibilités de configuration assez complètes.
WP Smush.it : permet de compresser et optimiser les images JPEG affichées sur le site. Aucune configuration n’est à faire.

Vous pourrez trouver un exemple de configuration classique sur GTmetrix si vous être anglophone. Cela correspond à peu près à ma configuration. Voici une adaptation française rapide :

Etape 1 : Télécharger et activer W3 Total Cache

Cliquer dans le menu à gauche sur « Extensions », puis à droite du titre sur « Ajouter ».

Ajouter une extension

Dans le champ de recherche, saisissez « W3 Total Cache ».

Rechercher une extension

Cliquez sur « Installer maintenant » sur l’extension correspondante (certainement la première). Suivez les étapes demandées en fonction de votre configuration. Par défaut il vous demandera de mettre des fichiers en ligne via votre logiciel FTP. Il faudra dézipper le fichier qu’il vous donnera avant.

Etape 2 : Configuration

Une fois téléchargée, il faudra configurer l’extension. 3 pages en tout sont à parcourir.

Tout d’abord, cliquez sur le sous-menu « General Settings » dans la rubrique « Performance » du menu à gauche.

Si elle est cochée, il vous faudra décocher la case « Toggle all caching types on or off at once« . Par défaut cochée, celle-ci active tous les systèmes de cache proposés par le plugin. Mais certains types ne vous intéresseront pas forcément (CDN, CloudFare, …).

Ecran "General Settings"

Ensuite, sous la rubrique « Minify« , toujours sur la même page, activer la compression des fichiers CSS et JS en cochant les cases « Enable » et « Auto » .

Autoriser le compression des fichiers CSS et JS

Vous pouvez sauvegarder vos modifications en cliquant sur « Save all settings« .

Le deuxième écran à visiter se nomme « Minify« . Ici il faut cocher au moins la case « Enable » de la rubrique « HTML & XML »

Configuration de la compression des fichiers HTML

Vous pouvez aussi cocher les cases « Inline CSS minification« , « Inline JS minification« , et « Line break removal » qui consiste respectivement à compresser les zones CSS, JS du fichier HTML et à retirer les sauts de ligne. Mais il est possible qu’ils provoquent une grosse erreur sur votre site. Les utilisateurs ne pourront plus consulter votre site, alors que vous, tant que vous êtes connectés en administrateur, vous ne vous en apercevrez pas.

En règle générale, pour tester, je vous conseille d’ouvrir une nouvelle instance de votre navigateur en mode privé. Dans cette instance, votre site vous considérera comme un inconnu.

Pour mémoriser le tout, cliquez encore une fois sur le bouton « Save all settings« .

Enfin, le dernier écran nous permettra d’indiquer nos préférences au navigateur des visiteurs. Ainsi, s’ils changent de page, ou s’ils reviennent plus tard, les fichiers déjà affichés n’auront pas besoin de l’être à nouveau. Votre serveur sera d’autant plus content qu’il n’aura pratiquement rien à faire s’il revient sur la même page.

Pour cela, dirigez vous vers la page « Browser Cache« , et cochez les cases « Set expires header« , « Set cache control header« , et « Set entity tag (eTag)« . Cliquez sur « Save all settings« , et c’est terminé.

Configuration des options de navigateur

Vous aurez certainement un message qui apparaîtra vous indiquant que la configuration d’un plugin a été modifiée. Il faudra cliquer sur « Empty the cache » pour que notre extension puisse prendre en compte ces modifications.

Maintenant vous avez un système de cache installé sur votre WordPress… Félicitations !

Bon à savoir, ces extensions fonctionnent aussi avec WordPress en mode Réseau (MU). Attention cependant, certaines configurations peuvent rendre indisponible le site pour un visiteur classique.

D’autres outils ne sont pas liés à WordPress mais restent très utiles. Parmi eux, je peux notamment citer :

JPEGMini : propose une compression d’image impressionnante sans que cela se voit à l’oeil nu ! Malheureusement, en attendant la présence d’une API, tout doit être fait manuellement.
CDN : content delivery network. Je n’en ai pas encore parlé mais c’est aussi une méthode d’optimisation. Utiliser un CDN consiste à déplacer toutes les ressources du type image, PDF, CSS, … qui n’est pas calculé sur un serveur disposant d’un temps de réponse réduit. Généralement, il propose de dupliquer vos fichiers sur des serveurs éparpillés dans le monde afin de toujours avoir un temps de réponse minimal quelque soit la position géographique du visiteur. Amazon est un fournisseur de CDN, par exemple.

Outils

Pour tester les gains de performances ou obtenir des conseils d’optimisation, il y a de nombreux outils sur internet. Ils permettent de comparer le temps d’affichage par rapport à d’autres sites, ou prodiguent des conseils liés directement à votre site.

YSlow : outil proposé par Yahoo, il permet d’analyser votre page et de vous donner des conseils d’optimisation. Le public ciblé reste néanmoins des techniciens dans les détails, mais c’est intéressant pour tout le monde de voir la note attribuée 😉
Google Page Speed : similaire au précédent, cet outil est proposé par Google.
GTMetrix : propose une analyse issue directement des deux précédents outils et propose aussi d’afficher les résultats d’un palmarès de 1000 sites les plus fréquentés. C’est d’ailleurs Bing qui semble le plus performant sur sa page d’accueil.

Bonus

D’autres outils intègrent de gestion de cache des outils de base :

Prestashop : site de e-commerce gère son propre cache, avec personnalisation selon l’utilisateur connecté.
eZPublish : gestionnaire de contenu (CMS) avancé gère deux types de cache, dont un permettant la personnalisation, et un autre, statique, qui ne propose pas de personnalisation mais est beaucoup plus rapide.

Mais je vous parlerai de ces 2 énergumènes un autre jour.

Pour conclure, je terminerais en vous invitant à me préciser que vous voulez optimiser votre site si vous désirez passer par moi pour le réaliser 😉

Comme d’habitude, n’hésitez pas à partager aussi vos trucs et astuces 😉