Tensin

Venant de découvrir ShowSlow (un site qui aggrège les données remontées par YSlow et Page Speed, voir ci-dessous), j’en ai profité pour appliquer cette astuce toute bête sur tous mes sites qui le permettent et qui n’étaient pas forcément à jour.

Au programme dans ce billet : une optimisation toute simple de l’usage du cache pour toutes les ressources (par .htaccess), et le rappel de quelques outils d’aide au diagnostic (que j’imagine tous les développeurs web connaissent, mais sait-on jamais) : YSlow, Page Speed, ShowSlow et WebPageTest.

Tous ces outils sont intéressants, mais il ne faut pas s’attendre à avoir des gains de performances de l’ordre de 100%. Par ailleurs, ces outils se focalisent tous sur l’analyse des performances côté navigateur, il ne faut pas oublier l’analyse et les optimisations côté back-office.

Optimisation de l’usage du cache pour toutes les ressources (par .htaccess)

Le principe consiste, pour optimiser la conservation en cache des ressources statiques commes les images, les .css ou les .js, à forcer une durée de rétention importante via une directive stockée dans un .htaccess

Avantages : tous les fichiers du site (ou du répertoire concerné par le .htaccess) sont automatiquement paramétrés avec ce délai d’expiration. Les fichiers resteront donc systématiquement dans le cache du navigateur (jusqu’à purge manuelle ou expiration de la durée indiquée).

Inconvénient : il ne sera en l’état pas possible de modifier ces fichiers. Autrement dit si un de ces fichiers est modifié en ligne, il ne sera pas récupéré par les visiteurs qui seront déjà venus précédemment sur le site (mais des solutions existent, sur une base de versionning de fichiers, voir cet excellent article de ce non moins excellent blog).

Le code à mettre dans le fichier .htaccess (à adapter au besoin sur le type de fichiers concernés et la durée de conservation dans le cache) :

<IfModule mod_expires.c>
SetEnv mod_expires On
ExpiresActive On
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
</IfModule>

Installation du module expire sous Apache :

sudo a2enmod expires 

That’s all !

En utilisant les outils ci-dessous (et en partant à chaque fois d’un cache vide) on constate bien une (légère) différence de temps de chargement, et différence dans les résultats d’analyse.

Outillage en rapport.

YSlow

YSlow est une extension FireFox qui enrichit le plugin FireBug, Le principe est ensuite, une fois une page analysée, de lister un certain nombre d’éléments pertinents à corriger / modifier pour obtenir de meilleures performances, notamment (tout est rappelé sur la page Best practices for speeding up your web site) :

• réduire le nombre de requêtes HTTP = concaténer les fichiers qui peuvent l’être (.css, .js) ;
• paramétrer correctement les expirations de cache (cf. ci-dessus par ex.) ;
• mettre en place une compression GZip (soit au sein du framework utilisé (la plupart le permette), soit par soi même (en PHP via les méthodes de capture de flux, etc.), soit encore par une paramétrie globale par ex. côté Apache) ;
• mettre les feuilles de style en début de page ;
• et les scripts en bas de page ;
• rendre les ressources .css et .js externes (afin qu’elles puissent être mises en cache) et les compresser (avec Google Closure ou YUI Compressor) ;
• etc.

Page Speed

Autre extension pour FireFox, toujours sous forme d’ajout à FireBug, toujours sur le même principe : analyser la page, et faire une liste de recommandations en conséquence.

Au final j’ai quand même plus tendance à utiliser YSlow et à me passer de Page Speed, même si certains trouvent certains avantages à Page Speed. Evidemment, çà ne coûte pas grand chose d’installer les deux (les deux s’intégrant parfaitement dans FireBug) et de faire une passe sur son site avec chaque outil (qui ne prend qu’une ou deux secondes).

Le site de Page Speed : http://code.google.com/intl/fr-FR/speed/page-speed/

Showslow

Il s’agit d’un site (à installer soi-même sur son serveur), développé en PHP, et qui permet d’historiser les valeurs remontées par YSlow et Page Speed, en automatique (une fois son FireFox correctement configuré). Ce n’est clairement pas indispensable, mais çà permet d’avoir un historique des performances de ses sites web.

Il suffit de suivre la documentation d’installation, bien faite et tout à fait suffisante, pour installer la coeur de l’outil, et d’ensuite paramétrer les deux plugins FireBug en conséquence.

WebPageTest

Découvert pour ma part dans la foulée de ShowSlow, WebPageTest permet de faire le même type d’analyses, certes en moins poussé, mais déclenchées cette fois en ligne, et surtout avec deux avantages notables :

• les tests peuvent se faire depuis des machines hébergées en différents points du globe (Paris, Amsterdam, différentes villes en Amérique, la Chine, la Nouvelle-Zélande, …) ;
• il est possible de tester l’accès à sa page sur différents navigateurs.