Generally, there are 3 type of files -
- Cache Forever
- Cache for some time
- Never Cache
Some files can never be cached, and will always fall in the "never cache" bucket. But the biggest performance wins comes from systematically converting files in the second bucket to files that can be cached forever. GWT makes it easy to do this in various ways.
The <md5>.cache.js
files are safe to cache forever. If they ever change, GWT will rename the file, and so the browser will be forced to download it again.
The .nocache.js
file should never be cached. This file is modified even if you change a single line of code and recompile. The nocache.js contains the links of the <md5>.cache.js
, and therefore it is important that the browser always has the latest version of this file.
The third bucket contains images, css and any other static resources that are part of your application. CSS files are always changing, so you cannot tell the browser 'cache forever'. But if you use ClientBundle / CssResource, GWT will manage the file for you. Every time you change the CSS, GWT will rename the file, and therefore the browser will be forced to download it again. This lets you set strong cache headers to get the best performance.
In summary -
- For anything that matches .cache., set a far-in-the-future expires header, effectively telling the browser to cache it forever.
- For anything that matches .nocache., set cache headers that force the browser to re-validate the resource with the server.
- For everything else, you should set a short expires header depending on how often you change resources.
- Try to use ClientBundle / CssResource; this automatically renames your resources to *.cache bucket