Leverage Browser Caching

Each time a specific web page is accessed, all the page elements, HTML, CSS, JavaScript, images, etc., must be downloaded from the server. And depending on the page or website, the amount of content can vary drastically. Obviously, larger files and pages with a lot of content are going to take longer to download. And the more files you have, the more requests that need to occur. We have already discussed some methods, like inlining CSS and JavaScript, to improve page load times, but browser caching is another method. Modern browsers can take advantage of caching to store static assets. Developers can set a date on when these assets need to be removed, which can be days or months, but the benefit of caching is that your browser does not have to download all these assets on subsequent future visits, providing for a better, and faster, web experience.

Browser caching also helps reduce workload on the web server, as the browser is now responsible for taking care of some of the heavy lifting and saving these assets locally for future use. PageSpeed recommends reviewing all static assets and setting cache expires dates at a minimum of one month, but no more than a year out. For dynamic assets, it is recommended to cache those resources until they are updated and set a browser fingerprint, which tracks your browsing history and gives other sites information about your browser. This might seem like an invasion of your privacy, but it is really concerned more about your browser settings, rather than specific user information, although serving advertisements is a big part of it.

Not implementing bowser caching has its disadvantages. Your users and visitors will have to pull all the resources and elements from your pages each time, which is not efficient. Continually having the server and browser serving, fetching, and rendering resources each time the page is visited is not ideal from a business or user perspective. It is expensive and ruins the user experience. Each page resource should be evaluated as to whether caching should be carried out, for how long, and by whom. The important thing about modern server frameworks and CDNS, for example, is that a lot of the caching policies are set automatically.

However, not everything is set automatically, so make sure you set your HTTP cache behavior, request, and response headers, as necessary. Depending on the resource being requested, you may set your cache expiry out as far as a year. For content that changes regularly, you may want to set those to expire in less than an hour, or even earlier. Appropriately setting your cache headers (cache-control, expires, etc.) giving you better control over how resources are delivered. Caching provides a better experience for users and removes the burden of having to rely on your web server, and its resources (CPU, memory, network bandwidth, etc.) every time a page is requested. In the next section, we talk about the performance benefits of leveraging proxy caching.