Get the most out of your Centmin Mod LEMP stack
Become a Member

WebPerf The Lowdown on CDN Dynamic Content

Discussion in 'All Internet & Web Performance News' started by eva2000, Aug 5, 2016.

  1. eva2000

    eva2000 Administrator Staff Member

    30,175
    6,785
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +10,138
    Local Time:
    1:31 AM
    Nginx 1.13.x
    MariaDB 5.5
    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.

    [​IMG]

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

    [​IMG]

    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.

    [​IMG]

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

    [​IMG]

    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.

    [​IMG]

    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


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

    Continue reading...
     
    Last edited: Aug 5, 2016