The Lowdown on CDN Dynamic Content

Typically when hear or read about a content delivery network, they are always talking about how your static assets (such as JavaScript, CSS, images) are being delivered from the CDN edge server's cache. This is definitely a typical use case for a CDN. A common misconception though is that CDNs can't handle caching dynamic content, which is not always the case. The term "dynamic" though might be a little different than what you think. Read more below about how CDN dynamic content works and how KeyCDN can help speed it up.

Static content vs dynamic content

First off, it is important to note that we are not talking solely about static websites vs dynamic websites, even though they are very similar, but rather the content that is on the page itself. Because there are ways to include dynamic content on a static website. Below are some common properties of static content and dynamic content.

Static content

Static content is just what it sounds like, it is content that doesn't change. Because of this, static content usually loads faster and has a smaller page size. It is content that doesn't require any code to execute or make database queries. Also, it is fully cacheable. A good example of this is on Laravel's website, which is just a straight HTML webpage with images, CSS, and JS linked to as static assets. There is no PHP or database queries being performed. It is made up of all static content.

Their webpage loads in under 400 ms. Static content is fast!

Here are some common static file types:

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

(Flash), (HTML5 videos), (QuickTime), (Windows Media), , and Web fonts: .eot , .ttf , .otf , .cff , .afm , .lwfn , .ffil , .fon , .pfm , .pfb , .woff , .svg , .std , .pro , and .xsf

, , , , , , , , , , , , , , and Other formats: .pdf , .doc , .docx , .ppt , .pptx , .xls , .xlsx , .epub , .odt , .odp , .ods , .txt , .rtf , and .zip

Also, it is important to note that some popular CDN providers don't cache files like mp3, mp4, zip, or rars, but KeyCDN does!

Dynamic content

Dynamic content is content that is generated for you on the fly when you browse a webpage. WordPress is a good example of a CMS platform that has dynamic content. Dynamic content can be a lot more resource intensive because it can execute code and usually requires database queries to generate the content.

For example, when you visit a WordPress site, pretty much the entire page's content is generated based on PHP and database queries. Below is an example of the stock index.php homepage page bundled with the WordPress twenty fifteen theme. It is originally 61 lines of code. But when someone visits it, it turns into 224 lines of code because of all queries and content being generated.

Caching CDN dynamic content

Dynamic content typically means that it is always changing and never the same. This could be anything from news articles which are being updated every few minutes, to stock prices, or even basketball scores and tickers on websites. This usually means that it can't be cached. However, thanks to KeyCDN's feature set, there are a couple options you have to cache things that are still frequently changing.

Option 1 - Programmatically purge with KeyCDN API

In the past, when it came to caching dynamic content on a CDN, some providers would just set the TTL lower. This means the visitor might not always see the latest version, but would at least see a close one. Thanks to KeyCDN's instant purge technology you don't have to worry about this. You can utilize KeyCDN's API in your projects to purge the CDN cache when there should be triggers so that people see the latest dynamic content. A trigger is typically an action that occurs when a user or your webserver generates new content.

Option 2 - Cache-Control headers

When using a CDN, here is an example of what happens when a visitor comes to your website.

Visitor hits website and requests a file from the CDN. CDN 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).

With KeyCDN, you have the ability to modify the Cache-Control headers. Cache-Control is an HTTP cache header comprised of a set of directives that allow you define when and how a response should be cached and for how long. The Expire setting 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. The Expire value has only an impact on the web browser cache and not the edge server cache. You can find this setting in the Zone settings.

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)

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 Expires directive in seconds (86400 sec = 1440 min).

Summary