Optimiser la vitesse de chargement sur WordPress

Aujourd’hui, un petit tutoriel rapide à propos de la vitesse de chargement de votre site sur WordPress. J’ai eu quelques retours via Twitter à propos de mon site qui était lent. Je ne m’en rendais pas tellement compte car la majorité des pages étaient en cache.

J’ai cherché quelques solutions pour améliorer tout ça. Commençons donc par l’analyse de votre site web grâce à Google. Il va vous donner les points à améliorer .

Autoriser la compression

C’est assez récurrent car tout le monde ne pense pas à le faire. C’est pourtant très simple, pour réduire le temps de chargement, nous allons autoriser la compression sur l’hébergeur.

Il suffit de rajouter dans votre wp-config.php cette ligne.

[pastacode lang= »bash » manual= »ob_start(‘ob_gzhandler’)%3B » message= » » highlight= » » provider= »manual »/]

Pas très compliqué non ? Voilà donc une erreur en moins.

Exploiter la mise en cache du navigateur

Pour améliorer le chargement, on peut exploiter la mise en cache du navigateur. En effet, certains élément ne changent pas comme le logo, les feuilles de style etc.

[pastacode lang= »bash » manual= »%23%20MOD_DEFLATE%20COMPRESSION%0ASetOutputFilter%20DEFLATE%0AAddOutputFilterByType%20DEFLATE%20text%2Fhtml%20text%2Fcss%20text%2Fplain%20text%2Fxml%20application%2Fx-javascript%20application%2Fx-httpd-php%0A%23Pour%20les%20navigateurs%20incompatibles%0ABrowserMatch%20%5EMozilla%2F4%20gzip-only-text%2Fhtml%0ABrowserMatch%20%5EMozilla%2F4%5C.0%5B678%5D%20no-gzip%0ABrowserMatch%20%5CbMSIE%20!no-gzip%20!gzip-only-text%2Fhtml%0ABrowserMatch%20%5CbMSI%5BE%5D%20!no-gzip%20!gzip-only-text%2Fhtml%0A%23ne%20pas%20mettre%20en%20cache%20si%20ces%20fichiers%20le%20sont%20d%C3%A9j%C3%A0%0ASetEnvIfNoCase%20Request_URI%20%5C.(%3F%3Agif%7Cjpe%3Fg%7Cpng)%24%20no-gzip%0A%23les%20proxies%20doivent%20donner%20le%20bon%20contenu%0AHeader%20append%20Vary%20User-Agent%20env%3D!dont-vary%0A%23%20BEGIN%20Expire%20headers%0A%0AExpiresActive%20On%0AExpiresDefault%20%22access%20plus%207200%20seconds%22%0AExpiresByType%20image%2Fjpg%20%22access%20plus%202592000%20seconds%22%0AExpiresByType%20image%2Fjpeg%20%22access%20plus%202592000%20seconds%22%0AExpiresByType%20image%2Fpng%20%22access%20plus%202592000%20seconds%22%0AExpiresByType%20image%2Fgif%20%22access%20plus%202592000%20seconds%22%0AAddType%20image%2Fx-icon%20.ico%0AExpiresByType%20image%2Fico%20%22access%20plus%202592000%20seconds%22%0AExpiresByType%20image%2Ficon%20%22access%20plus%202592000%20seconds%22%0AExpiresByType%20image%2Fx-icon%20%22access%20plus%202592000%20seconds%22%0AExpiresByType%20text%2Fcss%20%22access%20plus%202592000%20seconds%22%0AExpiresByType%20text%2Fjavascript%20%22access%20plus%202592000%20seconds%22%0AExpiresByType%20text%2Fhtml%20%22access%20plus%207200%20seconds%22%0AExpiresByType%20application%2Fxhtml%2Bxml%20%22access%20plus%207200%20seconds%22%0AExpiresByType%20application%2Fjavascript%20A259200%0AExpiresByType%20application%2Fx-javascript%20%22access%20plus%202592000%20seconds%22%0AExpiresByType%20application%2Fx-shockwave-flash%20%22access%20plus%202592000%20seconds%22%0A%23%20BEGIN%20Cache-Control%20Headers%0A%0A%3CFilesMatch%20%22%5C%5C.(ico%7Cjpe%3Fg%7Cpng%7Cgif%7Cswf%7Ccss%7Cgz)%24%22%3E%0AHeader%20set%20Cache-Control%20%22max-age%3D2592000%2C%20public%22%0A%0A%3CFilesMatch%20%22%5C%5C.(js)%24%22%3E%0AHeader%20set%20Cache-Control%20%22max-age%3D2592000%2C%20private%22%0A%0A%3CfilesMatch%20%22%5C%5C.(html%7Chtm)%24%22%3E%0AHeader%20set%20Cache-Control%20%22max-age%3D7200%2C%20public%22%0A%0A%23%20Disable%20caching%20for%20scripts%20and%20other%20dynamic%20files%0A%3CFilesMatch%20%22%5C.(pl%7Cphp%7Ccgi%7Cspl%7Cscgi%7Cfcgi)%24%22%3E%0AHeader%20unset%20Cache-Control%0A%0A%0A%23%20END%20Cache-Control%20Headers » message= » » highlight= » » provider= »manual »/]

Ajoutez ce bloc dans votre fichier .htaccess à la racine de votre site. Il sera certainement caché par défaut, activer les fichiers cachés donc dans les préférences de votre logiciel FTP. Ensuite, copier-coller à la suite et c’est bon ! Effectuez quelques tests avant de le mettre en place définitivement.

Veillez à remplacer les « &lt; » par un « < » et les « &gt; » par un « > » dans le code ci-dessus.

Minifier le code source

Lorsque vous ajoutez des fichiers HTML, CSS et Javascript, chaque espace est important. C’est pour cela que généralement, on voit des version minifiés du code.

Téléchargez ce plugin sur votre WordPress et le tour est joué !

Optimiser les images

Les images se sont certainement les fichiers qui pèsent le plus lourd sur un site web. Il faut donc pour cela les compresser au maximum sans perdre de qualité. J’avais pour habitude de le faire avant l’upload mais il était pas assez poussé.

J’utilise donc maintenant Smush.it. Un plugin qui utilise Yahoo pour compresser les images. Attention cependant, pour que cela s’applique sur votre anciennes images, il faudra passer dans les réglages.

Conclusion

Je n’ai certainement pas abordé tous les points pour optimiser votre site web mais ces 4 points va permettre à votre site web d’être 2 ou 3 fois plus rapide. Je suis passé de 10 secondes à environ 4 secondes.

On termine avec une dernière analyse GTmetrix, si vous avez une note entre A et C, c’est parfait.

Si vous avez des questions ou remarques, n’hésitez pas.