How to leverage browser caching

1

For information, caching server settings (in the client's browser) maximize caching, which does not mean that browsers do not do it natively : they already do it at a certain percentage, so you have to ignore what the testing websites say sometimes. This is easily demonstrated by 'Inspect elements' then 'network', you will see 'disk cache', 'memory cache'

Our servers use Apache server by default, with Nginx over transparent: PROXY. 
In this case, it is through the htaccess file that you can cache the data downloaded by the visitor in his browser, it is a cache technique that prevails over all other possible...

In fact, we have enabled this by default at the apache server in an universal way :

<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>

Various problems :
- if the default settings at the server level are not appropriate, the current settings of your htaccess file will be given priority
- if you do a lot of updating of your website, you may be bothered by the local cache of your own browser, temporarily or permanently disable the cache by your htaccess file with this :
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>

 

When you use mode PHP-FPM with Nginx OR if you want to use Nginx cache rules

The .htaccess file has no effect, there is a setting that you can activate by plugin 'Nginx-Manager', section 'Content optimizations', see setting : Expire /Cache control

This last server-level setting corresponds to this:

# 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";
}

If this last default setting does not suit you, which is the case for example for the site yoorshop.hosting, we use this :

# 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 "*";
}


There is a possibility to customize it :
- disable 'set expires header' by the 'Nginx-Manager' plugin, section 'Application settings'
- proceed as indicated at the bottom of our article:
https://support.yoorshop.hosting/knowledgebase/3931/How-to-configure-a-site-with-NGINX-PHP-FPM.html 
See : Customize Nginx configuration