WebPerf 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 similiar, 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 400ms. Static content is fast!



Here are some common static file types:

• 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

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 – Pro-grammatically 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 – Purge By Tag


Another option you have is to purge by tag. Cache-Tags are assigned to cached content via a Cache-Tag response headers. These can be used to pro-grammatically purge only portions of cache, instead of flushing the entire cache. The tags must be defined via the Cache-Tag header from the origin server. You can add tags within the KeyCDN dashboard under “Zones” → “Purge by Tag.”



This can be a great combination to purge only sections of cache so that the dynamic content is always fresh.

Option 3 – Cache-Control Headers


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

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

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 / how a response should be cached and for how long. 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. The Expire value has only an impact on the web browser cache and not the edge server cache. You can find this under the “Advanced Features” on your zone in the KeyCDN dashboard.



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).

Summary


So as you can see, there are ways to cache what some call dynamic content. By utilizing KeyCDN’s instant purge technology and API, you can setup triggers to purge cache when needed based on user or server actions. Also, using cache-control headers give you more flexibility when it comes to the client’s web browser cache. This allows you to still take full advantage CDN caching and ensure your visitors are seeing up to date information.

Related Articles

• 8 Advanced Content Delivery Network Features
• Exploring the Ins and Outs of CDN Cache

The post The Lowdown on CDN Dynamic Content appeared first on KeyCDN Blog.

Continue reading...