Ooptimiser temps de chargement de site web

6 astuces pour augementer la vitesse de chargement de son site

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 beneficier de sites adaptés à leur smartphones au niveau de la structure et surtout du chargment Google a même mis en ligne un format web optimisé (AMP) qu'il encourage à uiliser. 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 resources

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 de la compression GZIP sur serveur Apache
  1. # Activation du mod_deflate
  2. <IfModule mod_headers.c>
  3. # Sert les versions compressées des fichiers CSS et si le client accepte.
  4.   RewriteCond "%{HTTP:Accept-encoding}" "gzip"
  5.   RewriteCond "%{REQUEST_FILENAME}\.gz" -s
  6.   RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]
  7.  
  8. # Sert les versions compressées des fichiers JS et si le client accepte.
  9.   RewriteCond "%{HTTP:Accept-encoding}" "gzip"
  10.   RewriteCond "%{REQUEST_FILENAME}\.gz" -s
  11.   RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]
  12.  
  13. # Pour ne pas effectuer deux fois le procécus de compression.
  14.   RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
  15.   RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]
  16.  
  17.  <FilesMatch "(\.js\.gz|\.css\.gz)$">
  18. # Délivre les fichiers avec le type de contenu correct.
  19.   Header append Content-Encoding gzip
  20.  
  21. # Forces les proxies à mettre en cache les fichiers compressés et les non compressés differemment.
  22.   Header append Vary Accept-Encoding
  23.  </FilesMatch>
  24. </IfModule>
  25.            
  26. <IfModule mod_deflate.c>
  27. #Active la compression pour les types de fichiers suivants : html, css, xml, js, php, woff, otf
  28.  SetOutputFilter DEFLATE
  29.  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
  30. </IfModule>
  31.  
  32. # En 2016, tous les navigateurs à jour supportent le mode deflate. Mais au cas ou, on desactive la compression pour les vieux navigateurs.
  33. <IfModule mod_deflate.c>
  34. BrowserMatch ^Mozilla/4 gzip-only-text/html
  35. BrowserMatch ^Mozilla/4\.0[678] no-gzip
  36. BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  37. </IfModule>
  38.  
  39. # On évite de compresser à nouveau les fichiers qui le sont déjà
  40.  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 :

Configuration de la compression sous NGINX
  1.  gzip on;
  2.  gzip_comp_level 2;
  3.  gzip_http_version 1.0;
  4.  gzip_proxied any;
  5.  gzip_min_length 1100;
  6.  gzip_buffers 16 8k;
  7.  gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  8.  
  9. # Désactive la compression pour IE < 6
  10.  gzip_disable "MSIE [1-6].(?!.*SV1)";
  11.  
  12. # Permet de ne pas envoyer les fichiers compressés à IE6
  13.  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 requetes 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é.

Activation de la mise en cache sur Apache
  1.  ExpiresActive On
  2.  ExpiresByType image/jpg "access plus 1 month"
  3.  ExpiresByType image/jpeg "access plus 1 month"
  4.  ExpiresByType image/png "access plus 1 month"
  5.  ExpiresByType image/gif "access plus 1 month"
  6.  ExpiresByType image/ico "access plus 1 month"
  7.  ExpiresByType image/icon "access plus 1 month"
  8.  ExpiresByType image/x-icon "access plus 1 month"
  9.  ExpiresByType text/css "access plus 1 month"
  10.  ExpiresByType text/javascript "access plus 1 month"
  11.  ExpiresByType text/html "access plus 2 hours"
  12.  ExpiresByType application/xhtml+xml "access plus 1 month"
  13.  ExpiresByType application/javascript "access plus 1 month"
  14.  ExpiresByType application/x-javascript "access plus 1 month"
  15.  ExpiresByType application/x-shockwave-flash "access plus 1 month"
  16.  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 grapiller encore quelques milisecondes en minifiant et en réduisant le nombre de fichies. Le principe de minification est de retirer tous les caractères supperflux 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

Minifier son JavaScript

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

Activation de la mise en cache sur Apache et suppressui des ETags
  1. # Suppression des ETags Header unset
  2. 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.

Partager cet article

Articles similaires

Leave a Reply