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.
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 :
Un coup de cliquette sur l’insecte et hop :
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.
Exemple 1
Exemple 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 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.
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.
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.
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.
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.
La seconde fonctionnalité s’appelle TOOLS. Une collection d’outils dont j’utilise principalement smush.it et Printable View.
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 ?
