Optimisation de la vitesse de chargement : Firebug, Page Speed et YSLOW

On en parlait ici même il y a peu, un site lent peut vous faire perdre des clients. C’est logique, surtout dans un contexte où l’immédiateté est devenu une norme. D’ailleurs, si d’aventure vous n’étiez pas convaincus, la lecture de cet article – en anglais – devrait édifier le sceptique que vous êtes. Nous allons donc traiter ici une série de problématiques tenaces comme un pet de chien, discret mais gênant. Et il faut le dire clairement : ça gonfle tout le monde.

Analyser finement les causes de lenteurs est souvent tout le temps un vrai casse tête. Je vous propose donc une approche, bien loin d’une vraie batterie de tests professionnels tant au niveau coût que résultat, mais qui n’en reste pas moins assez efficace pour la majorité de ecommerçants. Dans l’optique de rester accessible, nous allons donc oublier les tests de charge, les proxys et tutti quanti.  Pour rester dans le domaine du simple, faisons un tour à l’aide d’outils rapides à utiliser, gratuits, et à l’usage aisé.

Il faut préciser que les conditions d’un vrai test ne sont pas remplis : la connexion n’est pas calibrée, on travaille sur un site en production dont la fréquentation est variable, etc. Ceci dit, les résultats obtenus n’en restent pas moins pertinents dans la plupart des cas.

limiter

Les outils

Dans un premier temps il va vous falloir Firefox (presque 60% de nos lecteurs l’utilisent, preuve d’un lectorat bien éduqué), et installer 3 plugins : Firebug puis y greffer PageSpeed et YSLOW. Jusque là, rien de complexe (rassurez vous la suite ne l’est pas non plus), et nous n’aurons besoin de rien de plus. Rappelez vous, nous sommes dans la configuration ‘monsieur tout le monde’.

Firebug est un plugin intéressant à plus d’un titre, et nombre d’entre vous l’utilisent déjà. Les dernières versions sont de petits bijoux qui permettent non seulement d’examiner et d’éditer le code HTML/CSS/JS, mais également de monitorer les temps de chargement… Tout simplement génial.

YSLOW et PageSpeed viennentt se greffer sur Firebug, lui apportant un ensemble de fonctionnalités non négligeables, surtout depuis l’intégration de Smush.it™ et JSLint dans YSLOW. Ces plugins ont des fonctionnalités de base sont assez proches.

Une fois l’installation finie, en bas a droite de renard de feu Firefox, vous aurez donc ceci :

2009-09-27_125946

Un coup de cliquette sur l’insecte et hop :

2009-09-27_125442

On passera les 4 premiers onglés, dédiés aux intégrateurs et codeurs. Concentrons nous sur les onglets qui nous intéressent pour l’optimisation, soit Réseau, page Speed, Page Speed Activity et YSLOW.

La suite se veut volontairement abordable, n’ayez donc pas peur de mes délires technophiles et de termes techniques incompréhensibles. La rédaction a volontairement supprimé les ‘WTF ? les DNS sont HS ?‘ et autres ‘y a qu’a augmenter le swap sur le pool, c’est trop petit ! CTB !‘.

RESEAU

Voici 2 tests, sur 2 gros sites de la VAD. D’un côté, nous avons une page qui se charge en moins de 2 secondes, de l’autre un chargement qui semble bien long : 9.35 s ! Et là j’en entends qui poussent un cri de désespoir (quelque chose dans le genre arggghhhhhhhhhhhhhhh), pendant que d’autres appellent leur prestataire afin qu’il vérifie que ce n’est pas leur site.

exemple1Exemple 1


exemple2Exemple 2


Rassurez vous, en ne se basant que sur cette donnée, il est clair que l’un des sites à un gros problème, que ne résoud pas l’usage du cache interne au navigateur (CTRL+F5 pour vider le cache).  Entre 7.53s et 9.35s pour une homepage, mais ils sont dingues ? Et pourtant ! A l’œil la différence n’est pas perceptible, l’affichage des 2 se fait extrêmement rapidement. Mais alors ? Qui croire ? L’œil ou la machine ? Les 2 mon capitaine !

analyse

Analyse des transactions


En effet, en examinant les transactions, on peut finement analyser l’ensemble des chargements. Qui plus est par type de fichier (HTML, CSS, JS, images…). Firebug vous détaille appel par appel le résultat. Sans être expert, on comprends très vite ce qui ralenti un site en consultant l’échelle temporelle située sur la droite. Dans notre exemple, le site n°2 est ralenti par 4 petites images en bas de page qui mettent un temps fou a se charger. La page étant longue cela ne se voit pas. CQFD.

