: How do I make a static html page and its resources cacheable? I just ran a pagespeed analysis of my page and came across the following pointer by google pagespeed: Leverage browser caching

@Speyer207

Posted in: #Cache #CacheControl

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:


SEO caching
browser 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.
Minimize churn: some resources are updated more frequently than others. If there is a particular part of resource (e.g. JavaScript function, or set of CSS styles) that are often updated, consider delivering that code as a separate file. Doing so allows the remainder of the content (e.g. library code that does not change very often), to be fetched from cache and minimizes the amount of downloaded content whenever an update is fetched.



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?

Vote Up Vote Down

Login to post a comment!