Dans ce tutoriel, nous allons voir comment optimiser au mieux un site internet. Il existe de nombreuses méthodes, cependant nous allons essentiellement nous pencher sur l’exploitation de la mise en cache et la réduction du temps de réponse avec le serveur.
Outils d’analyse
Google fournit un bon outil d’analyse pour optimiser les sites Internet : cet outil est Page Speed : http://developers.google.com/speed/pagespeed/insights/
Page Speed va analyser votre site et vous fournir de nombreux conseils d’optimisation.
Sur cette image, PageSpeed nous conseil d’exploiter la mise en cache, de réduire le temps de réponse du serveur (oui, vous verrez qu’on peut le faire depuis votre site), d’optimiser les images (nous n’aborderons pas ce point ici), et de « corriger » des codes JavaScript et/ou CSS qui bloquent l’affichage du contenu de notre site.
Exploiter la mise en cache du navigateur
Lors de la visite d’un site, le navigateur charge tous les composants de celui-ci (images, CSS, JavaScript, etc…) mais si vous ne faites rien, chaque visiteur va les recharger inutilement lors de chaque visitesur votre site. Or, une fois que le site est en production certains composants n’ont plus besoin d’être rechargé, car ils ne changeront pas, ou très rarement.
Sur l’image ci-dessus, nous constatons que notre site charge 36 composants pour un poids total de 321Kb, ce qui n’est pas énorme, mais nous allons voir qu’avec la mise en cache, nous allons pouvoir faire mieux.
Le mod expire (Expire header)
Pour gérer le cache, nous allons passer par un fichier .htaccess que nous placerons à la racine de notre site (là où se trouve le fichier index).
Nous allons, dans un premier temps, indiquer au navigateur combien de temps un composant peut rester en cache. Pour cela, il suffit d’inclure les lignes ci-dessous (les premières lignes sont commentées pour que vous compreniez le principe).
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 7200 seconds" #Par défaut le temps du cache sera de 2 heures
#Les images .jpg seront en cache pour 30 jours
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
#Les images .png seront en cache pour 30 jours
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 2592000 seconds"
ExpiresByType image/icon "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType application/xhtml+xml "access plus 7200 seconds"
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>
Le cache-control
Pour pallier aux différentes méthodes de gestion de cache des navigateurs, nous pouvons ajouter les lignes suivantes qui auront le même effet que les premières.
<IfModule mod_headers.c>
# les .ico, .jpg, etc… seront en cache pour 30 jours
<FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\.(js)$">
Header set Cache-Control "max-age=2592000, private"
</FilesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
Les E-tags
Enfin, pour compléter notre fichier .htaccess nous devons paramétrer les e-tag. Les E-tag servent à différencier deux versions d’un même fichier, en se basant principalement sur l’heure de dernière modification du fichier. Or, sur les architectures en cluster comme chez Easy-hébergement, il se peut qu’un même fichier n’ait pas la même date de dernière modification, c’est pourquoi il est bon de désactiver les E-tags grâce aux lignes suivantes dans le fichier .htaccess :
Header unset ETag
FileETag none
Retournons sur notre site
Nous voyons que notre site effectue toujours le même nombre de requêtes, mais que désormais seuls deux composants sont rechargés pour un poids total de 2,8Kb, une amélioration manifeste par rapport aux 321Kb initiaux. Grâce aux modifications apportées, les composants « Not modified » avec un poids de 0Kb ont été chargés depuis le cache par le navigateur.
Réduire le temps de réponse du serveur
Comme vu dans notre analyse PageSpeed, le temps de réponse du serveur était de 0.98sec, ce n’est pas grand-chose, mais nous allons voir comment l’améliorer encore davantage.
La compression Gzip via Deflate
Gzip va accélérer le temps de chargement de votre site, et réduire la bande passante utilisée en compressant les fichiers type HTML, CSS, JavaScript, etc… Pour cela, nous allons indiquer quels types de fichier il faut compresser grâce aux lignes ci-dessous.
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary
Relançons notre analyse PageSpeed
Maintenant que nous avons configuré la gestion du cache et la compression des données, PageSpeed indique que la mise en cache est correcte, et que le temps de réponse du serveur l’est aussi (Google PageSpeed indique qu’en dessous de 200ms le temps de réponse est correct). Attention toutefois, le temps de réponse du serveur variera et repassera parfois au-dessus des 200ms.
Avertissement
Cette méthode est à appliquer uniquement quand votre site rentre en production et que vous n’effectuerez plus de grosses modifications sur vos styles, images ou JavaScript.
Note : pour forcer votre navigateur à ne pas tenir compte de son cache et à recharger intégralement votre site, faites Ctrl+F5 sur votre page.