Autre chose intéressante, vous avez accès aux headers et divers codes réponses du serveur. Dans notre exemple un beau 400. Il est donc simple de traquer les 404 ou autres, et de vérifier si la compression est activée par exemple (dans le header, en cliquettant sur le + avant le nom de fichier se trouve un paquet d’infos, parmis lesquelles le fameux Content-Encoding).

Maintenant, passons à votre site (c’est celui qui vous intéresse le plus normalement).

La première chose à vérifier est le temps de délivrance du code HTML. C’est normalement la première ligne. C’est une donnée capitale pleine d’informations ! Le temps de réponse de ce fichier va vous indiquer si votre serveur est surchargé au moment du test. Supposons que le temps de délivrance des quelques Ko soit de quelques secondes. Soit la bande passante (le débit) est trop faible, soit votre serveur pédale dans la semoule ! Si les images arrivent rapidement, la bande passante est correcte (bon, c’est un raccourci facile, mais l’idée y est). Voir donc du côté serveur : sous dimensionné question processeur, code de johnny, requêtes SQL de brelle, serveur SQL sous dimensionné… Les causes peuvent être multiples. Pour résoudre ce type de problème il faudra examiner de plus prêt ce qui se passe sur le serveur, et utiliser d’autres outils. Firebug n’est pas adapté à ce type d’examen.

Ensuite, les viennent les autres fichiers, tels les images, Flash divers, CSS, JS… Logiquement, si la bande passante est adéquate ils devraient arriver assez rapidement. Si ce n’est pas le cas, il est probable que vous allez devoir revoir retailler votre hébergement, vérifier le caching, alléger vos pages, etc.

PAGE SPEED

Sans être du niveau d’une analyse humaine, l’analyse de performance de Page Speed donne pas mal de pistes afin de gagner quelques Ko par ci, quelques Octets par là. Ridicule pensez vous de gratter pour si peu ? Attention, je vais faire les gros yeux.

Supposons une page de 700 Ko. En grattant 10% (soit 70 Ko) sur le poids total en compressant plus quelques images,  et en supposant que 500 personnes surfent en même temps sur ladite page, on obtient un joli gain total en terme de bande passante. D’autant que les gains se répartissent sur l’ensemble du site via la mise en cache. C’est tout bénéfice.

analyse_perf

Différentes techniques peuvent vous apporter un gain non négligeable :

  • Activation de la compression GZIP (d’ailleurs je pense que ce devrait être la première chose a faire),
  • caching (du navigateur, mais aussi pour les nantis via un réseau du type AKAMAI),
  • Optimisation des images, des flashs…
  • Limitation du nombre de fichiers (combinaison de multiples CSS, JS)…

Il existe de part le web une foultitude d’outils (par exemple pour nettoyer un code CSS) et de pistes (regroupement d’images) afin d’optimiser tout cela. Pour la compression des images, c’est très simple : c’est automatique. Un petit coup de cliquette sur Optimize images, et hop, c’est dans la poche.

optimisation_images

700 Ko à gagner !

Si vous êtes perdu, un simple click sur une rubrique vous emmène vers une page d’aide (en anglais) bien fichue. Donc pas de panique.

La doc de page speed en anglais se trouve ici.

PAGE SPEED ACTIVITY

Je ne vais pas m’étendre sur cette partie, elle est plutôt destinée aux codeurs JS et aux problématiques annexes. Cet onglet permet de monitorer en temps réel l’activité d’une page : chargements, exécution de code… Pratique en cas de lenteur sur des appels JS en temps réel par exemple, de l’ajax, un tracker mal placé (genre Google Analytics)  qui met des plombes à répondre, et bloque la suite de l’affichage, etc.

activity

YSLOW

YSLOW est dans la veine de PageSpeed en moins puiisant par certains aspects. Moins pratique concernant la compression des images, on y retrouve également une liste de points à surveiller.

yslow1

J’aime l’utiliser pour 2 fonctionnalités assez sympa. Premièrement, pour les stats. Très visuelles, très parlantes, on arrive très vite à voir ce qui pêche niveau poids et niveau cache. Gadget soit, mais agréable, particulièrement quand il s’agit d’expliquer le pourquoi du comment à un novice.

stats

La seconde fonctionnalité s’appelle TOOLS. Une collection d’outils dont j’utilise principalement  smush.it et Printable View.

tools

Dans ma version JSLint (un examineur de syntaxe JS) ne fonctionne pas. Dommage, mais ce n’est pas très important dans notre cas.

All JS et ALL CSS existent dans Firebug, avec des fonctions bien plus avancées, nous ne nous en serviront donc pas (sauf pour imprimer du code).

Smush.it est assez sympa, mais attention ! Contrairement à la fonctionnalité de FireBug, il ne tient pas compte de la taille d’affichage. Par exemple une image de 1000px * 1000px affichée en 50*50 ne sera pas redimensionnée. Smush.it compresse l’image dans sa taille d’origine, point barre. Le plus intéressant de smush.it est de traiter toutes les images en batch et de pouvoir respecter la hiérarchie de dossiers.

