Exploring the Ins and Outs of CDN Cache

By Brian Jackson

Updated on February 22, 2022

One of the biggest benefits from using content delivery networks (CDNs) is that they cache your files on global CDN servers, also known as edge servers, to ensure fast delivery to your visitors. When your browser requests a file from the CDN, it retrieves it from the cached version on the edge server. If the file is found it is delivered immediately, otherwise the CDN will "pull" the file from your origin server, cache it, and then deliver it. Today we want to explore more about the ins and outs of CDN cache and explain a little more about how exactly it all works.

CDN proxy caching

You have probably heard or are familiar with the term proxy. CDNs like KeyCDN basically use proxy technology on a massive scale. This means that a server is acting as an intermediary between the client and the original web server. The edge servers are essentially proxy caches. Here is an example of what happens when a visitor comes to your website.

Visitor comes to your website and requests a file from the CDN.
The CDN then checks to see if it's in cache.
If the content hasn't expired it is then served directly from the edge server to the client (HIT).
If the content is not in the cache or expired, the edge server makes a request to the origin server to retrieve it (MISS).

If the content is present and delivered from the edge server (CDN) cache the "X-Cache" HTTP header will indicate a HIT. If the content is expired or not present this triggers a MISS. This can easily be checked with the "curl" command on any Linux/Unix machine with the following command.

**curl -I https://example-hexid.kxcdn.com/img/logo.png**
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 02 Nov 2016 04:48:02 GMT
Content-Type: image/png
Content-Length: 6396
Connection: keep-alive
Vary: Accept-Encoding
Last-Modified: Sat, 26 Apr 2016 12:11:29 GMT
ETag: "535ba271-18fc"
Alternate-Protocol: 443:npn-spdy/3,443:npn-spdy/2
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
Expires: Sun, 09 Nov 2016 04:48:02 GMT
Cache-Control: max-age=604800
Link: <https://www.keycdn.com/img/logo.png> rel="canonical"
**X-Cache: MISS**
X-Edge-Location: nlam
Access-Control-Allow-Origin: *
Accept-Ranges: bytes

Alternatively, you can use a tool like Google Chrome DevTools to check the HTTP headers.

In the KeyCDN dashboard you can see what we call the Cache Hit Ratio (CHR). This number gives precise information about the amount of files served from the CDN without any request to the origin server. Read our more in-depth post on Cache Hit Ratio.

Origin server to edge server CDN cache

When you are using a CDN like KeyCDN you have the ability to modify the Cache-Control HTTP cache header, which is a set of modern directives that allow you define when and how a response should be cached and for how long. This cache header has different directives, some of them directly affect the edge server cache, and some only affect the client's browser cache.

Max Expire (edge server)

The directive Max Expire specifies the maximum time for which cacheable HTTP data will be retained on KeyCDN's edge servers without checking the origin server. Applies only if not defined by the origin either by X-Accel-Expires, Cache-Control, or Expires (precedence in that order). This can be set within the KeyCDN dashboard.

Ignore Cache Control (edge server)

Ignore Cache Control disables the processing of Cache-Control response header fields from the origin server (ignores X-Accel-Expires, Cache-Control, and Expires). It is important to note that the Max Expires setting has precedence if Ignore Cache Control is enabled. This can be enabled within the KeyCDN dashboard by going to the Zone settings.

Edge server to client browser cache

Expire (browser cache)

The parameter Expire adds or modifies the Expires and Cache-Control response header fields that are sent to the client if the response code equals 200, 201, 204, 206, 301, 302, 303, 304, or 307. This setting overwrites the value received from the origin in case of a Pull Zone. The Expire value has only an impact on the web browser cache and not the edge server cache. This directive is explicitly between the edge server and the client.

The following cases apply to this parameter if it has these values:

-1 Cache-Control: no-cache
0 Push Zone: disabled / Pull Zone: as received from the origin (header honoring)
>0 Cache-Control: max-age=_t_, where t is the time specified in the directive in minutes converted to seconds

Example can be seen below with the Expire setting set to 1440 (value in minutes that equals 1 day):

curl -I https://example-hexid.kxcdn.com/img/logo.png
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 02 Nov 2016 04:48:02 GMT
Content-Type: image/png
Content-Length: 6396
Connection: keep-alive
Vary: Accept-Encoding
Last-Modified: Sat, 26 Apr 2016 12:11:29 GMT
ETag: "535ba271-18fc"
Alternate-Protocol: 443:npn-spdy/3,443:npn-spdy/2
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
**Expires: Sun, 09 Nov 2016 04:48:02 GMT**
**Cache-Control: max-age=86400**
Link: <https://www.keycdn.com/img/logo.png>; rel="canonical"
X-Cache: MISS
X-Edge-Location: nlam
Access-Control-Allow-Origin: *
Accept-Ranges: bytes

