Optimiser la vitesse de son site web pour le référencement naturel (SEO)

S'il vous arrive régulièrement d'être frustré par la lenteur des sites web que vous visitez, sachez qu'il en est de même pour les internautes visitant le votre. Pour permettre aux internautes de bénéficier de sites adaptés à leur smartphones au niveau de la structure et surtout du chargement Google a même mis en ligne un format web optimisé (AMP) qu'il encourage à uliser. Mais avant de vous jeter comme des goinfres sur ce nouveau format, dans le but d'optimiser vos vitesses de chargements, pourquoi ne pas commencer par le plus simple à savoir l'optimisation de la performance de vos serveurs grâce à quelques astuces pour les serveurs Apache et NGINX.

Les modifications ci-dessous sont à effectuer dans le fichier de configuration du .htaccess pour les serveurs Apache et dans le fichier nginx.conf pour les serveurs NGINX.

1 – Compression des ressources

Activer la compression des fichiers sur vos serveurs vous permettra d’optimiser non seulement la vitesse de chargement des pages du site, mais également de réduire le nombre de requêtes effectuées lors d’un appel au serveur pour afficher un site web.

Serveur Apache :

# Activation du mod_deflate 
# Sert les versions compressées des fichiers CSS et si le client accepte. 
RewriteCond "%{HTTP:Accept-encoding}" "gzip" 
RewriteCond "%{REQUEST_FILENAME}\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA] 

# Sert les versions compressées des fichiers JS et si le client accepte. RewriteCond "%{HTTP:Accept-encoding}" "gzip" RewriteCond "%{REQUEST_FILENAME}\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA] 

# Pour ne pas effectuer deux fois le procécus de compression. 
RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1] 
RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1] 

# Délivre les fichiers avec le type de contenu correct. Header append Content-Encoding gzip # Forces les proxies à mettre en cache les fichiers compressés et les non compressés differemment. 

Header append Vary Accept-Encoding 

#Active la compression pour les types de fichiers suivants : html, css, xml, js, php, woff, otf 

SetOutputFilter DEFLATE 
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php application/javascript text/javascript font/woff font/otf 

# En 2016, tous les navigateurs à jour supportent le mode deflate. Mais au cas ou, on desactive la compression pour les vieux navigateurs. BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html 

# On évite de compresser à nouveau les fichiers qui le sont déjà SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip

_Note: _ Si vous avez un serveur qui tourne sous une version Apache inférieure à 1.3 seul le mod_gzip est disponible.

Serveur NGINX :

gzip on; 
gzip_comp_level 2; 
gzip_http_version 1.0; 
gzip_proxied any; 
gzip_min_length 1100; 
gzip_buffers 16 8k; 
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; 

# Désactive la compression pour IE < 6 gzip_disable "MSIE [1-6].(?!.*SV1)"; # Permet de ne pas envoyer les fichiers compressés à IE6 gzip_vary on;

2 – Activation de la mise en cache navigateur

La mise en cache navigateur permet d'éviter de nombreux appel serveur pour les internautes qui sont déjà venu sur votre site. L'objectif est d'économiser des requêtes serveurs sur des fichiers qui changent rarement (image, logo, vidéo, fichier css ou javascript) le navigateur mettra donc en cache sur la machine de l'utilisateur une version de ces fichier qui seront réutilisé à chaque visite jusqu'à ce que le temps de mise en cache défini dans la configuration soit écoulé.

ExpiresActive On 
ExpiresByType image/jpg "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/ico "access plus 1 month" 
ExpiresByType image/icon "access plus 1 month" 
ExpiresByType image/x-icon "access plus 1 month" 
ExpiresByType text/css "access plus 1 month" 
ExpiresByType text/javascript "access plus 1 month" 
ExpiresByType text/html "access plus 2 hours" 
ExpiresByType application/xhtml+xml "access plus 1 month" 
ExpiresByType application/javascript "access plus 1 month" 
ExpiresByType application/x-javascript "access plus 1 month" 
ExpiresByType application/x-shockwave-flash "access plus 1 month" 
ExpiresDefault "access plus 2 hours"

3 – Minifier CSS et JS

Réduire le poids des fichiers CSS et JavaScript permet de réduire le temps de chargement de ceux-ci. Pourtant il est possible de grappiller encore quelques millisecondes en minifiant et en réduisant le nombre de fichiers. Le principe de minification est de retirer tous les caractères superflus des fichiers tout en maintenant le code fonctionnel.

Si vous n'avez pas de développeurs sous la main, quelques outils en ligne vous permettent de minifier rapidement vos fichiers que vos pourrez ensuite regrouper en un seul fichier CSS et un autre avec tous les fichiers JavaScript.

Minifier ses fichiers CSS

CSSmin.js: http://tools.w3clubs.com/cssmin

Minifier son JavaScript

Packer: http://dean.edwards.name/packer
JSMin: http://www.crockford.com/javascript/jsmin.zip

Si vous utilisez des éditeurs de textes comme Notepa++, Brackets ou Gedit, sachez que ceux-ci disposent de plugins qui permettent de minifier facilement vos fichiers

4 – Compressions et optimisations des images

Pour la compression des images, un bon logiciel de retouche d'image vous permettra de les mettre à la bonne taille et de réduire leur poids. Photofiltre et XNView par exemple permet de faire de la compression de nombreux fichiers en quelques clics.

De manière générale, mettez en pratique ces recommandations :

Utilisez des images à la bonne taille plutôt que de les redimensionner par HTML;
Pour les images jpg, vous pouvez les compresser entre 80 et 90%;
Pour les images png, vous pouvez les compresser à 8 ou 9;
Vous pouvez également utiliser le nouveau format WebP de Google compatible avec le navigateur Chrome;
Faire attention à ne pas trop compresser les images pour un affichage correct sur les écrans Retina et les écrans à forte densité de pixels.

5 - Réduction des requêtes HTTP

Nous l’avons mentionné plus haut réduire le nombre de requêtes peut aider votre site à charger ses pages plus rapidement. Donc en plus de de fusionner vos scripts JS et vos feuilles de styles, supprimez les ETag avec le code suivants dans votre .htaccess

# Suppression des ETags Header unset ETag FileETag none

6 – Testez votre site web

Avant de vous lancer dans des optimisations à tout va, étudiez les goulots d’étranglement de votre site. Qu’est-ce qui pose problème le chargement des images, le nombre de requêtes http, le poids des fichiers de script etc.

Pour le savoir, vous avez quelques outils qui vous indiquent des éléments d’optimisations comme PageSpeed Insigth de Google ou YSlow de Yahoo que vous pouvez découvrir dans cet article. Cependant, leur utilisation ne vous exonère pas d’avoir une bonne connaissance de votre serveur pour pouvoir affiner vos réglages notamment au niveau du cache.

En bon développeur ou SEO, vous avez sûrement des petites astuces qui vous permettent d’optimiser les temps de chargement de vos sites ou encore d’augmenter la sécurité de votre fichier .htaccess. N’hésitez pas à partager en commentaire vos astuces pour complétez la liste ci-dessus.

6 astuces pour augmenter la vitesse de chargement de son site