All JS Minified peut être utile pour gagner quelques Ko. Il supprime les commentaires, et les caractères superflux. Par contre gardez une copie sous le coude, on ne sait jamais.

Printable View lui me sert car j’aime travailler sur papier. Le rapport complet une fois imprimé il m’est plus simple de réfléchir tête reposée. Oui, je suis un vieux.

Et ca marche tout de mic mac ?

Clairement, limiter les temps de chargement n’est pas simple. Ici nous n’avons vu qu’une fraction des possibilités, puisque nous n’avons pas abordé les optimisations serveur ou réseau, les tests de montée en charge, etc. Toutefois, et il faut bien le comprendre, c’est la combinaison de petites choses qui permettent un gain final important. Commencez par la base.

Dans l’ordre, je dirais que pour un novice, le plus facile est d’activer la compression gz et de compresser correctement les images. Spécifier la taille des images dans le code HTML est une technique également simple, qui donne l’impression que le rendu est plus rapide, alors pourquoi s’en priver ? Limiter le nombre de CSS et JS n’est pas non plus compliqué.

Par contre, dans les techniques proposées, il faut constater que tout n’est pas possible, ni accessible au péquin moyen. Ne stressez donc pas tant que l’impression de rapidité est là !

Et vous, quels outils (simples, hein ?) utilisez vous habituellement ?

9 commentaires

  1. Je les ai installés il y a quelques jours et on peut en effet obtenir quelques bons résultats.
    Ce n’est pas du simple au double, mais cela permet d’améliorer tout de même le temps de chargement d’une page (je pense notamment aux pages produits des sites e-commerce truffés de javascript et de photos).

    A noter tout de même que pour avoir un rating de A avec Yslow, il faut disposer de gros moyens ;D

  2. Voilà un bien bon article qui fait le tour de la question. Ces outils sont très précieux pour visualiser et mesurer les performances de son site internet. On n’a désormais plus le droit de se lancer à l’aveugle dans des optimisations trouvées à droite à gauche sur le Net. Voici mes petites règles de survie personnelles quand je me lance là dedans :

    1. Les optimisations précoces sont les racines du mal.
    2. Ne jamais optimise sur une intuition ou une impression mais sur un ensemble de mesures fiables (les optimisations précoces viennent souvent d’intuitions fausses).
    3. Commencer par les choses les plus simple à mettre en place, ce sont bien souvent les plus efficaces (cf règle 2 pour vous en convaincre).

    Enfin, attention à certains conseils distillés par ces outils. Ce sont des conseils génériques qui ne prennent pas en compte la taille de votre site. Yslow a récemment rectifié le tir, vous pouvez lancer le test en mode « Small site or blog » (comprendre par la « les sites du commun des mortels ») pour qu’il change ses critères de notation. Des critères comme les CDN et les ETag n’ont de pertinence que si vous avez un gros trafic et que vous êtes hébergés sur une ferme de serveurs.

    Faites ce que propose le Capitaine : gzip, taille des images, limiter le nombre de CSS et de javascript. Puis quant votre site aura dépassé le millier de visiteurs par jour, inquiétez vous du reste 😉

  3. Yslow permet de spécifier l’adresse d’un CDN non référencé.

    Donc si :
    – vous avez un petit site (< 500000 PV/mois);
    – vous avez placé vos images / js / sur un domaine séparé (ou sous domaine*) ;

    Alors vous méritez un A à cette note. Aller dans les prefs d'Yslow et ajoutez votre sous-domaine pour les CDN.

    * uniquement si vous n'utilisez pas des cookies genre .domaine.com car sinon les cookies sont aussi envoyées pour l'appel aux images sur votre sous-domaine-des-images.domaine.com et là, vous méritez pas du tout le A.

  4. Bonjour

    je viens de mettre page speed et je l’ai ouvert sur une des pages de mon blog. Un score de 73/100 par exemple, ca veut dire quoi ? Bien, peut mieux faire… ?

    Quand je regarde les onglets en rouge (hight priority), pour Optimize image, je vois que je pourrais gagner en poids mais quelle est la manipulation ?

    Car je n’y connait vraiment rien.

    Merci d’avance

    Olivier

  5. @Helly : il faut compresser les images avec photoshop par exemple.

    Je suis allé voir ton blog (la home), pas la peine de s’en faire car le gain serait minime et le temps de chargement est correct.

    Les conseils ci dessus sont surtout dédiés aux sites ecommerce avec déjà un beau trafic. Pour un blog il n’est pas nécessaire de se lancer dans des optimisations poussées, juste vérifier qu’on ne met pas des images qui pèsent 1 méga par exemple.

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