Comment activer la mise en cache du navigateur


Pour information, les réglages serveur de mise en cache (dans le navigateur du client) maximisent la mise en cache, ce qui ne veut pas dire que les navigateurs ne le font pas nativement : en effet, ils le font déjà à un certain pourcentage, donc il faut ignorer ce que disent les sites de tests parfois. Ceci est facilement démontrable par 'Inspect elements' puis 'network', vous verrez 'disk cache', 'memory cache'

Nos serveurs utilisent le serveur Apache par défaut, avec Nginx par dessus en mode transparent : PROXY
Dans ce cas, c'est par le fichier htaccess que vous pouvez mettre en cache les données téléchargées par le visiteur dans son navigateur, c'est une technique de cache qui prévaut sur toutes les autres possibles...
De fait, nous avons activé ceci par défaut au niveau du serveur apache de cette manière universelle :

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 week
ExpiresByType image/jpeg "access plus 1 week
ExpiresByType image/jpg "access plus 1 week
ExpiresByType image/png "access plus 1 week
ExpiresByType text/css "access plus 1 week
ExpiresByType text/html "modification plus 1 week"
ExpiresByType text/xml "modification plus 2 hours"
ExpiresByType text/javascript "access plus 1 week
ExpiresByType application/javascript "access plus 1 week
ExpiresByType application/x-javascript "access plus 1 week
ExpiresByType image/x-icon "access plus 1 week
ExpiresByType application/x-shockwave-flash "modification plus 1 week"
ExpiresByType image/svg+xml "access plus 1 week
ExpiresByType image/vnd.microsoft.icon "access plus 1 week
ExpiresByType application/font-woff "access plus 1 week
ExpiresByType application/x-font-woff "access plus 1 week
ExpiresByType application/vnd.ms-fontobject "access plus 1 week
ExpiresByType font/opentype "access plus 1 week
ExpiresByType font/ttf "access plus 1 week
ExpiresByType font/otf "access plus 1 week
ExpiresByType application/x-font-ttf "access plus 1 week
ExpiresByType application/x-font-otf "access plus 1 week
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpeg|jpg|svg|png|gif|css|gz|swf|eot|woff|otf|ttf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=604800, private"
</FilesMatch>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi|htm|html)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>

<IfModule mod_headers.c>
Header set Vary "Accept-Encoding, X-HTTP-Method-Override, X-Forwarded-For, Remote-Address, X-Real-IP, X-Forwarded-Proto, X-Forwarded-Host, X-Forwarded-Port, X-Forwarded-Server"
</IfModule>

Divers problèmes :
- si les réglages par défaut au niveau serveur ne conviennent pas, ce sont les réglages présents de votre fichier htaccess qui seront prioritaires
- si vous faîtes beaucoup d'actualisation de votre site web, vous pouvez être gêné par le cache local de votre propre navigateur, désactivez temporairement ou de manière permanente le cache par votre fichier htaccess avec ceci :
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>


Lorsque vous êtes en mode PHP-FPM avec Nginx

Le fichier .htaccess n'a plus éffet, il existe un réglage que vous pouvez activer par le plugin 'Nginx-Manager', section 'Application settings' : 'set expires header'.

Ce dernier réglage au niveau serveur correpond à ceci :

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff|woff2)$ {
expires 16d;
access_log off;
add_header Cache-Control "public";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
expires 16d;
add_header Cache-Control "public";
}

Si ce dernier réglage par défaut ne vous convient pas, ce qui est le cas par exemple pour le site yoorshop.fr, nous utilisons ceci :

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc|woff2)$ {
expires 7d;
access_log off;
add_header Cache-Control "public";
add_header Access-Control-Allow-Origin "*";
}

# CSS and Javascript
location ~* \.(?:css|js)$ {
expires 7d;
add_header Cache-Control "public";
add_header Access-Control-Allow-Origin "*";
}

Il existe donc une possibilité de le personnaliser :
- désactiver 'set expires header' par le plugin 'Nginx-Manager', section 'Application settings'
- procédez comme indiquer au bas de notre article :
https://hosting.yoorshop.fr/knowledgebase/3931/comment-configurer-un-site-avec-nginx-php-fpm.html
voir : Personnalisation de la configuration Nginx

Consultez aussi

Critères de classement Google

Information ou rappel, il est important de garder en tête la trame de la façon dont Google classe...

Optimisation avec PageSpeed

PageSpeed est désactivé par défaut au niveau minimum : CoreFilters(Il y a un cache interne qui...

Comment optimiser la rapidité d'affichage de WordPress ?

Pour avoir un site qui s'affiche rapidement, et donc vendre de manière optimale, il faut...

Activation du cache nginx

Nous avons la version micro-caching avec une courte durée de 5 minutes et la version cache pur...

Optimisation bases de données

Nous utilisons les serveurs MariaDB qui est une très bonne évolution des serveurs MySQL, et ne...

Besoin d'autre suggestions