WebPerf 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 know 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.

1. Visitor comes to your website and requests a file from the CDN.
2. The CDN then checks to see if it’s in cache.
3. If the content hasn’t expired it is then served directly from the edge server to the client (HIT).
4. 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 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 allows to disables processing of Cache-Control response header fields (Ignore Cache-Control) from the origin server (ignores X-Accel-Expires, Cache-Control and Expires). It is important to note that Max Expires has precedence if Ignore Cache-Control is enabled. This can be enabled within the KeyCDN dashboard.

---

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 directive set to 1440 (value in minutes which equals to 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

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

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

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.



You can enable Origin Shield from within the KeyCDN dashboard. 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. Additional HTTP response header field: X-Shield: active.



The predefined Origin Shield servers are in the following locations:

• United States, East Coast
• United States, West Coast
• United Kindom, London
• Asia, Singapore

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 of the common file types that KeyCDN caches.

• Images: png, jpg, svg, gif, tif
• Stylesheets: 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, xsf, and more…
• Other Formats: pdf, doc, docx, ppt, pptx, xls, xlsx, epub, odt, odp, ods, txt, rtf, 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 Strings 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 3 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, or purge by tag. Unlike some other CDN providers purging the cache from KeyCDN’s servers happens instantly!

Here is an example of purging an individual file on a WordPress site. Simply copy the image location and paste into the “Purge Individual URLs” window in the KeyCDN dashboard.



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, ETags are all modern mechanisms used to more effectively cache and deliver your assets as fast as possible to your visitors. If you have any questions about how CDN cache works, feel free to open up a thread in the KeyCDN community.

Related Articles

• A Guide to HTTP Cache Headers
• Cache Hit Percentage (CHP)

Featured

250GB Free Traffic
Supercharge your Website Today with KeyCDN
HTTP/2 – Free SSL – RESTful API – 24+ POPs – Instant Purge

The post Exploring the Ins and Outs of CDN Cache appeared first on KeyCDN Blog.

Continue reading...