5.01 - Browser caching

1 - Findings & Impacts

The principle of browser caching can be very beneficial to loading times. Indeed, during the first visit of a site, some of the resources will be saved on the client side, meaning that they will not have to be downloaded again during future visits. Nothing is faster than not having to request an asset at all.

Be careful not to mix up browser caching (client side) with server-side caching (see: CDN).

Right now, you could cache a lot more resources

2 - Recommendations

Declare in the HTTP header 'Expires' a far expiration date for static resources. These resources will then be cached by browsers, which will reduce the amount of resources downloaded for the pages during the next visits pages and visits. The loading of pages will be accelerated.

All static resources are concerned: images, CSS style sheets, JavaScript files, and Flash animations.

General rule of expiration date after the date of the 1st consultation:

• Truly static content (global CSS styles, logos, etc.) - access plus 1 year
• Everything else - access plus 1 week

Example of setup for the mod_expires module for Apache servers in your .htaccess file:

Mod_expires documentation available here: http://httpd.apache.org/docs/2.2/en/mod/mod_expires.html

or

https://varvy.com/pagespeed/leverage-browser-caching.html

Warning

The declaration of a far expiration date implies that the file will no longer be downloaded from the server before this date. The affected files must not be modified, otherwise the changes will not appear to visitors who have already cached these resources. Any modified file must be renamed to avoid this problem. Therefore, we recommend that you include version numbers in your CSS and JavaScript file names (eg 'style-v1.2.css').