Optimisez la vitesse de chargement de votre blog !

Posted on

Après avoir publié quelques tweets, j’ai remarqué qu’il subsiste encore de nombreux webmasters, qui, comme moi, n’ont ou n’avaient pas encore pris le temps (ou la peine) d’optimiser leur blog WordPress.

Quand je dis optimiser, je parle bien sûr du temps de chargement des pages, facteur auquel de nombreux paramètres plus ou moins proches sont rattachés (dont au final, votre référencement). J’ai donc décider de rédiger un petit guide sous forme de règles. Un guide, et j’insiste là dessus, destiné tout d’abord au débutants, même si la plupart des règles que vous apprendrez ici peuvent être poussées bien plus loin.

Règle n°1 : Un bon hébergeur tu choisiras.

Eh oui, on commence par le plus bête mais il faut bien revoir les bases. L’idée est surtout de choisir une offre d’hébergement adaptée à son site web. Inutile de prendre un serveur dédié pour un blog perso sur lequel on publiera du texte et des vidéos hébergées sur Youtube. L’offre doit correspondre au besoin. De plus, miser sur le service après vente et la qualité du service. Je préfère un hébergeur qui assure un minimum de performances et qui maintiendra toujours mon site en ligne, qu’un hébergeur ultra-performant qu’il faudra contacter par lettre recommandée avec AR pour obtenir un renseignement suite à un soucis.

PlanetHosterOVHDevclic – EuroWH

(Afin d’éviter toute remarque puante sur Twitter, j’ai en effet placé ici 1&1 non pas pour ses performances d’hébergement mais pour sa facilité d’utilisation dirons nous.)

Règle n°2 : Tes images tu compresseras.

Beaucoup ignorent encore malheureusement que les images peuvent être l’un des facteurs les plus pénalisant quand au temps de chargement d’une page. Trop lourdes ? Elles ralentiront votre page. Trop nombreuses ? Le constat sera identique. Il faut trouver un juste un milieu entre qualité et dimension, et faire attention au format (Pour le web, préférer du PNG et du JPG par exemple). Je vous propose ici deux solutions d’optimisation.

La première : Charger vos images dans un module extérieur. J’ai un compte Flickr, j’y place toute mes photos de test, pourquoi je m’amuserai à réuploader ces mêmes photos sur mon hébergement ? On peut par exemple utiliser le plugin “Flickr-slideshow-wrapper” pour charger un petit diaporama d’un de ses albums Flickr, dans un article ou sur une page.

La seconde : Compresser vos images. A défaut de pouvoir vraiment réduire la taille ou le poids de vos images par vous même, laissez donc faire le service de Yahoo, avec le plugin WP-Smush.it. Ce plugin se chargera de faire passer vos images par le service Smush.it, avec une compression qui atteint en moyenne les 15%. Le plugin peut mettre du temps à s’exécuter si votre bibliothèque contient beaucoup d’images, mais sur une page contenant justement beaucoup d’images, le résultat saute aux yeux.

Règle n°3 : Tout ton contenu tu mettras en cache (ou presque),

et ton HTML/CSS/JS tu simplifieras.

On arrive à la partie intéressante, le coeur du tuto, le moment ou tu va aller chercher une serviette et une bouteille d’eau tellement tout ton corps suera de stress intense.

Donc afin d’éviter toute crise cardiaque, et ainsi de m’épargner toute plainte pour homicide involontaire, on va dont commencer par une sauvegarde du FTP et de la base de données. Pour ce faire, un logiciel, une extension, et une dose de patience.

Le logiciel dont on aura besoin, ce sera bien sûr Filezilla (ou tout autre Gestionnaire de connexions FTP fera l’affaire). Courez vous connectez à votre hébergement et sauvegarder l’intégralité de votre installation WordPress dans un dossier sur le disque dur de votre ordinateur. On aura normalement pas besoin de tout ces fichiers, mais “mieux vaut prévenir que guérir”. Pendant que les fichiers téléchargent, on passe à la base de données. A l’aide du plugin WP-DBManager. Certains me diront qu’on peut aussi passer par PHPmyAdmin, oui je sais, mais on reste au plus simple.

Le plugin qu’on va utiliser pour mettre en cache le contenu de son WordPress, même si il en existe une bonne dizaine, ce sera W3 Total Cache. Je l’ai choisi pour son côté complet mais qui reste pourtant “relativement” simple à manipuler. On installe, on active, et ensuite on configure. Le but de cet article n’est pas de vous guider étape par étape dans l’optimisation complète de votre WordPress (et si à a lecture de cet article vous avez à un quelconque moment eu l’impression que je vous tenais la main, c’est faux, vous êtes grands.), mais plutôt de vous apporter des pistes et de vous rediriger sur des sites de mes confrères, qui seront plus précis. Du coup, voilà un lien qui vous aidera à configurer W3 Total Cache : WordPress Optimization Guide.

Certains d’entre vous seront susceptibles, comme moi, de rencontrer des problèmes avec la minification du CSS. Si lorsque vous l’activez votre site n’a plus ou presque plus de CSS, ne paniquez pas. Revenez en arrière et désactivez la fonction, et au pire des cas on a pensé à faire une sauvegarde. Je n’ai pas d’explication ou de solution à ce problème, c’est juste que votre thème ne supporte pas la minification, tant pis.

Règle n°4 : Les voleurs de contenu, tu bloqueras

On parlait un peu plus des images de votre blog. Certains blogueurs et webmasters fainéants s’amusent parfois à chercher une image qui leur plait sur Google, puis à faire un simple “img src=” menant vers l’image de notre site. Et c’est un très vilain défaut, surtout que ça consomme la bande passante de notre site, pas du sien. Afin de contourner ce genre de petites âneries, il existe un plugin créé par le blogueur @Semageek, PictPocket, qui s’occupe de scanner le web à la recherche de voleurs de contenu, que vous pourrez ensuite bloquer soit avec une image soit avec un texte de votre choix.

Règle n°5 : De ton site, soin tu prendras (c’est français ça ?)

Cette liste de règle ne peut bien sûr pas être exhaustive, elle est néanmoins je pense la base importante sur laquelle n’importe quel blogueur utilisant WordPress devrait partir. Et donc en addition de ces différents éléments il faudra penser au reste. Car en effet la vitesse de chargement et de navigation sur votre blog WordPress ne réside pas que dans les performances de votre serveur et l’optimisation de vos scripts, mais il faudra aussi prendre en compte l’expérience utilisateur, et donc adapter son blog à sa cible, tout simplement.

Ce dernier paragraphe a pour but de vous inviter à réagir en donnant une astuce, vous aussi, pour optimiser son blog WordPress. Pour vous donner une piste, j’ai par exemple installé une version mobile de Geekandco.fr, accessible à la même adresse depuis n’importe quel smartphone, ceci afin de rendre mon site très facilement consultable et lisible sur un écran de téléphone, même avec une connexion bas débit. Et vous ?