Table des matières
Le problème de la mise en cache des éléments statiques
Une analyse de vos pages avec l’outil PageSpeed Insights de Google, qui mesure les Core Web Vitals, peut donner le résultat suivant :
Diffusez des éléments statiques grâce à des règles de cache efficaces
Une longue durée de vie du cache peut accélérer les visites répétées sur votre page.
Les types de cache
Ce message ne sonne pas très précis. Il parle de « cache« , mais duquel ?
Pour bien comprendre, il faut savoir qu’il existe plusieurs types, plusieurs niveaux de cache :
- un cache sur le serveur qui héberge le site, qui concerne les fichiers HTML, CSS et JS
- un cache objet, sur le serveur, qui concerne le résultats de l’exécution de morceaux de code PHP
- un cache navigateur, sur l’ordinateur ou le téléphone de l’internaute, qui concerne tous les types de fichier présents sur une page web
Le message de PageSpeed « Diffusez des éléments statiques grâce à des règles de cache efficaces » concerne en fait uniquement le cache navigateur.
Ce cache navigateur, on peut le paramétrer depuis un site. Chaque site web va donner ses propres instructions au cache navigateur.
Le cache du navigateur permet de stocker localement des ressources statiques pour éviter de les re-télécharger à chaque visite et à chaque changement de page. Cela améliore la vitesse de chargement pour les utilisateurs récurrents et les visiteurs multi-pages.
En clair, les instructions du cache navigateur lui disent : tel fichier sera valide pendant tant de temps, donc fais-en une copie. Si tu le rencontres à nouveau, ne le télécharge pas, utilise ta copie. Sauf si le fichier a changé, dans ce cas télécharge-le à nouveau.
Si certaines ressources n’ont pas de directives de cache ou ont une durée d’expiration trop courte, elles seront rechargées à chaque visite. Ce qui rend les performances pas aussi optimales qu’elles pourraient l’être.
Solutions pour configurer les fichiers statiques dans le cache du navigateur
On peut configurer la mise en cache des fichiers statiques par le navigateur de plusieurs manières :
- par des plugins
- ou à la main
Si votre site n’est pas servi depuis un serveur d’origine, mais depuis un CDN comme CloudFlare, BunnyCDN ou Quic.cloud, vous devrez régler les paramètres du cache navigateur sur ces services, en plus de votre serveur d’origine.
Configurer le cache navigateur par des plugins
Les plugins d’optimisation les mieux conçus permettent de configurer le cache navigateur avec des réglages dans une interface intuitive.
Par exemple LiteSpeed Cache, WP Rocket, W3 Total Cache, le feront volontiers.
Shortpixel le fera pour tous les types de fichiers de type image : PNG, JPG, GIF, WEBP, AVIF, SVG, etc.
Sur LiteSpeed Cache, il suffit d’aller sur la page LiteSpeed > Cache > TTL, et d’indiquer les durées qui vous conviennent. Les réglages par défaut sont corrects.
Configurer le cache navigateur à la main
On peut aussi optimiser les instructions du cache navigateur à la main, ce qui demande un peu plus d’expertise pour faire les bons réglages.
Le code de base dépend du type de serveur web utilisé : Apache ou Nginx.
Pour le savoir, vous pouvez simplement aller sur la page Outils > Santé du site > Informations, dans l’Admin de WordPress.
Sur les serveurs Apache
Ajoutez ce code à votre fichier .htaccess, qui se trouve à la racine du dossier de votre site WordPress :
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
</IfModule>
Ce code dit en gros : quand tu croises des fichiers CSS, JS, images ou polices web, mets-les en cache pendant un an.
Sur les serveurs Nginx
Vous devez éditer votre fichier de configuration Nginx pour y ajouter ceci :
location ~* \.(jpg|jpeg|png|gif|webp|css|js|woff|woff2|svg|ttf|eot|ico)$ {
expires 1y;
add_header Cache-Control "public";
}
Vous pouvez bien sûr éditer ce code selon vos besoins :
- les types de fichiers, définis par leur extension, listés dans location
- la durée d’expiration, ici 1y, 1 year = 1 an
- le header Cache-Control, défini à public
Besoin d’aide ?
Si vous préférez déléguer l’optimisation des performances de votre site, je peux vous aider à régler vos problèmes de Core Web Vitals :
Service d’optimisation des performances
