Qu'est-ce que la mise en cache du navigateur à effet de levier et comment puis-je l'activer pour mon site web ?

Introduction

Pour comprendre comment Leverage Browser Caching fonctionne, il faut savoir comment fonctionnent le serveur web et le navigateur. Passons brièvement en revue ce processus.

Pour accéder à un site web, vous avez besoin d'un navigateur web comme Google Chrome ou Mozilla Firefox. Un site web est généralement hébergé sur un serveur web qui envoie le contenu au navigateur de l'utilisateur à chaque fois qu'il visite le site. Un site web est créé à l'aide de différents types de fichiers, soit dynamiques comme les fichiers PHP, soit statiques comme le HTML, JS, CSS et les images. Si les pages d'un site web sont petites (quelques Ko), elles se chargent plus rapidement, car le serveur web n'envoie qu'une petite partie du contenu au navigateur. Par contre, si la page est plus grande (3-4 Mo ou plus) et contient beaucoup de ressources statiques, le chargement prend plus de temps.

Leverage Browser Caching

Afin de réduire le temps de chargement des pages volumineuses, il a été décidé d'utiliser un système d'alerte. Leverage Browser Caching qui permet aux navigateurs de télécharger localement certaines ressources statiques des sites web visités. Ce procédé vise à réduire le nombre de requêtes adressées au serveur web lors de la visite d'un site web, ce qui réduit à son tour la quantité de données que votre navigateur doit télécharger. Quel est le résultat ? Le site web se charge plus rapidement.

Le serveur web lui-même - en l'occurrence Apache et son mod_expires - permet d'utiliser la mise en cache du navigateur à effet de levier. Pour activer cette fonction, vous devez modifier vos en-têtes HTTP et définir des délais d'expiration pour les types de fichiers que vous souhaitez utiliser. Cela se fait par le biais de règles que vous insérez dans votre fichier .htaccess.

Créez ce fichier dans le répertoire racine du domaine pour lequel vous souhaitez utiliser Leverage Browser Cache ou ouvrez-le pour le modifier s'il existe déjà. Veuillez copier les lignes suivantes et les coller dans le fichier .htaccess :

# Enabled Expires En-têtes

ExpiresActive sur

# Set Expires Default
ExpiresDefault "accès plus 1 an

# Set Expires En-tête pour cache.
ExpiresByType text/cache-manifest "access plus 0 seconds".

# Votre document html
ExpiresByType text/html "access plus 0 seconds"

# Données
ExpiresByType text/xml "accès plus 0 secondes".
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "accès plus 0 secondes".

# Flux RSS
ExpiresByType application/rss+xml "accès plus 1 heure"
ExpiresByType application/atom+xml "access plus 1 hour"

# Favicon
ExpiresByType image/x-icon "access plus 1 week"

# Media files - images, audio, vidéo
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "accès plus 1 an"
ExpiresByType image/jpeg "access plus 1 an"
ExpiresByType vidéo/ogg "access plus 1 year"
ExpiresByType audio/ogg "access plus 1 an"
ExpiresByType audio/mp3 "access plus 1 year"
ExpiresByType vidéo/mp4 "accès plus 1 an"
ExpiresByType vidéo/webm "accès plus 1 an".

# Fichiers HTC
ExpiresByType texte/x-composant "access plus 1 year"

# Différentes polices web
ExpiresByType application/x-font-ttf "access plus 1 mois"
ExpiresByType police/opentype "access plus 1 mois"
ExpiresByType application/x-font-woff "accès plus 1 mois"
ExpiresByType application/x-font-woff2 "accès plus 1 mois"
ExpiresByType image/svg+xml "access plus 1 mois"
ExpiresByType application/vnd.ms-fontobject "access plus 1 mois"

# CSS et JavaScript
ExpiresByType text/css "accès plus 1 an"
ExpiresByType application/javascript "accès plus 1 an".

Enregistrez le fichier et voilà ! Vous avez maintenant implémenté la mise en cache du navigateur à effet de levier pour votre site web.