What is application cache?
- The application cache is used to store and retrieve web resources.
- Loading resources from the cache is faster and more effective than loading from the network.
In the illustration above, the application cache is checked for a resource. The resource was not found and the browser then needed to go to the network to download the resource.
The benefit of caching
When a resource is cached, there is no need to download it from the network. This means it can be loaded almost instantly as no downloading, network issues or remote server issues can affect the download because is is already downloaded and ready to be used.
In the above image a browser checks the cache for a resource. The resource is found. There is no need to go to the network for this resource as the browser already has it.
How do resources get into the application cache?
When a browser visits a webpage it will either load the webpage resources into the cache or it will not.
The deciding factor is defined by the server providing the resource.
If the server has enabled browser caching the resource will be cached by the browser. If it has not, the browser will not cache the resource.
Leverage browser caching
When a webmaster decides they want certain types of resources to to be cached, they can instruct to browser 1 to do so. This process is often called "Leveraging browser caching".
Application cache role during a pageload
Browsers will check the application cache for every request made.
How to optimize the application cache
The best way to optimize for this is to leverage browser caching.
When webmasters are properly defining caching, their webpages will load significantly faster on repeat visits to the same page or to other pages which use the same resources as a previously visited page (like logos, css, etc.).
An application cache will not have any resources cached when it first encounters a webpage (first view).
Example of optimizing resources for caching
When used wisely caching can provide much faster pages for users. Some general example are...
- CSS delivery - Using one general CSS file for all pages of a webpage (while inlining small page specific CSS on each page).
- Javascript libraries - Always use the same version of a library like jQuery. Consider calling your jQuery from a source likely to already be cached such as Google hosted libraries.
- Consider image usage carefully and strategically. Often images are used several times throughout a website. Consider using long expire times for image resources.
by