Francis Chouquet Graphiste Lettering

Découvrez ce qui ralentit votre blog

0

Avant hier, mon blog ayant été bloqué par OVH, certains d’entre vous sont allés utiliser quelques outils sympas pour voir le contenu de mon blog mais surtout voir ce qui pourrait ralentir l’affichage des pages et du coup surcharger le serveur OVH.

Alors, je me suis dit qu’il serait sympa d’en faire profiter tout le monde, surtout qu’avec un blog wordpress et tous les plugins qui traînent, on a vite fait d’avoir la tonne de scripts qui ralentissent pas mal la navigation. Sans oublier les outils de stats et les différents widgets qui n’arrangent pas l’affaire…

1. Pingdom Tools

Cet outil va charger la page web que vous voulez et afficher tous les objets inclus (HTML, CSS, JS, RSS, Flash…). Pour chaque objet, vous aurez sa taille ainsi que le temps de son chargement.

Img Explanation

Chaque processus va s’inscrire dans l’ordre chronologique de chargement de la page web et ainsi vous allez pouvoir voir ce qui est chargé, combien de temps ça prend pour être chargé et ce qui ne fonctionne pas. Un truc tout bête que j’ai remarqué, c’est que k2, par exemple, rien que le thème de base, crée des erreurs ! Ces erreurs se sont donc retrouvées sur mon thème, vu que je l’ai développé en partant de k2. Donc évitez ce thème à tout prix ! Mais rien ne dit que vous soyez exempt de soucis. Tout plugin ou script installé, comme les stats ou de la pub par exemple, peut considérablement ralentir le chargement de votre blog. Donc bien regarder si tout ça en vaut bien la chandelle.

2. Firebug
Dans le même style, il y a Firebug, extension incontournable de Firefox. Hormis son outil CSS, Firebug propose également de tester la vitesse de chargement de vos pages web. Tout ce passe dans l’onglet « Net »:

firebug page load time

Vous allez avoir accès au même type d’information que chez Pingdom, mais ici, vous pourrez également visualiser les temps de chargement par type d’objet: HTML, CSS, JS, XHR, Images et Flash.

Mais si vous regardez bien cette image, vous pouvez vous apercevoir que j’ai un onglet supplémentaire qui s’appelle YSlow.

3. YSlow

C’est une extension pour Firebug qui a été développé par les équipes de Yahoo dans le but d’améliorer les temps de chargement des sites Yahoo. Une fois l’extension installé et Firefox redémarré, vous allez voir apparaître une petite fenêtre dans la barre du bas du navigateur qui va vous informer du temps de chargement de la page visualisée. Cliquez sur le petit icône de l’extension, et Firebug va s’ouvrir et YSlow va procéder à une analyse détaillée de la page web en cours. Cet outil va donner à votre blog une note, allant de A à F, avec un score, et des notes détaillées pour chaque point pris en compte par l’extension. Par exemple, si je prends la page de téléchargement de YSlow comme test, voici les résultats:

YSlow
Certains points sont très bons (A) et d’autres le sont moins (F). Ici, on ne prendra pas tout en compte, parce que certaines informations ne concernent pas le type de site web que nous avons. Malgré tout, ça nous donne quand même quelques bonnes informations… Et d’ailleurs, l’onglet Stats est également intéressant. Il permet de voir la taille de la page web quand le cache est vide ou quand il est actif:

YSlow stats
Vous vous apercevrez rapidement que les images ont un poids important dans le temps de chargement de votre page web. Vraiment une extension très intéressante et riche en enseignements.

4. Sloppy

Enfin, si vous souhaitez voir ce que donne le temps de chargement de votre page web sur une connection lente, n’hésitez pas à télécharger Sloppy. Vous verrez ce que ça donne quand on n’a pas le haut débit ! 😉

Macosx sloppy

5. A retenir

Maintenant, avec tout ça, vous devriez apprendre pas mal de choses sur votre blog et le temps de chargement de ses pages web. Personnellement, je me suis rendu compte que certains scripts ne fonctionnaient pas ou pas bien, que certains plugins utilisant Javascript pouvaient être très lents, et que le poids des images pouvaient vous plomber un site web.

