Votre site est poussif ? Le temps de chargement ou d’affichage des pages est trop long ? Avant de penser à changer d’hébergement et avant de se plonger dans le code afin d’y trouver des points d’amélioration, il est peut-être important de regarder de plus près comment sont conçues vos pages web.
Yahoo propose une extension Firefox très intéressante, nommée YSlow. Il faut prononcer “why slow” pour “pourquoi ça rame ?”. 
Cette extension permet de faire des contrôles sur une page à partir d’une checklist qui se compose de 13 points :
- Réduire le nombre de requêtes HTTP
- Utiliser un CDN
- Ajouter des entêtes HTTP d’expiration
- Compresser le contenu des données échangées
- Placer les feuilles de style CSS le plus tôt possible
- Placer les scripts Javascript le plus tard possible
- Éviter les expressions CSS
- Extraire un maximum de CSS et Javascript dans des fichiers à part
- Réduire le nombre de résolution DNS
- Réduire la taille du Javascript
- Eviter les redirections HTTP
- Supprimer les scripts en double
- Supprimer les ETags
En respectant ces 13 points, votre site web devrait être plus performant si ce n’était pas le cas auparavant. Le plugin permet de donner une note globale pour une page avec une note pour chaque point. La documentation est très bien faite. Alors plutôt que d’expliquer tous les points en donnant des axes d’amélioration, je vais vous détailler un exemple concret. 
Je travaille sur un site pour les fans du jeu de cartes à collectionner Magic: The Gathering. Le design est plus que rudimentaire (avis aux artistes ! :-D), c’est pourquoi je n’en ai pas encore parlé ici. La base de données des cartes est assez conséquente et regorge d’information. Il se peut donc que certaines pages puissent mettre un peu de temps à s’afficher. C’est pourquoi j’ai travaillé sur l’optimisation du site.
Comme vous pouvez le voir, la première note obtenue était un D avec un score de 61 (sur 100).
J’ai donc décidé de commencer par le dernier point en supprimant les ETags. En effet, cette information est très peu et très mal utilisée. Alors, pour réduire le taille des données transportées autant l’enlever. Et cela se fait très facilement (si vous utilisez Apache comme serveur HTTP) en ajoutant la ligne suivante dans votre fichier .htaccess :
FileETag none
Après avoir fait cette modification, la note globale était toujours un D et le score est seulement monté à 63. Mais pour ce point, le F s’est transformé en B.
Ensuite, je me suis attaqué au positionnement des entêtes HTTP d’expiration. Ce paramétrage permet de réduire le nombre de requête HTTP faite par le navigateur en lui indiquant de conserver certaines données plus ou moins longtemps. C’est tout aussi simple à mettre en place que l’astuce précédente puisqu’il faut modifier le même fichier en y ajoutant les lignes suivantes :
ExpiresActive On
ExpiresByType text/css "access plus 30 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType image/x-icon "access plus 7 days"
ExpiresByType image/vnd.microsoft.icon "access plus 7 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 30 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/jpg "access plus 30 days"
ExpiresByType application/x-shockwave-flash "access plus 60 days"
Les délais d’expirations dépendent beaucoup de la vie du site. En effet, si des fichiers CSS ou Javascript sont menés à changer régulièrement, il faut réduire ce délai sous peine que les butineurs des visiteurs ne prennent pas en compte la nouvelle version. Cette optimisation a permis d’obtenir un B pour ce point et un C en note globale avec un score de 73. Ça progresse…
Après avoir réglé ces deux points, la compression du contenu m’a parue être une optimisation essentielle et à moins coût. Ceci réduit considérablement la taille des fichiers HTML ou XML et ainsi les pages se téléchargent plus rapidement. Pour activer la compression GZip des données, il faut encore ajouter dans le fichier .htaccess la ligne suivante :
AddOutputFilterByType DEFLATE text/javascript application/javascript text/css application/xhtml+xml text/html text/plain application/json text/xml
Avec la compression GZIP, YSlow attribute la note A pour ce point et la note globale B avec un score qui continue sa progression en arrivant à 82.
En regardant le comportement du butineur, j’ai remarqué que le composant Javascript Script.aculo.us générait un grand nombre de requête HTTP pour télécharger de nombreux fichiers de scripts. De plus, ces fichiers ne sont pas proposés en version compactée. En cherchant un peu, j’ai trouvé un package nommé Protoculous qui est une version compacté de Prototype et Script.aculo.us en un seul fichier ! Voilà une bonne méthode pour réduire le nombre de requête HTTP.
En remplaçant ces composants par Protoculous, le site obtient la note A pour ce point et la note globale passe à A avec un score de 90.
Le site n’est pas “encore” assez conséquent pour utiliser un CDN. Mais juste pour voir la note obtenue avec un CDN, j’ai ajouté le paramètre suivant dans Firefox (dans la page about:config) :
extensions.yslow.cdnHostnames=www.mtgaddict.net
En réglant ce dernier point le site obtiendrai la note A pour ce point et son score serait de 97. Pas mal, non ?
Il y a encore quelques points d’amélioration possibles. Mais j’ai voulu montrer comment améliorer les performances d’un site en fournissant très peu d’effort. Des pages HTML de près de 275Ko ne font plus que 25Ko. Et les temps d’affichage des pages se sont nettement réduits.
Couplé à ces optimisations, j’ai également activer le cache HTML côté serveur pour certaines pages stratégiques à contenu fixe. Si votre moteur de rendu offre cette fonctionnalité, pensez-y aussi.
apache firefox html http javascript optimisation web yahoo
