Check my Website: Améliorer les performances de votre site avec YSlow

Je vous en parlais dans un précédent billet relatant le travail de préparation que nous avons fait pour pouvoir vous proposer ce qui suit. C’est maintenant chose faite : YSlow est disponible dans la console Check my Website… Et ce n’est pas un poisson d’avril !

YSlow est un projet issu de l’équipe performance Yahoo! qui permet d’analyser les pages web par rapport à un certain nombre de régles de bonnes pratiques en matière de performance web. Son objectif principal est de permettre d’identifier les points de contention de votre site, les éléments qui peuvent le ralentir.

YSlow dans la console

Cliquez sur un des sites que vous avez en supervison pour voir la vue détaillé de celui-ci. Dans cette vue, cliquez l’onglet… YSlow ! Vous avez alors quelques chose qui ressemble à la vue ci-dessous que nous allons détailler.

Cette vue comprend trois « blocs » :

Un bloc Score
Un bloc Général
Un bloc Jeux de règle: ydefault

Score

Dans cet exemple, le site monitoré se voit attribué une note de 76, correspondant à C. Le graphique à côté de cette note représente bien évidemment l’évolution de cette note dans le temps, comme pour n’importe quelle autre métrique.

Général

Les différents types de composants présents dans la page

Dans le bloc général, vous retrouvez la répartition des différents types de composants de la page. C’est le pus souvent un ensemble de composants CSS, images, Javascript… Pour chaque type est indiqué le nombre de requêtes et le poids total.

La ligne située au dessus du tableau Général montre la proportion de chacun des types de composants.

Dans cet exemple, le poids total de la page est clairement composé en majorité d’images.

Jeu de règles

Règles présentant des améliorations possibles

Le dernier bloc à droite indique le jeu de règles YSlow appliqué au test, ydefault dans cet exemple. YSlow est en effet capable d’utiliser des jeux de règles différentes en fonction des sites, pages à tester. Les jeux de règles existants permettent de préciser si le site est plutôt un blog, un site orienté mobile, ordinateurs de bureau… Il est même possible de créer ses propres règles et jeux de règles. Ceci pourrait être l’objet d’un prochain billet sur Wooster.

La liste affichée met directement l’accent sur les régles pour lesquelles le site testé est mal noté. Ici par exemple, le site pourrait certainement gagné en performance si le nombre de requêtes HTTP étaient diminuées. Il obtiendrait en prime une meilleur note que le D actuel sur le sujet (HTTP).

Cliquer sur une des règles permet d’obtenir les explications sur ce qu’il faut faire pour remédier au « problème » rencontré.

Enfin, cliquer sur Afficher la liste entière… permet d’afficher la totalités des notes obtenues pour chacune des règles testées.

Temps de chargement de la page

Grâce au test YSlow, un nouveau graphique fait son apparition dans l’onglet métrique de la console. Il s’agit du temps de chargement de la page mise en surveillance.

Disponibilité ET performance

YSlow dans la console nous permet d’avancer un peu plus vers le premier palier de fonctionnalités que nous souhaitions voir dans un service comme Check my Website. Ouvert avec juste un contrôle de disponibilité au mois de févrirer, le service s’est complété au fur et à mesure de nouveau éléments permettant de jauger et de concrètement améliorer la performance d’un site, d’une page web. Le prochain pas dans cette direction permettra à Check my Website de vous proposer un monitoring de type « Real User Monitoring ».