Custom CDN Integration

How to integrate the CDN into your website

This article focuses on how to integrate KeyCDN into your website and provide you with a better understanding of how to make use of the CDN. First, create a Push Zone or Pull Zone. After you created a Zone you need the Zone URL, which will be found in the KeyCDN Dashboard in the Zone tab.

  • Create a CDN Zone in the KeyCDN Dashboard
  • Get the Zone URL (created in step 1)

It is best practice that the HTML pages will be still loaded from your origin web server but all the static resources (like CSS, JavaScript, PNG, JPG,  MP4, etc) will be delivered from the CDN. In most cases, the static content accounts for 80% or more of a website.

  1. Identify the resource in your HTML that you want to load from the CDN
  2. Replace the Origin URL with your CDN URL (Zone URL)

Important: Make sure that all URLs pointing to pages and other dynamic content remain untouched! The CDN should only deliver static content.

Simplified Example:

Origin URL
www.yourwebsite.com
Zone URL (CDN URL)
lorem-1af.kxcdn.com

Your website:

<html>
  <head>
    <link href="http://www.yourwebsite.com/css/yourstyle.css" rel="stylesheet">
  </head>
  <body>
    <h1>Your Website Something</h1>
    <a href="http://www.yourwebsite.com/news.html" alt="just another link on your website">Your News</a>
    <p>My first paragraph.</p>
    <img src="http://www.yourwebsite.com/img/img.jpg" alt="just an example">
  </body>
</html>

After you integrated the CDN in your website:

<html>
  <head>
    <link href="http://lorem-1af.kxcdn.com/css/yourstyle.css" rel="stylesheet">
  </head>
  <body>
    <h1>Your Website Something</h1>
    <a href="http://www.yourwebsite.com/news.html" alt="just another link on your website">Your News</a>
    <p>My first paragraph.</p>
    <img src="http://lorem-1af.kxcdn.com/img/img.jpg" alt="just an example">
  </body>
</html>

Leave A Comment?