Mon site est lent ? Oui, mais pourquoi ?

Il arrive parfois que votre site présente des signes de lenteur ? Et là vous voyez tout rouge !!! Attendez avant de changer d’hébergeur, de re-coder entièrement le site après avoir licencié ces feignants de développeurs.

Voici quelques petits trucs et astuces afin de détecter ou se situe le problème. Avant de commencer il vous faut installer :

Firefox 3,
– puis Firebug (la version 1.2 beta est pour la v3.0 de firefox),
– et enfin Yslow, qui est un plugin pour firebug 1.0 (merci Yahoo, c’est sympa !)

Ouf, on y est. Si vous avez suivi, vous avez ceci en bas a droite de Firefox :

Yslow et Firebug

Cliquez sur l’insecte (arrhhhhhhh la sale bête), puis sur Net.Vous allez devoir cliquer sur Enable truc bidule… Au dessus de net, choisissez All.

Yslow et Firebug

Et là c’est bonheur, vous pouvez voir de vos propres yeux toutes les informations qu’il vous manquait auparavant pour diagnostiquer votre site : temps de chargement de chaque élément, POST/GET, code de retour (oui, même les 404,302…), et encore plus fort : les headers complets. Le plus intéressant dans un premier temps est la première ligne. Il s’agit du fichier HTML. Si le HTML met beaucoup de temps a arriver, c’est que votre serveur est en souffrance : pas assez de CPU, bases de données dans les choux, et beaucoup plus rarement problème de bande passante… Vous avez déjà une première piste.

Yslow et Firebug

A ce stade, vous savez déjà suffisament d’infos pour un premier diagnostique :le serveur est-il dimensionné correctement, votre bande passante ne suffit peut être pas et vous pouvez l’optimiser ou l’augmenter. C’est déjà énorme.

Yslow et Firebug
404, le chiffre de la bête

Il est intéressant également de voir que les 150 tags des 62 trackers et autres widgets sont longs à charger au final. Peut etre qu’un peu de nettoyage s’impose. On peut aussi constater sur certains sites qu’il y a des images ENORMES en poids (je ne vais pas balancer, mais un jpg de 150*150 qui fait 500 Ko c’est de l’abus).

Maintenant utilisons Yslow (a côté de Net, dans Firebug). L’onglet performance va scanner la page en cours, et vous donner une note (A = tres bien) et une liste d’optimisation possibles. Ne cherchez pas a obtenir la note maxi, c’est impossible. En fonction de vos besoins, vous allez disposer de pistes plus ou moins simples à mettre en oeuvre, telles qu’activer la compression, éviter les redirections, minifier certains fichiers…

Yslow et Firebug

Pas de panique si vous ne comprenez pas tout (comme moi d’ailleurs), il suffit de cliquer sur une des rubriques pour avoir les explications afférentes.

Vous allez pouvoir également étudier ce qui est mis en cache par votre navigateur :

Yslow et Firebug

Je ne vais pas m’étendre d’avantage sur le sujet, Firebug et Yslow sont simples et efficaces, seule l’interprétation peut être un poil technique. A l’usage leur utilisation devient un réflexe et apporte une réelle plus value.

Si certains d’entre vous ont d’autres outils intéressants sur le sujet, je suis preneur ! (et si vous êtes friants de posts techniques on ira un peu plus loin les prochaines fois).

6 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Article de : Cobolian

Jacques Terrier Ecrit sur ce blog et ailleurs : Tutos performance web et formation e-commerce sur OSEOX Twitter : Twitter