Exploring the Ins and Outs of CDN Cache
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://website-7.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 Percentage (CHP). 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 Percentage.
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
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
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
Cache-Control response header fields that are sent to the client if the response code equals
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:
- 0 Push Zone: disabled / Pull Zone: as received from the origin (header honoring)
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://website-7.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
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://website-7.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
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:
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
.rars, but KeyCDN does! Here is a list of some (not all) of the common file types that KeyCDN caches.
- Style sheets:
- Video and audio:
- Web fonts:
- Other formats:
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.
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.