Dans ce mini tutoriel, je vais vous donner plusieurs règles d’optimisations htaccess que j’utilise très souvent dans les sites que je passe en production.
Ces règles seront compatibles pour les serveurs Apache et NGINX. Elles concerneront :
- Le cache navigateur (eTag, header, durée de mise en cache par type d’extension ou de fichier)
- La compression (deflate, gzip)
- Règles d’accès (video, audio etc)
- Quelques règles de réécritures utiles
Les règles de conf Apache (.htaccess)
Dans les prochaines règles, nous ajouterons des conditions <If module mod_xxx> qui permettront de fonctionner que lorsque les mods seront activés (et évitera de créer des erreurs). Ça peut être utile surtout si votre hébergeur ne propose pas certains modes.
DEFLATE ou GZIP
Au choix, vous avez le mode DEFLATE ou GZIP pour la compression des paquets. Ces modes sont très utiles et peuvent compresser vos contenus HTML/CSS/JS entre 10 et 30%. Ces mods utilisent 2 algorithmes de compression : Zlib et LZ77, néanmoins le GZIP est plus performant que DEFLATE. Je vous conseille d’ajouter les deux, et d’activer les deux. Si vous mettez dans l’ordre DEFLATE puis GZIP, le dernier sera utilisé par défaut.
mod_deflate :
[cce_bash]
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s,?s(gzip|deflate)?|X{4,13}|~{4,13}|-{4,13})$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
# Legacy versions of Apache
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
SetOutputFilter DEFLATE
Header set Cache-Control "max-age=172800, public, must-revalidate"
SetOutputFilter DEFLATE
[/cce_bash]mod_gzip :
[cce_bash]
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
[/cce_bash]Vous pouvez checker votre site depuis ce lien. Dans le cas ou vous n’avez pas activé ses mods, dans le terminal connectez vous et lancer cette commande en root :
[cce_bash]a2enmod deflate[/cce_bash]
Cache et Expiration des fichiers
Les règles d’expirations représentent les durées auxquelles chaque type de fichier sera sauvegardé en cache chez vos visiteurs. Vous pouvez changer les dates à votre convenance, généralement plus d’un mois suffit pour les fichiers fixes. Éviter de préciser plus de quelques secondes pour les fichiers html/xml/json qui sont généralement des contenus dynamiques.
[cce_bash]
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/jpg "access plus 2 month"
ExpiresByType image/jpeg "access plus 2 month"
ExpiresByType image/png "access plus 2 month"
ExpiresByType image/gif "access plus 2 month"
ExpiresByType image/ico "access plus 2 month"
ExpiresByType image/icon "access plus 2 month"
ExpiresByType image/x-icon "access plus 2 month"
ExpiresByType text/css "access plus 2 month"
ExpiresByType text/javascript "access plus 2 month"
ExpiresByType text/html "access plus 5 seconds"
ExpiresByType application/xhtml+xml "access plus 5 seconds"
ExpiresByType application/javascript "access plus 2 month"
ExpiresByType application/x-javascript "access plus 2 month"
ExpiresByType application/x-shockwave-flash "access plus 2 month"
ExpiresByType application/x-font-woff "access plus 2 month"
ExpiresByType application/x-font-ttf "access plus 2 month"
ExpiresByType application/x-font-otf "access plus 2 month"
[/cce_bash]Les caches avec mod_headers recréent les mêmes caractéristiques que mod_expires, mais au niveau des extensions (à savoir que l’on peut spécifier ce cache directement dans le HEADER d’un fichier ou d’une requête HTTP au cas par cas). À titre d’information max-age est en seconde, 2592000 = 30 jours.
[cce_bash]
Header set Cache-Control "max-age=2592000, public"
Header set Cache-Control "max-age=604800, public"
Header set Cache-Control "max-age=216000, private"
Header set Cache-Control "max-age=5, public"
[/cce_bash]Les Types
Parfois certaines extensions peuvent se faire lancer par des plugins de navigateurs (comme les vidéos). Il peut être utile de donner des types par défaut :
[cce_bash]AddType image/x-icon .ico AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType font/x-woff .woff AddType image/svg+xml .svg[/cce_bash]
Réécritures d’url
La redirection du http vers https, du non www vers www et vice versa :
[cce_bash]
RewriteEngine On
# Si vous avez un certificat ssl, redirigez toutes les connexions http vers https
RewriteCond %{HTTPS} !^on$
RewriteRule (.*) https://www.monsite.com/$1 [R,L]
# www ou non ? forcer l'un ou l'autre. Pour une redirection vers www :
RewriteCond %{HTTP_HOST} !^www. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# ou l'inverse :
RewriteCond %{HTTP_HOST} ^www. [NC]
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [R=301,L][/cce_bash]
Les règles de conf NGINX
Vous avez une configuration 100% NGINX ou hybride ? L’équivalent du .htaccess n’existe pas. Il faut renseigner les règles dans le fichier de conf NGINX (/etc/nginx/nginx.conf ou /etc/nginx/sites/default), dans la partie http{}, ou server{} :
[cce_bash]# Compression Gzip
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
# Header cache :
location ~ .(css|htc|less|js|js2|js3|js4)$ {
expires 31536000s;
add_header Pragma "public";
add_header Cache-Control "max-age=31536000, public";
}
location ~ .(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$ {
expires 3600s;
add_header Pragma "public";
add_header Cache-Control "max-age=3600, public";
}
location ~ .(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|woff|xla|xls|xlsx|xlt|xlw|zip)$ {
expires 31536000s;
add_header Pragma "public";
add_header Cache-Control "max-age=31536000, public";
}[/cce_bash]Relancez NGINX via le terminal :
[cce_bash]/etc/init.d/nginx restart # ou systemctl restart nginx[/cce_bash]
N’oubliez pas !
Enregistrer des règles de cache est très pratique pour accélérer un site, mais évitez d’appliquer ces règles quand votre site est en construction (css, js…). Le risque étant que vos visiteurs disposent de fichiers en cache obsolètes. Il faut que votre site soit en mode production ! Dans le cas d’évolution, éditez les périodes d’expiration des caches avec des valeurs plus courtes, et laissez-les quelques temps pour enfin remettre les durées initiales.
Pensez aussi à tester vos sites sur Google PageSpeed Insight !
Voilà, vous avez des règles qui amélioreront les performances au niveau du temps d’accès et diminution des requêtes vers votre serveur ????