Voulez-vous optimiser le chargement de votre site quel que soit le CMS utilisé ?

Vous avez WordPress et vous avez tout essayé mais pas de changement en vitesse de chargement ?

Si vous me le permettez, je vais vous montrer les meilleurs pratiques .htaccess pour booster la note de votre site sur les sites de tests (ex : Gtmetrix.com) et le plus important... ACCÉLÉRER VOTRE SITE à merveille !

Remarque : Les codes .htaccess présents dans cet article sont utilisés sur ce site même (easytutoriel.com) et j'ai reçu un gain en temps de chargement allant jusqu'à 30% !

Allons-y !

.htaccess ou comment booster votre site

Les avantages de cet astuce :

Comme vous le savez, l'utilisation de plugins (extensions) de cache sur WordPress ou sur votre CMS peut rendre votre site plus lent si vous n'avez pas un serveur perso ; par contre en utilisant cet astuce consistant à modifier le fichier .htaccess vous n'allez perdre rien en ressources (bande passante, ram, cpu, ...) mais le contraire !

Je m'explique :

• Activer la compression Gzip va diminuer considérablement la bande passante (trafic internet) consommé par les visiteurs et aussi augmenter la vitesse de chargement des pages de votre site compressées via gzip !
• Ajouter les dates d'expirations sur les fichiers statiques (images, css, js, ...) de votre site va améliorer le classement de votre site sur les sites de test (ex : Gtmetrix) et libère une partie de trafic pour les visiteurs qui reviennent visiter votre site.
• Le keep-alive quant à lui il permet d'optimiser la vitesse de chargement des ressources sur une page en gardant la connexion au serveur en mode "persistant" c'est à dire que le serveur va envoyer les ressources d'un seul coup - selon les limites - sans attendre la demande chaque fois du navigateur.

Pour activer la compression Gzip, les dates d'expirations et le keep-alive on doit ajouter/modifier le fichier .htaccess présent sur le dossier principal /public_html.

Les essentiels de l'optimisation d'un .htaccess

1. Activer la compression Gzip

Pour activer la compression Gzip sur une version récente d'Apache vous n'avez qu'à coller ce code à la fin de votre fichier  .htaccess principal (sur /public_html/) :

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml
SetOutputFilter DEFLATE
</IfModule>

Pour savoir la version Apache de votre serveur utilisez la commande telnet suivante sur l'invite de commandes :

telnet www.easytutoriel.com 80

Puis la fenêtre va devenir noir sans rien affiché, tapez cette commande et faites attention aux espaces car vous n'allez pas pouvoir afficher le texte et tapez ENTRER DEUX FOIS.

HEAD / HTTP/1.0

Vous aurez une réponse de ce genre :

Sur Linux voici la commande SSH :

curl --head https://easytutoriel.com/

Ou bien insérez ce code sur un fichier php vierge pour savoir la version du serveur Apache :

<?php phpinfo() ?>

Si vous avez une ancienne version d'Apache (< 1.3) utilisez ce code pour activer le Gzip :

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|xml|txt|css|js)$
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.*
</IfModule>

2. Activer le keep-alive :

Pour activer la connexion persistante ou keep-alive ajoutez ce code à la fin de votre fichier .htaccess :

<IfModule mod_headers.c>
Header set Connection keep-alive
<FilesMatch ".(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

3. Ajouter les dates d'expiration aux fichiers statiques :

Afin d'activer les "expiry headers" ou les dates d'expiration aux données statiques de votre site ajoutez ce code à la fin de votre fichier .htaccess :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 2 week"
ExpiresByType image/jpeg "access 2 week"
ExpiresByType image/gif "access 2 week"
ExpiresByType image/png "access 2 week"
ExpiresByType text/css "access 2 week"
ExpiresByType application/pdf "access 2 week"
ExpiresByType text/x-javascript "access 2 week"
ExpiresByType application/x-shockwave-flash "access 2 week"
ExpiresByType image/x-icon "access 2 week"
ExpiresDefault "access 2 week"
</IfModule>

Comme ça si vous rechargez la même page une deuxième fois, le navigateur ne va pas re-télécharger les fichiers qu'après deux semaines si les fichiers sont encore dans le cache du navigateur !

Le code complet du .htaccess optimisé :

Voici tous les lignes de codes pour les trois méthodes d'optimisation en un seul code, copier/coller à la fin de votre fichier .htaccess :

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml
SetOutputFilter DEFLATE
</IfModule>

<IfModule mod_headers.c>
Header set Connection keep-alive
<FilesMatch ".(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 2 week"
ExpiresByType image/jpeg "access 2 week"
ExpiresByType image/gif "access 2 week"
ExpiresByType image/png "access 2 week"
ExpiresByType text/css "access 2 week"
ExpiresByType application/pdf "access 2 week"
ExpiresByType text/x-javascript "access 2 week"
ExpiresByType application/x-shockwave-flash "access 2 week"
ExpiresByType image/x-icon "access 2 week"
ExpiresDefault "access 2 week"
</IfModule>

Et voilà !

Si vous avez des questions je suis là pour vous aider

Partager cet article :

• Facebook
• X (Twitter)
• LinkedIn
• Pinterest