Nous allons voir comment améliorer — parfois de façon spectaculaire — les délais d’affichage d’une page web, en servant certains éléments comprimés (coté serveur), et en utilisant le cache du navigateur (coté client).
Compression gzip
Si certains veinards peuvent se payer des serveurs dédiés, utiliser le module de compression zlib et ainsi servir un contenu comprimé à la volée, il s’avère que les hébergements plus humbles sur serveurs mutualisés n’ont bien souvent pas accès à zlib.
La fonction gzip de PHP par contre, est pratiquement toujours disponible et permet de compresser du texte avec un simple appel en début de page de :
ob_start("ob_gzhandler");
Comment faire néanmoins pour comprimer les scripts et les feuilles de style ? Les renommer en .php et utiliser ob_start ? Non, ce n’est pas très propre et de plus, est-ce bien utile de consommer des ressources en demandant la compression des éléments à chaque fois qu’un visiteur charge la page ?
Nous allons tout simplement gzipper les fichiers manuellement, et proposer la version .gz au navigateur du client, au moyen du fichier .htaccess.
1) Pour obtenir un fichier gzippé à partir d’un fichier .css par exemple, je vous invite à utiliser ce script php. Placez le dans le même répertoire que le .css, éditez le pour changer le nom du fichier ciblé, et entrez l’adresse du script dans votre navigateur. Cela devrait générer un fichier gzippé dans le même répertoire.
2) Une fois vos fichiers comprimés, doublez leurs extensions (exemple.js.js) et placez les dans des dossiers spécifiques (ex: /css/ et /js/). Créez un .htaccess dans chacun de ces dossiers, pour forcer le type de contenu. Il contiendra par exemple pour un fichier css :
ForceType text/css
Pour finir, ajoutez ce code dans votre .htaccess principal, celui à la racine du site:
# Forcer la demande des versions .gz des fichiers Options +MultiViews AddEncoding x-gzip .gz AddType text/javascript .gz AddType text/css .gz
Félicitations, vous proposez à présent une alternative gzippée des composants de vos pages aux visiteurs. Les gains sont très importants et même sur de petits fichiers. Le fichier .js principal de ce site par exemple est passé de 48 à 20 ko, soit un ratio de 2,4.
Utilisation du cache visiteur
Je ne m’attarde pas sur l’intérêt du cache et des importants gains de performance qu’il permet d’obtenir — l’équipe de Yahoo propose déjà une analyse remarquable.
Notre objectif ici est de forcer la mise en cache les éléments récurrents, et de toutes les images. Une fois de plus, nous allons utiliser une méthode propre via le fichier .htaccess à la racine. Ajoutez y ces lignes :
# Forcer le cache des images <filesmatch "\.(jpg|png|gif|js|css|ico)$"> ExpiresActive On ExpiresDefault "access plus 1 year" FileETag none </filesmatch>
Remarquez que l’on définit l’expiration des éléments pour une date très éloignée, et que par conséquent, on supprime les ETags dès lors inutiles. Cette solution n’est pas adaptée à tous les cas, aussi je vous renvoie à ces explications sur expire et Etags.
Notez également que les fichiers étant stocké pour 1 an chez le visiteur, des changements dans ces fichiers ne se répercuteraient pas. Une astuce consiste à nommer ses fichiers avec des numéros de version (ex: screen-v1.css) pour forcer le visiteur à avoir toujours la dernière version en cache.
Délais de chargement et d’affichage, conclusions
Si vous avez suivi avec succès ces conseils, votre site devrait connaître une amélioration sensible des délais d’affichage chez le visiteur. Le résultat est incontestable sur ce blog en tout cas.
J’espère que vous avez apprécié ce guide,
n’hésitez pas à me faire part de vos réflexions.
Message express à l’auteur