Comment activer la mise en cache du navigateur

1

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 OU que vous voulez utiliser Nginx

Le fichier .htaccess n'a plus éffet, il existe un réglage que vous pouvez activer par le plugin 'Nginx-Manager', section 'Content optimizations', voir réglage : Expire /Cache control

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.hosting, 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://support.yoorshop.hosting/knowledgebase/3931/comment-configurer-un-site-avec-nginx-php-fpm.html

voir : Personnalisation de la configuration Nginx