WordPress

Comment accélérer votre site WordPress grâce au cache du navigateur

28 août 2015

Comment accélérer votre site WordPress grâce au cache du navigateur

Vous n’êtes pas sans ignorer que depuis quelques temps, Google, et les autres moteurs de recherche, utilisent le temps de chargement de votre site comme un paramètre SEO important, et si votre site n’est pas assez rapide, même si vous avez de nombreux visiteurs réguliers, votre site n’apparaîtra pas dans les premières pages des classements de recherches.

Pour accélérer le temps de chargement de vos pages, nous allons voir comment utiliser l’effet de levier du cache du navigateur de vos visteurs, et rendre ainsi votre site plus rapide. En tirant parti de ce cache, vous pouvez augmenter considérablement la vitesse de votre site .

Accélérer WordPress grâce au cache du navigateur

Comment accélérer votre site WordPress grâce au cache du navigateur

Comme Google considère que la vitesse d’un site est un paramètre SEO très important, les propriétaires de sites ont tout intérêt à mettre à profit le cache du navigateur, pour améliorer la vitesse de leur site et obtenir un meilleur classements dans les résultats des recherches.

Trois étapes, simples à mettre en oeuvre, suffisent pour tirer pleinement partie du cache du navigateur.

Se débarrasser de ETag

Tout d’abord, nous devons désactiver l’étiquette d’entité ETag, puisque nous allons utiliser la commande Expires. La technologie ETag est connue pour être lente et problématique – même YSlow, le système d’analyse de pages web, s’en plaint.

Attention: Avant toutes modifications du fichier .htaccess faites une copie de sauvegarde de ce fichier.

La première chose à faire est d’ajouter le code ci-dessous à votre fichier .htaccess (situé à la racine de blog) :

Header unset Pragma
FileETag None
Header unset ETag

Pourquoi le cache du navigateur?

Si vous définissez une date d’expiration ou un âge maximum pour les ressources statiques de votre site, dans les entêtes HTTP, les navigateurs modernes vont charger en priorité les ressources statiques téléchargées précédemment, comme les images, les fichiers CSS, Javascript, PDF, SWF, etc. à partir du disque local, celui de l’utilisateur, plutôt que sur le réseau, occasionnant un temps de chargement plus court.

Donc, si vous configurez votre serveur web pour appliquer les entêtes de mise en cache à toutes les ressources statiques, votre site se chargera beaucoup plus vite.

Attention: Avant toutes modifications du fichier .htaccess faites une copie de sauvegarde de ce fichier.

Ajoutez à présent le code ci-dessous dans le fichier .htaccess de votre site:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Ce code indique au navigateur que les images au format Jpg, Jpeg, Gif, Png et les icônes ont une durée de validité d’un an, que les fichiers CSS, Html, Pdf, Javascript et Flash ont une durée de validité d’un mois, et pour finir, que tous les autres fichiers sont définis comme n’ayant une durée de validité que d’un mois.

Durant la période de validité, le navigateur affichera les fichiers existants depuis le disque de l’utilisateur, accélérant d’autant la durée de chargement de vos pages.

Si vous avez des problèmes, assurez-vous que mod_expires est chargée dans votre configuration Apache, en cas de doute, voyez avec votre hébergeur.

Compressez les données

Compresser des éléments finit toujours par les rendre plus petits et permet de les charger plus rapidement, de sorte que la mise en œuvre d’une certaine forme de compression sur vos éléments est un must.

Cette étape d’optimisation pourrait ne pas fonctionner, si votre serveur n’a pas mod_deflate ou mod_gzip installé dans le cadre d’Apache. En cas de doutes, voyez avec votre hébergeur.

A présent, ajoutez les deux parties de code ci-dessous à votre fichier .htaccess.

Attention: Avant toutes modifications du fichier .htaccess faites une copie de sauvegarde de ce fichier.

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
<IfModule mod_gzip.c>
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.*
</IfModule>

Et voilà, vous venez d’accélérer le chargement de votre site, en tirant profit du cache du navigateur de vos lecteurs, sans que ceux-ci s’en rendent compte. Il serait vraiment bête de ne pas profiter d’une telle aubaine pour économiser quelques centièmes de seconde, voire même une ou deux secondes pour les sites faisant appel à de nombreux éléments graphiques.

Avez vous déjà utilisé la technique de cache du navigateur pour accélérer votre site? Qu’en pensez vous? Votre expérience intéressera nos lecteurs.

séparateur de texte

Cet article vous a intéressé? Partagez le, il intéressera probablement d’autres personnes. Merci!

2 commentaires
  1. Rosa

    Merci pour ce tuto facile à suivre. Mais j'ai une question, est-ce qu'on peut l'utiliser alors qu'on utilise un plugin de cache comme wp-super-cache ?

  2. Hubert

    Bien sûr le même principe est applicable avec d'autres plugin de cache.

Laisser un commentaire

You have to agree to the comment policy.

-20% sur ElegantThemes.com Maintenant !Cliquez-ici !
+