I just ran a pagespeed analysis of my page and came across the following pointer by google pagespeed:
Leverage browser caching
Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.**
I came acrosss few articles that did speak about caching:
There is also a small article provided by Google here. In the article the following steps are mentioned:
- Use consistent URLs: if you serve the same content on different URLs, then that content will be fetched and stored multiple times. Tip: note that URLs are case sensitive!
- Ensure the server provides a validation token (ETag): validation tokens eliminate the need to transfer the same bytes when a resource has not changed on the server.
- Identify which resources can be cached by intermediaries: those with responses that are identical for all users are great candidates to be cached by a CDN and other intermediaries.
- Determine the optimal cache lifetime for each resource: different resources may have different freshness requirements. Audit and determine the appropriate max-age for each one.
- Determine the best cache hierarchy for your site: the combination of resource URLs with content fingerprints, and short or no-cache lifetimes for HTML documents allows you to control how quickly updates are picked up by the client.
I am still confused after reading that. Do I need to define something in my css style sheet to make it cachable, or do I need to define something in my HTML to make it cachable? How do I make an html, css or js file used in an html file cachable and where do I define the time that a file should be cachaed for?