Accélérer son site web grâce à la mise en cache du navigateur !
Accélérer son site web grâce à la mise en cache du navigateur
Bien débuter son référencement WordPress
17/11/2015
Comment obtenir un lien DoFollow d’un domaine à forte autorité
23/11/2015

Accélérer son site web grâce à la mise en cache du navigateur

Quand vous naviguez sur un site internet, votre navigateur (Firefox, Google Chrome, Safari, Internet Explorer, etc) charge en mémoire différents éléments pour que les pages s’affichent : les images, le logo, les textes, le css, le script Javascript, etc. Mais à chaque nouvelle page consultée, de nombreux éléments du site ne changent pas. Par exemple, le logo tobecom en page d’accueil est le même sur toutes les pages, nous allons voir aujourd’hui comment accélérer son site web en exploitant la mise en cache du navigateur.


Le cache du navigateur est une sorte de mémoire qui va sauvegarder sur le PC du visiteur un certain nombre d’éléments de la page pour ne pas avoir à les charger de nouveau ensuite pendant une durée déterminée, au lieu d’aller rechercher les éléments sur le serveur web hébergeant le site web, il va aller les chercher sur le poste en local, le site chargera donc beaucoup plus vite.

Lorsqu’un visiteur arrive sur la page d’accueil pour la première fois, il va alors mémoriser le logo, les photos, les icônes des réseaux sociaux, les fichiers CSS et Javascript qui détermine le design du site internet, etc. Quand il visitera une seconde page, le navigateur aura simplement à télécharger les nouveaux éléments qui n’étaient pas sur la page d’accueil.

Activer la mise en cache du navigateur grâce au fichier .htaccess

Il suffit de vous connecter à votre FTP (là où vous envoyez les fichiers lors de la création de votre site internet quand vous l’avez installé), vous devez voir dans le dossier où est installé le site (à la racine de votre site) un fichier « .htaccess ». Il va falloir le modifier. Pensez à en faire une copie avant toute modification,on ne sait jamais. En cas de problème, vous pourrez alors remettre en ligne l’ancienne version.

Nous allons donc ajouter dans le .htaccess des règles qui diront aux navigateurs : « Vous devez mémoriser ces informations/fichiers pendant tant de temps ». Je vais donc vous donner un petit bout de code à copier/coller 🙂 . A la fin de votre fichier .htaccess, ajoutez le code ci-dessous :


<IfModule mod_expires.c>
 ExpiresActive on
 ExpiresDefault "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 year"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType video/mp4 "access plus 1 month"
 ExpiresByType text/x-component "access plus 1 month"
 ExpiresByType font/truetype "access plus 1 month"
 ExpiresByType font/opentype "access plus 1 month"
 ExpiresByType application/x-font-woff "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
 ExpiresByType text/css "access plus 1 year"
 ExpiresByType application/javascript "access plus 1 year"
 ExpiresByType text/javascript "access plus 1 year"
 ExpiresByType text/js "access plus 1 year"
 ExpiresByType application/x-javascript "access plus 1 year"
 </IfModule>

Que signifie donc ce code ? On définit une date d’expiration en fonction du type de fichier, le « ExpiresByType ». Relisez chaque ligne de droite à gauche. On demande au navigateur : « A partir du moment où le lecteur accède à la page pour la première fois (access) et pendant cette durée (1 month = 1 mois, etc), il faut mémoriser tel type de fichier (par exemple, une image .png ou .jpg, une vidéo au format .mp4).

accelerer son site web

Ce site web est accéléré grâce à la mise en cache du navigateur !

Les durées qui sont dans le code ci-dessus sont des durées standards qui conviennent à la plupart des sites internet. Je dirais a même chose pour les types de fichiers, les formats d’image les plus utilisés y sont inclus (jpg, gif, png), les vidéos mp4, les polices d’écriture standard, les feuilles de style CSS, les fichiers Javascript. Je vous invite bien entendu à compléter la liste en fonction de vos besoins.


Les limites de la mise en cache du navigateur

Vous l’aurez compris, la méthode ne fonctionne que pour un visiteur qui revient deux fois ou plus sur le site, ou qui navigue sur plusieurs pages. En effet, lors de la toute première visite, le navigateur est forcé de télécharger tous les éléments de la page avant de décider lesquels il doit mémoriser, mais il s’agit bien d’accélérer son site web pour les visiteurs « qualifiés » et intéressés.

Autre limitation, utiliser le cache signifie qu’en cas de changement, vous ne le verrez pas apparaître immédiatement car le cache aura mémorisé l’ancienne version de la page ou du fichier en question (notamment les images). Les navigateurs proposent cependant une option pour vider le cache, par exemple, en faisant un CTRL+F5 sur une page.


Accélérer son site web, parfaire son référencement SEO

Il s’agit là d’une recommandation de Google, donc mettre en place la mise en cache du navigateur favorisera votre référencement SEO naturel, dans tous les cas cela ne coûte rien et cela ne prend que quelques minutes 😉

N’hésitez pas si vous avez des questions, vous pouvez nous contacter ici.

Guillaume Guersan
Guillaume Guersan
Fondateur de l'agence de de communication tobecom, spécialisée dans le Marketing Digital, je suis un passionné d'informatique, de nouvelles technologies et donc de Marketing Numérique. Plus précisément : WordPress, le Référencement Naturel SEO, Le SEA ainsi que les Réseaux Sociaux.

3 Comments

  1. Ju dit :

    Bonjour,

    Je suis sur Blogger (oui oui, blogueuse débutante !) est ce que je dois rajouter votre code à mon code HTML ? comment faire pour savoir ou l’intégrer (je voudrais pas tout planter !) en tout cas, merci pour ces conseils bien pratiques, votre blog est une mine d’or pour une novice comme moi !
    Ju

    • Guillaume Guillaume dit :

      Bonsoir Ju, alors malheureusement impossible d’adapter ce conseil sur un blog « blogger » car vous n’avez pas accès au fichier .htaccess du serveur :-/ vous pourriez envisager cette action si vous migrez votre blog vers un hébergement vous appartenant.

      • Ju dit :

        Bonjour Guillaume,

        Je vais prochainement acheter mon nom de domaine sur ovh et l intégrer à Blogger (si j y arrive !) ca sera possible ou c est vraiment le fait de travailler sur Blogger qui pose problème ? (J ai du mal à faire la différence entre nom de domaine et hébergement )

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *