Comment améliorer la vitesse d'affichage des pages de son site ?

Par Nicolas, . Lien permanent Développement

Il existe de nombreuses façons d'améliorer la vitesse d'affichage des pages de son site pour rendre la visite du dit site bien plus agréable à la condition toutefois que le contenu soit intéressant ! On peut alléger la page en image, mettre moins de contenu mais le mieux est tout de même de se servir des différents caches de manière optimale. 

Pour se faire une idée de la vitesse d'affichage, on peut par exemple utiliser l'extension firefox Yslow qui permet d'avoir des statistiques sur le rendu de la page : temps d'affichage, nombre de requêtes http, poids des éléments chargés,... Au final l'extension donne un score à la page visitée en fonction des critères jugés comme des bonnes pratiques. Par exemple, pour la page d'accueil de ce blog - avant les modifications que je vais expliquer - j'obtenais un score de 72 (grade C). C'est très mauvais. Pour le détail des statistiques en images cela donnait cela :

yslow-avant.png

Il y a deux graphiques : un montrant le poids et le nombre de requête avec le cache vide et à droite la même chose en se servant du cache. Il y a autant de requête http ! Les éléments sont cachés car il y a moins de contenu de transféré, 8,4Ko au lieu de 124,4Ko mais le navigateur doit quand même s'assurer que le contenu qu'il a en cache est valide ! Il fait une requête de ce type :

GET / HTTP/1.1
Host: www.nikrou.net
If-Modified-Since: Wed, 27 Oct 2010 22:30:48 GMT

En retour il reçoit du serveur un code 304 (Not Modified) qui lui signifie que le contenu n'a pas été modifié et que donc son cache est valide. Pour le forcer à utiliser sans cache de manière inconditionnelle il faut donner une durée de validité au contenu livré. Cela se fait avec le module mod_expires d'apache. L'idée est de dire au navigateur pendant combien de temps le contenu livré peut-être considéré comme valide. On ne met pas la même durée pour tous les contenus. Par exemple, l'image du bandeau peut-être caché longtemps (durée en semaines), tandis que les feuilles de style css ou les fichiers javascript doivent l'être moins longtemps (durée en jours) car ils sont plus succeptibles de changer.

Il suffit donc d'activer le module d'apache et d'ajouter les lignes suivantes:

ExpiresActive on
ExpiresDefault "access plus 30 seconds"
ExpiresByType text/html "access plus 120 seconds"
ExpiresByType text/css "access 1 weeks"
ExpiresByType text/javascript "access 1 weeks"
ExpiresByType application/x-javascript "access 1 weeks"
ExpiresByType application/javascript "access 1 weeks"
ExpiresByType image/gif "access 1 months"
ExpiresByType image/jpeg "access 1 months"
ExpiresByType image/png "access 1 months"

En mettant cela en pratique, je n'ai plus que 3 requêtes lorsque le navigateur utilise le cache.

Pour améliorer les performances, l'extension Yslow fournit des conseils : compresser le contenu, réduire le nombre de requêtes http (en regroupant les fichiers css ou javascript), compresser les fichiers css et javascript, compresser les images, ajouter des ETags (entity tags) aux différents contenus.

Sans toucher à l'application dotclear, ni au plugin, on peut compresser le contenu avec le mod_deflate et on peut ajouter les ETags avec la directive FileETag. Cela donne ça:

AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
SetOutputFilter DEFLATE

On ne compresse que le texte et surtout pas des images ! Il faut aussi ajouter la directive suivante pour que certains vieux navigateurs ne s'emmêle pas les pinceaux. En effet certains navigateurs déclarent supporter la compression alors que cela ne fonctionne pas. La directive suivant gère ces cas là :

Header append Vary User-Agent env=!dont-vary

Et pour finir la directive pour les ETags en se basant sur la date de modification et la taille des fichiers :

FileETag MTime Size

On n'utilise pas la possibilité de se baser sur l'inode des fichiers ce qui pourtant rendrait l'ETag assurément unique pour le cas où le site serait livré par un cluster par exemple. Du coup, même si Yahoo via Yslow déconseille l'utilisation des ETags il n'y a à priori aucun inconvénient à les utiliser. En mettant tout cela en place, j'obtiens un score de 83 (grade B).

Pour améliorer encore la vitesse de rendu, il faudrait commencer à toucher à l'application, en mettant les fichiers javascript en pied de page, en livrant le contenu statique depuis un sous-domaine sans cookie,... Cela se fera au fur et à mesure. Le passage de B à C était facile. Les étapes suivantes seront plus complexes.

Haut de page