The max-age value reflects the Expire setting value in seconds (86400 sec = 1440 min).

ETag (browser cache)

The ETag HTTP header is another validator used when checking your assets. The web browser provides the ETag token automatically within the "If-None-Match" HTTP request header. The server then checks tokens against current assets in the cache. A 304 Not Modified response will tell the browser if an asset in the cache hasn't been changed and therefore allowing a renewal for another 90 seconds. It's important to note that these assets don't need to be downloaded again which saves bandwidth and time. KeyCDN servers fully support and deliver the ETag headers as seen below.

curl -I https://example-hexid.kxcdn.com/img/logo.png
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 02 Nov 2016 04:48:02 GMT
Content-Type: image/png
Content-Length: 6396
Connection: keep-alive
Vary: Accept-Encoding
Last-Modified: Sat, 26 Apr 2016 12:11:29 GMT
**ETag: "535ba271-18fc"**
Alternate-Protocol: 443:npn-spdy/3,443:npn-spdy/2
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
Expires: Sun, 09 Nov 2016 04:48:02 GMT
Cache-Control: max-age=86400
Link: <https://www.keycdn.com/img/logo.png> rel="canonical"
X-Cache: MISS
X-Edge-Location: nlam
Access-Control-Allow-Origin: *
Accept-Ranges: bytes

There is also the Last-Modified directive but is has been seen as legacy validator from the time of HTTP/1.0. Read our more in-depth posts on Cache-Control and our guide on HTTP Cache Headers.

Origin Shield - Extra layer of CDN cache

Origin Shield is an exciting feature that KeyCDN provides free of charge to all of its customers! It is basically an extra caching layer which will reduce the load on your origin server even further.

First request with Origin Shield

Here is an example of what happens on the first request to your origin server.

Following requests with Origin Shield

After the first request, the following requests for the same content are served out of cache without requesting additional data from your origin server.

The Origin Shield feature is available within the KeyCDN dashboard by going to the Zone settings. Predefined shield servers, instead of our edge servers, will pull the content from your origin server if enabled. This will reduce the traffic on your origin server but adds an additional request from the edge server to the shield server if the content has not yet been cached. The following HTTP response header field is added when this setting is enabled: X-Shield: active.

What types of content does a CDN cache?

A content delivery network can cache all types of content, typically it is static content. Some popular CDN providers don't cache files like .mp3, .mp4, .zip, or .rars, but KeyCDN does! Here is a list of some (not all) of the common file types that KeyCDN caches.

Images: .png, .jpg, .svg, .gif, .tif
Style sheets: .css
JavaScript: .js
Video and audio: .flv (Flash), .mp4 (HTML5 videos), .mov (QuickTime), .wmv (Windows Media), .mp3, and .wav
Web fonts: .eot, .ttf, .otf, .cff, .afm, .lwfn, .ffil, .fon, .pfm, .pfb, .woff, .svg, .std, .pro, and .xsf
Other formats: .pdf, .doc, .docx, .ppt, .pptx, .xls, .xlsx, .epub, .odt, .odp, .ods, .txt, .rtf, and .zip

When caching scripts, query strings (e.g. style.css?ver=4.4.2) are fully supported when using KeyCDN. We have a featured called Ignore Query String that you can enable within the dashboard. This feature ignores query strings and tells the cache to reply with a cached reply even if the query string differs.

When using a CDN which does not have the option to ignore a query string, simply removing them is the best solution to ensuring that your files get cached and delivered as quickly as possible. Read more on removing query strings.

How can you purge CDN cache?

There are three approaches to purge the cache on KeyCDN. In all three cases is the scope of a purge bound to the context of a Pull Zone. Either clear the Pull Zone cache completely, specify individual URLs that should be purged from the CDN cache. Unlike some other CDN providers purging the cache from KeyCDN's servers happens instantly! Read our in-depth post on purging CDN cache.

Summary

As you can see KeyCDN offers you a lot of control over your CDN cache and how it is delivered from both the edge servers and browser cache. Proxy cache, Cache-Control, and ETags are all modern mechanisms used to more effectively cache and deliver your assets as fast as possible to your visitors.