Plus votre page charge vite, mieux c’est. Le Page Speed n’est pas seulement un critère de classement, il est aussi responsable d’une expérience utilisateur positive et de vos conversions.
C'est pourquoi il est d'autant plus important que vous permettiez une construction rapide de votre page web. La mise en cache du navigateur est un moyen de booster votre vitesse de chargement : découvrez ici ce que vous devez savoir à ce sujet.
Durant la mise en cache, les données sont chargées dans un petit cache, qu’on peut se représenter comme une mémoire tampon. Les données du cache n'ont plus besoin d'être rechargées dans diverses applications lorsqu'elles sont nécessaires (que ce soit sur desktop, smartphone ou tablette). Le cache peut ainsi augmenter la vitesse de chargement des programmes informatiques ainsi que des sites web.
La mise en cache peut se faire aussi bien sur le serveur que dans le navigateur. Lorsque le serveur crée un cache, cette mémoire tampon est également stockée sur le serveur. Ces fichiers ne sont alors pas rechargés à chaque fois qu'un navigateur envoie une requête au serveur. De cette façon, les requêtes aux bases de données peuvent être protégées et vous économisez en même temps sur le volume de données et les ressources.
Une fois le cache du serveur créé, le contenu préchargé est disponible pour tous les utilisateurs accédant à votre site. Cependant, si vous modifiez le contenu ou les fichiers de votre site web, vous devrez également renouveler le cache du serveur. La mise en cache côté serveur peut être constituée de pages HTML complètes.
Avec la mise en cache du navigateur, les données, comme le nom l'indique déjà, ne sont pas mises en cache sur le serveur, mais dans le navigateur de l'utilisateur. Il s'agit généralement de ressources statiques qui ne changent pas lorsque vous accédez à différentes pages de votre site Web, comme les fichiers CSS ou JavaScript.
Les navigateurs web peuvent mettre en cache non seulement des formulaires, des mises en page ou des vidéos mais aussi des cookies ou d'autres fichiers tels que les noms de connexion. La mise en cache du navigateur est particulièrement utile lorsque les visiteurs reviennent ou visitent de nombreuses URL sur votre site. Les éléments statiques sont alors disponibles dans le navigateur et n'ont pas besoin d'être rechargés à chaque fois. Cela protège également votre serveur et augmente la vitesse de votre site web en même temps.
La mise en cache du navigateur a cependant un inconvénient : si un utilisateur supprime le cache de son navigateur, les données créées seront perdues. Elles devront être rechargées la prochaine fois qu'il visitera votre site.
Si vous voulez utiliser la mise en cache du navigateur, vous pouvez l'activer avec de nombreux CMS via un plugin ou vous pouvez utiliser le fichier .htaccess.
La mise en cache du navigateur peut être activée via des plugins ou des extensions pour de nombreux CMS. Les plugins possibles pour la mise en cache du navigateur avec WordPress sont par exemple :
Si vous voulez activer la mise en cache du navigateur à partir du fichier .htaccess de votre serveur Web Apache, vous avez deux modules à démarrer. Les instructions correspondantes sont stockées dans le fichier .htaccess, qui est chargé par votre serveur à chaque fois que vous accédez à la page.
mod_headers
Généralement, mod_headers est déjà activé sur la plupart des serveurs Web gérés. Sinon, le module doit d'abord être démarré par l'administrateur du serveur. La commande est la suivante :
a2enmod headers
/etc/init.d/apache2 restart
Les types de fichiers à charger dans le cache du navigateur sont ensuite définis. Les informations sont soit insérées dans un fichier .htaccess existant, soit enregistrées dans un nouveau fichier.
<IfModule mod_headers.c>
<FilesMatch “\.(gif|ico|jpeg|jpg|png|css|js)$”>
Header set Cache-Control “max-age=604800, public”
</FilesMatch>
</IfModule>
Le navigateur reçoit maintenant des instructions pour sauvegarder les types de fichiers entre parenthèses pendant un certain temps (max-age). Dans cet exemple, ce sont 2 592 000 secondes, soit 30 jours.
Vous pouvez également définir une durée d'exécution de cache différente pour chaque type de fichier. Dans ce cas, ajoutez une autre ligne avec <FilesMatch....> </FilesMatch> et entrez-y le type de fichier et la durée d'expiration souhaités.
<IfModule mod_headers.c>
<FilesMatch „\.(gif|jpg|jpeg|png)$“>
Header set Cache-Control „max-age=604800, public“
</FilesMatch>
<FilesMatch „\.(css|js)$“>
Header set Cache-Control „max-age=2592000, public“
</FilesMatch>
</IfModule>
Dans ce cas, CSS et JavaScript sont chargés dans le cache du navigateur pour un maximum de 30 jours, les fichiers images tels que gif et jpg pour une semaine (= 604 800 secondes).
mod_expires
Habituellement, ce module est déjà activé sur votre serveur. Si ce n'est pas le cas, il peut être démarré avec cette commande :
a2enmod expires
/etc/init.d/apache2 restart
Le fichier .htaccess peut être complété ensuite avec les lignes suivantes :
## Cache Expiration ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg „access plus 1 year“
ExpiresByType image/jpeg „access plus 1 year“
ExpiresByType image/gif „access plus 1 year“
ExpiresByType image/png „access plus 1 year“
ExpiresByType text/css „access plus 1 month“
ExpiresByType text/html „access plus 1 month“
ExpiresByType application/pdf „access plus 1 month“
ExpiresByType text/x-javascript „access plus 1 month“
ExpiresByType application/x-shockwave-flash „access plus 1 month“
ExpiresByType image/x-icon „access plus 1 year“
ExpiresDefault „access plus 1 month“
</IfModule>
## Cache Expiration
L'« instruction IF » garantit que les fichiers expirent lorsque le « module expires » soit activé. La mention « access plus .... » indique l'heure d'expiration du type de fichier correspondant. Elle peut être modifiée individuellement.
La mise en cache du navigateur peut être utilisée pour différents fichiers. La mise en cache des types de fichiers suivants est possible :
Avec l'analyse d'une seule page, vous pouvez vérifier si la mise en cache du navigateur est activée sur votre site Web. Vous démarrez la vérification dans l'outil Website Success de Ryte. Saisissez ensuite l'URL de votre site Web dans la barre de recherche et cliquez sur « Analyse d'une page ». Si la mise en cache du navigateur n'est pas activée, vous recevrez un avertissement.
Illustration 1 :Vérifier la mise en cache avec l'analyse d'une page individuelle avec Ryte Website Success
Vous pouvez également vérifier si la mise en cache du navigateur est activée sur votre site Web à l'aide de Google PageSpeed Insights. Avec cet outil, vous pouvez tester la vitesse de chargement de vos sites Web. Il vous donnera des conseils d'optimisation après le test. La mise en cache du navigateur fait partie de ces conseils.
Illustration 2 : Contrôler la mise en cache avec l'outil Page Speed Insights de Google
La mise en cache du navigateur est une méthode pratique pour améliorer les performances de votre site Web. En même temps, cette optimisation peut réduire considérablement la charge de votre serveur pour de nombreux visiteurs puisque les fichiers fréquemment utilisés sont chargés dans le cache du navigateur respectif. En principe, la mise en cache du navigateur convient aux sites Web de n'importe quelle taille et peut être mise en œuvre avec relativement peu d'effort. Il n'y a donc pas d'excuse pour ne pas optimiser son site Web à ce niveau-là.
Utilisez-vous correctement la mise en cache sur votre site web ?
Écrit le 13.08.2018 par Philipp Roos.
En tant que membre de la famille élargie d’Ryte, Philipp apporte régulièrement son soutien et son expertise au Ryte Magazine. Cet ancien étudiant en littérature allemande se réjouit chaque jour que l’époque des textes bourrés de mots-clés invisibles pour de meilleurs classements est enfin révolue..
Suivi, analyse et optimisation de vos actifs numériques grâce à notre technologie unique
S’inscrire gratuitement
Pingback: Comment devenir un développeur web éco‑responsable ? — Maxime Emorine - Blog()