Last update: 02/06/2016 13:53

Améliorer la vitesse d'un site grâce à votre configuration Apache

Dans la course à la vitesse dans le rendu des pages d'un site web, la configuration des serveurs joue un rôle non négligeable.

Utilisation des entêtes d'expiration

Règle #1: activation des entêtes d'expiration!

Rendre un site web rapide dépend pour beaucoup de la gestion du cache des navigateurs. La technique présentée vise donc à faire en sorte qu'un maximum de fichiers soient cachés par le navigateur du client ce qui évitera ainsi une requête visant à obtenir ledit fichier.

Par exemple, il est utile de mettre en cache des fichiers dont vous savez qu'ils n'évoluent pas souvent: des fichiers javascripts, des fichiers image, des feuilles de style, etc.

Par Apache, nous conseillons donc de mettre les directives suivantes dans le fichier de configuration httpd.conf:

<FilesMatch "\.(?i:ico|gif|bmp|png|jpe?g|js|css|swf|wmv|wav|mov|webm|ogg|otf|eot|mp3|mp4|pptx?|xlsx?|docx?|pdf|zip)$">
    ExpiresActive   On
    ExpiresDefault  "access plus 5 years"
</FilesMatch>

Ceci aura pour effet d'ajouter un header HTTP d'expiration pour toutes les ressources (fichiers) dont les extensions sont:

Bien que vous puissiez traiter les fichiers différemment en fonction de leur casse (majuscules/minuscules), nous avons inclus le traitement insensitif dans l'expression régulière qui a été mentionnée: ?i:. Ainsi, les fichiers .jpg our les fichiers .JPG (voire .JpEg) seront traités de la même manière.

Le header qui sera positionné fera état d'une invalidité de la ressource (expiration) 5 ans plus tard que son accès, de quoi être largement dans le futur (ExpiresDefault "access plus 5 years") et donc d'activer le cache des navigateurs pour une longue période.

Voici les headers HTTP typiques qui sont positionnés (exemple pris de notre serveur Apache):

HTTP/1.1 304 Not Modified 
Date: Mon, 27 Aug 2012 09:00:52 GMT
Server: Apache/2.2.11 (Win32) PHP/5.3.5
Connection: Keep-Alive
Keep-Alive: timeout=5, max=100
ETag: "1b000000019eaf-1363-4c321e748faf4"
Expires: Sat, 26 Aug 2017 09:00:52 GMT
Cache-Control: max-age=157680000

Attention, pour qu'Apache puisse se livrer à cet exercice, n'oubliez pas d'activer le module expires_module.

Compression des rendus

Règle #2: compressez vos ressources!

Le temps qui est nécessaire à transférer les ressources du serveur au navigateur du client est pour large part dépendant de la taille de la ressource en question: plus la ressource est grosse, plus de temps sera nécessaire à l'envoyer vers l'internaute parce qu'il faudra plus de paquets pour la lui faire parvenir.

Il est donc utile de compresser les données en question. En Apache 2.x cela se fait grâce au module mod_deflate et par l'utilisation de la directive AddOutputFilterByType.

Steve Souders, dans son excellent bouquin "High Performance Web Sites", préconise la compression des scripts (*.js) et des feuilles de style (.css). De notre côté, nous préconisons l'utilisation de la compression sur base de types MIME. Voici les directives de compression telles que nous les avons extraites de notre propre configuration Apache, et ce pour tous les sites dont nous nous occupons:

<Directory "d:/allsites/*/www/http/">
    ... other instructions
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
</Directory>

Résultats et mesures

Lorsqu'une page est rafraîchie (F5 sur la plupart des navigateurs) les réssources sont spécifiquement demandées en refresh au serveur: pour chaque ressource, une requête d'accès est générée. Ce cas équivaut à ne pas se servir du cache. Dans un tel scénario, voici le graphe d'accès aux ressources:

Ce qui nous importe dans ce graphe, c'est la requête de chaque .css, de chaque image (.jpg, .png, ...), etc. Le graphe illustre en bleu (la partie bleue des petites barres) les temps d'attente de réponse (le temps que le navigateur attend la réponse correspondant à sa requête au serveur). On voit qu'Opera initie pas mal de requêtes simultanées mais il faut quand même près de 200 ms (serveur local) sur un total de 390 ms pour servir l'ensemble des ressources. C'est environ la moitié du temps [1] ! La moitié du temps (voire davantage dans une situation mettant en oeuvre une véritable communication réseau. C'est simplement énorme.

Avec l'utilisation des headers d'expiration, la situation s'émliore de manière quasi magique: les ressources sont tout simplement prises du PC local; les requêtes au serveur ne sont pas du tout lancées: la page s'affiche très rapidement.

Note de bas de page

[1] … Les temps ne sont pas représentatifs d'une situation LIVE car les tests sont effectués sur un PC local. Néanmoins le raisonnement est parfaitement valable et les temps de réponse pourraient même s'avérer encore plus catastrophiques dans une situation avec une véritable latence due au réseau

Our website uses cookies to save your preferences. We kindly ask you to consent to our use of cookies when you first visit our website. If you do not consent, the sole recourse is to stop visiting our website. X