Home > Learning Center > Performance > Browser Cache 

Browser Cache

What is Browser Caching

Browser caching involves a visitor’s browser downloading your website’s resources, (e.g., HTML files, JavaScript files and images) to their local drive. This speeds up page load times during subsequent visits and reduces bandwidth usage.

The process is governed by a browser’s internal cache policy, which indicates the resources that are to be cached and for what period of time. As a website owner, you have some amount of control over this policy through HTTP cache headers, namely the Cache-Control and Etag headers.

Cache-Control has several parameters, including Time to Live (TTL), which you can use to define how long a resource is stored in a browser cache before expiring.

The Etag header allows you to identify a specific version of a resource, e.g., Etag: "pub1259380237;gz". When the browser receives an Etag header, it’s checked against the Etag value in a cache. A match indicates that a resource can load from a local (browser) cache. Otherwise, the requested resource needs to be downloaded again from the server.

Browser Caching vs Proxy Server Caching

Proxy server caching differs from browser caching in that website resources are stored in intermediate servers, instead of on your visitors’ local drives. This results in a single cached resource copy being served to multiple visitors. Freshness is assured through the server’s caching policy and relies on periodic communication between the proxy and origin server.

communication between the proxy and origin server

For example, when a visitor accesses a blog with a header image, the proxy server looks for the image in its cache. If it’s the first time that the image is accessed, the server needs to request it from the origin. The next time the article is accessed from the proxy server – by any visitor – the image will already be available in the proxy cache.

While a browser cache is almost completely controlled by a user, and can be deleted or modified at will, proxy server caching occurs on the CDN side. This provides you with a higher degree of control and flexibility as to which resources are cached and how often—including through software that uses intelligent algorithms to track resource usage and identify opportunities to cache dynamically generated content.

It’s best practice to regulate both browser caching and proxy caching. The proxy cache can help in more complex scenarios, such as handling dynamic or frequently-updated resources; when a resource has expired; or when the browser cache has been cleared. While enterprises can manage their own proxies, most find it easier to offload caching and other content delivery tasks to CDNs.

How CDNs Simplify Caching

Managing cache policies in a proxy server often involves meticulously tagging file types, or even individual files, which can be time consuming and error-prone.

CDNs simplify the process by providing a single dashboard that allows administrators to override cache header directives as needed, with granular control over specific files and file types.

As mentioned, CDNs also optimize the process of dynamic content delivery by allowing some dynamically generated objects to be cached using machine learning and other advanced automation techniques. These capabilities make it easier for you to optimize both proxy and browser (in as much as is possible) side caching and speed up the delivery of content to users.