Augmenter la vitesse de son site WordPress

Récemment, je me suis attaqué à l’optimisation de mon site. J’en avais marre qu’il soit lent du coup, j’ai réalisé pas mal de modifications dessus. Il était temps. Vous, vous ne pouvez pas le voir si c’est votre première visite mais laissez-moi vous dire que c’est beaucoup plus rapide maintenant.

De la vitesse de course d’un poney (Trop mignon), je suis passé à celle d’un cheval (Oui oui ! au moins ça, je vous assure)

Le résultat de mes modifications est sans appel. Alors que j’étais à 60/100 sur Google Page Speed, je suis aujourd’hui à 90/100. Je pense que je pourrais aller un peu plus loin dans l’optimisation mais c’est à mon sens suffisant actuellement. Je suis déjà au dessus de la plupart des sites de mon secteur donc bon…

Comme je ne suis pas un radin enfin si mais peu importe, je vais vous donner une liste de tâches à accomplir pour optimiser votre blog afin d’augmenter votre vitesse et diminuer radicalement votre taux de rebond.

Tout d’abord, je vais vous donner une liste d’extensions que j’utilise et ensuite d’autres astuces un peu plus compliquées où vous allez devoir mettre les mains dans le code.

Une liste d’extensions gratuites

Rendez-vous dans (Extensions-Ajouter) et tapez le nom des différents plugins disponibles ci-dessous pour les télécharger.

1) WP Super Cache

C’est la base. Rendez-vous dans la partie extension de votre blog et ajoutez l’extension WP Super Cache. Une fois que c’est fait, activez l’extension et hop ! c’est tout, ne touchez plus à rien. A noter que vous pouvez faire quelques réglages dessus pour que ce soit plus efficace mais selon moi, ce n’est pas nécessaire.

2) Leverage Browser Caching Ninja

Il s’agit d’écrire certaines instructions dans votre .htaccess afin d’expliquer au navigateur comment traiter le cache de certains fichiers.

3) Remove query strings from static resources

il ne faut pas mettre en cache les fichiers dynamiques qui, par définition, sont susceptibles d’être modifiés à chaque instant. Heureusement, vous avez un plugin qui permet de le faire. C’est MAGIQUE ! (comme dirait Merlin)

4) Use Google Libraries

Ça vous permet d’utiliser les bibliothèques Javascript du gros GOOGLE

5) WP Smush.it

Appartenant à Yahoo, le service Smush.it permet d’optimiser vos images afin de les rendre moins lourdes.

6) a3 Lazy Load

Tous les gros sites utilisent maintenant le lazy load. Ça permet de charger sur vos pages que le contenu visible. Il n’y a que quand votre visiteur décide de descendre que les images apparaissent. Indispensable pour ceux qui utilisent beaucoup de contenus multimédias.

7) Jetpack de WordPress

Bon ! je vous avoue qu’il y a pas mal de choses inutiles dans cette extension néanmoins, je l’ai installé car il y a Photon dedans qui est pour le coup très utile. Cette option qui fait partie encore une fois de l’extension Jetpack vous permet d’héberger vos images sur un serveur WordPress.

Une fois que vous avez installé toutes ces extensions, vous avez probablement déjà bien augmenté la vitesse de votre site web mais comme on est des fous, on va aller un peu loin. C’est la fête !!!

Les mains dans le code

Ce qui suit n’est pas indispensable donc si vous ne vous en sentez pas capable, laissez tomber, ça vaut mieux pour votre santé mentale !

a) Minifier votre CSS et vos fichiers Javascript

Vous ne le savez peut-être pas mais il y a pas mal de choses complétement inutiles dans un fichier .css ou .js comme des annotations ou des chaînes de caractères qui pourraient être supprimées.

Pour réduire la taille de vos fichiers, vous pouvez utiliser des sites en ligne qui vous permettent de le faire. Vous avez juste à faire un copié-collé de vos codes .js, .css et appuyer sur le bouton minifier. Une fois que c’est fait, vous remplacez votre .css par le résultat que vous avez obtenu.

Faites une sauvegarde de votre fichier css avant d’utiliser les sites disponibles ci-dessous. (On ne sait jamais ce qui peut arriver!)

Minifier CSS avec cssminifier.com

Minifier Javascript avec jscompress.com

b) Mettre les fichiers Javascript dans le footer

Prenez l’ensemble de vos ressources .js et au lieu qu’ils soient dans le header, mettez-les dans le footer!

c) M’envoyer 1000000 euros sur un compte au Luxembourg

Juste comme ça ! car j’ai envie et puis merde quoi ! je le mérite…

C’est terminé !

Vous savez tout. J’espère que grâce à ces astuces, vous augmenterez significativement la vitesse de votre site. Si ce n’est pas le cas, vous pouvez toujours renverser du café ou une canette de Redbull sur votre PC pour voir ce que ça fait. Je rigole hein! :)