21 Fév 2016

#miniTuto Optimiser son site à l’aide du fichier .htaccess #5

Google+ Commentaires Newsletter

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 ????

Continuez sur le site...

Restez informés des Actus, Tutos et Bons-Plans en suivant BXNXG :

Tags

Commentaires

Leave a Comment

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.