Donc, si je pouvais donner quelques conseils ce serait ceux-ci:

  • Evitez les plugins qui ne vous sont pas forcément utiles et qui vous bouffent du temps: Chez moi, des plugins comme cforms II ou Slimbox ont des scripts lourds à charger et vous ajoutent une feuille de style en plus.
  • Limitez au maximum l’utilisation de scripts: que ce soit pour les plugins, les outils de stats ou certains widgets comme MyBlogLog, ces scripts peuvent vous plomber complètement votre blog.
  • Limitez le poids et l’utilisation d’images: ce sont souvent les fichiers les plus gros. Essayez de réduire leur taille et leurs nombres si vous en avez la possibilité. Je vais peut-être me faire l’avocat du diable, mais ne sacrifiez pas non plus votre design pour un temps de chargement minimum !! 😉

Voilà, j’espère que ça vous sera utile. En tout cas, moi, j’y ai appris pas mal de choses et la prochaine version du thème du blog sera pensé quelque peu différemment…

23 Commentaires

  • C’est intéressant tout ça. Quand on voit ce qu’un chargement trop lent peut donner avec OVH, un petit diagnostic s’impose…

  • Juste une petite remarque sur tes billets en général. Je ne sais pas si c’est volontaire ou non mais tu ne mets pas de liens vers les outils/sites que tu testes, ce qui est ennuyant, cela m’oblige à ouvrir google à chaque fois.
    Le fondement du web c’est bien les liens hypertexte non ? 🙂

    En tout cas, bonne continuation, un blog avec du contenu ça fait toujours plaisir à suivre.

  • Oops, rectification, le lien est dans le titre, comme quoi il n’est pas forcement visible pour tout le monde

  • Effectivement, Koreus ! Je ne me rend pas toujours compte de la visibilité des liens. Par contre, sur les autres articles, je cite toujours les outils et services dont je parle, donc c’est peut-être parfois un bug. Merci de me prévenir si tu revois ce genre de souci. Le but n’est pas de compliquer la tâche du lecteur !! 😉

  • Super, je bookmark l’article !
    Je connaissais chaque astuce, mais je ne pense jamais à faire un checkup complet avec toutes les solutions…

  • J’ai pas mal fait joujou avec tout ça, et c’est vrai que la conséquence immédiate, c’est la désactivation de pas mal de plugins.

    Le thème joue aussi, surtout avec des thèmes comme K2 qui intègrent du Javascript à tout va. Il faut aussi essayer d’être cohérent : éviter d’ajouter des plugins qui utilisent jQuery d’un côté, et d’autres qui utilisent scriptaculous par exemple.

    Il y a certains problèmes que je n’ai pas pu régler : beaucoup de plugins, pour que le développement soit plus simple sûrement, intègrent leur Javascript sur toutes les pages du blog. Exemple avec cformsII : on a souvent un formulaire seulement sur la page de contact et on se retrouve avec du javascript et du css partout… pas super léger.

    Théoriquement, je pensais avoir trouvé la solution avec HeadSpace2 qui doit permettre d’activer des plugins à la demande sur certaines pages (et des javascripts et css également). Sauf que ça ne fonctionne pas d’après mes tests avec cformsII. Pareil avec audio-player que je n’utilise que sur les articles sur lesquels j’intègre de la musique (très rarement quoi…).

    Bref, en espérant que WordPress s’améliore un peu pour pouvoir réduire la taille de nos pages… ou alors il faut oublier le mutualisé 😉

  • Et alors sur pingdom quel est un bon temps et un temps moyen… ??

    J’ai 4,2 secondes pour la nouvelle version webdesign-tutoriaux. 5,1 secondes pour le blog… Google.com est à 0,2 seconde, et Fuzz.fr est à plus de 8 secondes. Normalement ce n’est pas 2 secondes la valeur clef ?

  • Pour les valeurs « habituelle » (après ça dépend de chaque connexion) :
    0 à 5 secondes => très bon
    6 à 10 => pas mal
    10 à 15 => faire attention
    15 à 20 => pas top
    au-dessus => faut faire qqchose ^^

    Il ne faut pas se baser sur Google sinon on ne met plus rien sur nos pages ^^
    Eux ça se comprend dans le sens ou le moteur est chargé des milliers de fois en même temps, etc….

    Pour un blog il faut se poser les bonnes questions en fonction de ce que l’ont cherche, oui un truc comme Mybloglog va ralentir mais en ce qui me concerne c’est vraiment un truc dont je ne pourrait pas me passer parce que c’est encore une des meilleure façons de remercier les gens de leur passage en leur donnant un minimum de visibilité. Si ça me ralentit l’affichage d’1 seconde bein ok ça me dérange pas mais je sais que pour d’autres ça semble abhérant.

    Chez moi ce qui ralentit l’affichage c’est les boutons Calédosphère, ToutLeMondeEnBlogue, Nuouz, le widget Criteo et la blogroll dynamique. Pour les 4 premiers j’ai tout renvoyé en bas de page (comme ce sont des marqueurs y’a pas besoin de mieux) et pour la blogroll je cherche un plugin similaire sans succès (il s’agit d’un service externe pour le moment).

    Après il faut voir aussi ce que chaque outil te donne comme résultat : Firebug me situe généralement entre 10 et 20 sec (quand un truc externe merdouille) alors que Pingdom me met a maximum 11 sec (entre 8 et 10 généralement). Qui a raison je ne sais pas 😉

    Arkan qui s’en sort pas trop mal avec 45 plugins activés :p

  • Merci Arkan pour ces explications !! 😉

    Le temps peut vraiment varier d’un chargement à un autre. Je sais que sur mon blog la bannière Ziki par exemple est parfois très très longue à charger…TLMEB n’est pas mal non plus dans son genre…

    Pour revenir à k2, j’ai viré la plupart des scripts JS qui étaient dans le header. Je ne les utilise pas. Mais c’est vraiment un thème à éviter. Beaucoup trop de requêtes et de conditions…

    Sinon pour les plugins, c’est vrai que cformsII est chiant pour ça, faudrait trouver une autre solution peut-être… Les plugins Lightbox sont lourds aussi à gérer…

  • Pour les images, il est possible de les stocker chez un tiers style flickr, ce qui evite d’utiliser pas mal de bande passante
    Et pour les plugins, ça serait top si tous les plugins ajoutaient une possibilité de calculer le temps de traitement utiliser comme dans lmkg par exemple (la dernière version ajoute cette donnée dans un commentaire dans le source html). Il suffit de 3 ou 4 lignes de code et ça donne une idée très rapide de la vitesse d’execution du plugin.

  • Encore une fois, merci pour toutes tes pistes qui vont m’être très utiles.

  • J’ai trouvé (mais non testé) ce plugin : TabStat
    http://www.artonesia.org/2007/10/29/17/

    Il permet de surveiller la table. Intéressant visiblement déjà pour visualiser le poids des différents champs.

  • Merci Olivier pour cette info ! 😉

  • Egalement vu ce jour sur excargot rss :
    http://www.excargot.net/index_detail.php?id=588

    Un outil pour convertir tous ses fichiers .js et .css en 2 fichiers !

    ça semble alléchant, mais par contre je n’ai pas compris l’installation, qui pourtant aux dire du développeur est très simple ???

  • Il me semble que tu utilise le plugin  » Search Everything » ?
    Après des test, il se trouve qu’il ralentissait bcp le chargement d’un de mes blogs ( gain de 3-4 secondes ).

  • 20syl > intéressant ça !! Merci pour l’info ! 😉

  • merci pour cet article intéressant !

  • Vraiment bien ce petit récap, merci. 🙂

  • Merci pour cette info, j’ai maintenant un YSlow de 100 !

Success, your comment is awaiting moderation.