Accélérer mon blog – 2

Bonjour

Depuis quelques temps déjà, je cherche à accélérer mon blog. En effet, il est long à s’afficher, du fait que je publie pas mal de photos, en grand format (histoire que si quelqu’un les veut il fasse clic droit enregistrer sous). Le truc c’est que ce sont souvent mes articles écrits qui sont visités, entre autre du fait que je référence mal mes photos (je vais me mettre à la balise alt …) Du coup, y’a un temps de chargement de la page long, mais long…

Tester la vitesse de son site

Alors je vous avais parlé de WebWait, mais il me paraissait étrange que le temps donné sur ce site soit bien inférieur à celui des autres sites du genre. En fait, il donne le temps d’affichage chez moi, via mon navigateur et ma connexion. Et évidemment, mon site, je l’ai en cache, et une connexion très haut débit. Pas très représentatif du visiteur qui vient ici via google pour la première fois…

Alors, j’ai cherché d’autres choses…

Vous avez les deux sites Site-Perf.com et Pingdom Tools qui donnent des résultats sympathiques, avec une « cascade ».

Vous voyez vite ce qui met du temps à charger, et d’où ça vient. Si c’est votre serveur qui met du temps à répondre, ou votre image qui est trop grosse… En un clin d’oeil, vous avez le temps de chargement, et sur siteperf.com, vous pouvez aussi choisir un point de test européen. En effet, souvent ces sites sont hébergés aux US, et si vos visiteurs ne viennent pas de là, ça fausse un peu les résultats.

J’ai découvert un truc tout bête là dessus, ce sont des images qui se chargeait mais dont le thème ne se servait pas. Je savais que mon thème de base était foiré, mais à ce point… Et bien sur, je n’avais pas relu tout la css pour me rendre compte de cela. J’ai supprimé les images et les appels, et vite gagné quelques précieuses centaines de ms…

Un autre site bien sympathique Web Site Optimisation, il vous donne les temps de chargement selon les connexions, et un résumé bien pratique en fin de page, qui vous permet de voir ce qui pèche sur votre site :

Il vous donne aussi des liens vers des sites (en anglais) qui vous aideront pour optimiser votre page.

Optimiser

à la lecture de ces résultats, et surtout d’un nombre bien trop important d’objets chez moi, j’ai viré les images de ma blogroll, qui souvent ralentissaient grandement le chargement, et finissaient par ne pas s’afficher…

Et enfin le dernier outil dont je me suis servie beaucoup beaucoup, c’est Page speed, un addon de firefox qui fonctionne avec firebug et qui permet de voir plein de trucs intéressants.

Par exemple le premier truc qui apparaissait « enable compression », renseignement pris, il s’agit d’une manœuvre côté serveur qui permet de zipper vos fichiers et donc de gagner du temps de chargement. J’ai tanné mon hébergeur jusqu’à ce qu’il me le fasse, et en effet, gain de temps considérable…

Ensuite, il vous donne le fichier de css optimisé, et donc un simple copié collé permet d’avoir cette css « plus propre ». D’ailleurs en parlant de css, certains plugins utilisent une css propre, et bien sur le chargement de 2 fichiers de css est plus long que celui d’un seul un peu plus gros. J’en avais 5 au départ, j’en ai plus que deux, et il faut que je trouve le moyen de virer le dernier supplémentaire qu’il me reste. J’ai d’ailleurs viré le plugin wp-codebox. Très emballée au début, en fait j’en ai peu d’usage, même s’il est très sympathique, et il se chargeait systématiquement (comme tout vos plugins d’ailleurs, vérifier si certains ne vous servent pas et les désactiver et la première chose à faire)

Autre point que j’ai découvert grâce à cet outil, les images dont les dimensions ne sont pas spécifiées ralentissent une page de façon drastique, même les plus petites. Hop, rajouter quelques height et width de ci de là, et satisfaite du résultat ! En fait, mon dernier problème vient de mes smilies. Je les trouve aussi indispensables parce que très représentatifs de la bête (moi), mais le plugin de gestion n’inclue pas leurs dimensions. Le seul moyen que j’ai trouvé pour l’instant pour qu’ils ne ralentissent pas trop le chargement a été d’en mettre un minimum en dessous de la case de com, les autres sont accessibles facilement. Il faudrait que je me mette vraiment dans le codage pour savoir quoi rajouter au plugin pour qu’il envoie les dimensions. (d’ailleurs, si vous savez, vous êtes grandement invités à me le faire savoir :D )

Évidemment, virer les « bad requests », un truc à faire tourner votre page pendant des heures ça…

Enfin, nettoyer le code, avec des erreurs parfois bêtes comme tout. Entre autre, j’avais le code donné par un annuaire qui était juste tout foiré. Bon, j’ai d’abord corrigé, mais ensuite viré :D

Vous avez des outils très connu des geeks, genre W3C validator qui en plus de vous donner vos erreurs vous permettra de les corriger facilement. Je me suis servie aussi d’un autre addon de firefox qui avait l’avantage de vous sortir le truc et les explications en français : html validator

Les images, mon point faible.

Je ne voulais pas toucher au design de mon blog parce que je l’aime ! En effet, les blogs au design épurés sont formidables au niveau temps de chargement, mais c’est tellement pas moi… Alors j’ai découvert qu’on pouvait optimiser des images (oui, certains penseront que je débarque)

Page speed propose d’ailleurs des versions optimisées de vos images, je n’ai eu qu’à les mettre en place et hop. En fait il s’agit surtout de baisser la qualité d’un jpg, ou le nombre de couleurs d’un png, et cela reste souvent très correct à l’affichage en diminuant leur taille parfois de moitié.

J’ai trouvé à ce sujet un site qui vous propose de faire ça en ligne Online Image Optimizer, bien pratique si vous ne voulez pas charger page speed ou tout autre logiciel d’optimisation d’images.

Voilà, je pense que j’ai fait le tour, ma page est encore longue à charger intégralement, mais vous avez très vite l’essentiel, et je n’ai pas dit mon dernier mot !

Bonne journée !! :)