In this tutorial, I'm going to introduce you to KeyCDN, a fast, simple, affordable and reliable content delivery network (CDN) that'll make you want to use it on all your sites.

If you don't know what a CDN is, KeyCDN's simplicity makes it a perfect choice for newbies. It's also well suited for experienced system administrators—whether you appreciate the great user interface or its low prices, or make use of the API.

What's a Content Delivery Network?

A content delivery network is a system of geographically distributed servers. These global servers maintain replicas of your content automatically. The primary benefits of a CDN are about performance and high availability.

CDNs accelerate websites or data delivery by greatly reducing loading times around the world. Content is served from the closest edge server available. A so-called edge server lowers latency as it is closer to end users, and the closer a server is, the less congestion there is along the way. See also: What is a Content Delivery Network (CDN)?

Image credit: Content Delivery Network (Wikipedia)

What Is KeyCDN?

KeyCDN is a cloud-based service provider which focuses exclusively on delivering fast, affordable, reliable, easy to use content delivery networks.

Within just a few minutes, you can sign up for KeyCDN and optimize any website, including WordPress sites.

KeyCDN offers all the basic CDN features with a variety of other capabilities. Its user interface is simple and intuitive. And I appreciate its advanced reporting and real-time logging capabilities.

How Does It Work?

Prior to researching this tutorial, I was an Amazon AWS CloudFront customer. AWS is always improving but its user interface designs are still overly complex and its CDN product overpriced. After using KeyCDN, I quickly switched over all my sites.

Here's an example of a typical website (my personal Jeff Reifman WordPress site), using a KeyCDN. Below is a popular article I wrote last year which received significant web traffic. Without a CDN, every page request triggers a cascade of requests for JavaScript, CSS and images on my Apache server, or worse—my WordPress stack. By using a CDN, all of this traffic is offloaded to a third party optimized for global content distribution—in this case, KeyCDN. If you look at the web inspector, you can see the image URL is being served by KeyCDN:

Not only does KeyCDN's globally optimized network deliver content to my readers faster, but it also greatly reduces the number of requests and load on my own server.

How Much Does It Cost?

You can try out KeyCDN for 30 days with its free trial. After that, you're billed only for CDN traffic and storage. This is unlike Amazon CloudFront, which is not only more expensive, but also charges fees per HTTP request. In fact, I found that KeyCDN would be at least half as expensive as Amazon.

Here's a breakdown of typical costs:

Cached content is not subject to storage charges. Storage pricing applies only for Push and VOD Zones. Storage pricing is $0.90/GB/month.

Additionally, there is:

• no minimum commitment
• no minimum usage
• no extra cost for Zones
• no charges for HTTP Requests
• no fine print

Getting Started With KeyCDN

I encourage you to give KeyCDN's free trial a run. Sign up at the KeyCDN website and follow along below:

Here's the initial view of the dashboard:

Once you activate your account by clicking on the email verification link, you'll see this:

These links make it very easy to have questions answered as you proceed in your setup.

Should You Push or Pull?

If you're a newbie or don't know, I recommend starting with Pull. A Pull Zone fetches (pulls) the requested content from your web server and caches the assets on the KeyCDN edge servers. In most cases a Pull Zone is the preferred option for any content management system (CMS). See also How to Create a Pull Zone.

A Push Zone requires that you upload your content to the KeyCDN storage cluster and distributed from there to the edge servers. They support FTP(S) or rsync over SSH to upload your data. Push Zones are mainly used for distributing files larger than 10MB or for files that rarely change (such as documents, videos, etc.). See also How to Create a Push Zone. There is an additional charge for storing data in Push Zones.

Setting Up Your First Zone

You can set up a zone using the dashboard, Zones > Add Zone:

Here's an example with data. I'm creating a pull zone jr for my Jeff Reifman site:

KeyCDN also offers a variety of advanced features including GZip compression, to further speed page downloads and reduce bandwidth:

There's support for Cross-Origin Resource Sharing (CORS): "a mechanism that allows many resources (e.g. fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated."

And there's optional support for SPDY and SSL. It's nice that you can leverage KeyCDN's shared SSL without the complexity of installing your own certificate:

Says Wikipedia: "SPDY manipulates HTTP traffic, with particular goals of reducing web page load latency and improving web security. SPDY achieves reduced latency through compression, multiplexing, and prioritization."

Managing Your Zones

Here's what it looks like after you create your zone:

The progress bar shows the time it takes to pull the content off your server into the CDN. In my case, a mirror of my site is being created at jr-faf.kxcdn.com.

KeyCDN offers guides to set it up with your website:

• Custom CDN Integration
• WordPress CDN Integration with W3 Total Cache
• WordPress CDN Integration with WP Super Cache

Using KeyCDN With WordPress

Using a CDN with WordPress requires a plugin such as W3 Total Cache or WP Super Cache. I use W3TC.

To configure KeyCDN with W3TC, you have to visit the Performance > General Settings dashboard—confusingly not the Performance > CDN page:

Then, visit the Performance > CDN page and provide your KeyCDN zone name:

Once you activate the CDN with W3TC and clear your cache, take a look at your website's page source. You should see the KeyCDN zone referenced for JavaScript, CSS and images:

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head><link rel="stylesheet" type="text/css" href="http://pwp-faf.kxcdn.com/wp-content/cache/minify/000000/TU1bDsMgDLtQs2wfPVBKwkAFUpFMqLcfqiZ1X7bl14pMlnLQZo-a27Ii8UTYqF_6hUJ2Aud3dirAOlpRYkOXehRyMRTmX9RpKwIaYc65NDc4ysfQQhdpyxP3piPpQPOzyJ8OZhhnBWiIaZVr7rZjpypD-46WtHtQnq83_QI.css" media="all" />

...

<!--[if lte IE 7]>
<link rel='stylesheet' id='font-awesome-ie7-css'  href='http://pwp-faf.kxcdn.com/wp-content/themes/knowhow/css/font-awesome-ie7.min.css?ver=4.1' type='text/css' media='all' />
<![endif]-->

        <script type="text/javascript">
            function w3tc_popupadmin_bar(url) {
                return window.open(url, '', 'width=800,height=600,status=no,toolbar=no,menubar=no,scrollbars=yes');
            }
        </script>
            <script type="text/javascript" src="http://pwp-faf.kxcdn.com/wp-content/cache/minify/000000/M9bPKixNLarUMYYydHMz04sSS1L1cjPzAA.js"></script>
<script type='text/javascript'>
/* <![CDATA[ */
var edd_scripts = {"ajaxurl":"http:\/\/publishingwithwordpress.com\/wp-admin\/admin-ajax.php","position_in_cart":"","already_in_cart_message":"You have already added this item to your cart","empty_cart_message":"Your cart is empty","loading":"Loading","select_option":"Please select an option","ajax_loader":"\/wp-content\/plugins\/easy-digital-downloads\/assets\/images\/loading.gif","is_checkout":"0","default_gateway":"paypal","redirect_to_checkout":"0","checkout_page":"http:\/\/publishingwithwordpress.com\/checkout\/","permalinks":"1","quantities_enabled":""};
/* ]]> */
</script>
<script type="text/javascript" src="http://pwp-faf.kxcdn.com/wp-content/cache/minify/000000/M9RPTSyu1E3JTM8sSczRTckvz8vJT0wp1k8sLk4tKdbPKtZPTUnRTcxKrNDLzcwDAA.js"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://publishingwithwordpress.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://pwp-faf.kxcdn.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.1" />

Going Further With W3 Total Cache

You can multiplex your reader's access to KeyCDN by taking advantage of four different zones enabled by W3TC.

At my domain registrar, I set up four CDN subdomains, e.g. c1.jeffreifman.com, pointing as CNAMEs to my KeyCDN zone name:

Then, I provide these four zone aliases to W3TC:

Now, W3TC will cause WordPress to divide the page source requests across four different KeyCDN aliases. This allows browsers to multiplex the requests, and is often faster than sourcing just one KeyCDN zone alias.

You may also want to read my Tuts+ tutorial: Optimizing WordPress with Varnish and W3 Total Cache, which can help you in conjunction with KeyCDN. 

Page Headers and Cache Control

You can also configure KeyCDN in conjunction with W3TC to automatically purge content of a specific age from the KeyCDN edge network. This ensures that your users receive the most up-to-date content. See also Expire Header and Cache-Control.

If you need full control of this timing, it may be best to use a push zone.

Purging Zones

However, KeyCDN has a simple user interface for immediately purging your cache. This can be great for site updates and troubleshooting:

Reporting

Reporting is one of the KeyCDN Dashboard areas that really shines. It's so richly featured and simple. Here's the basic traffic view by zone or across zones:

Here are the top files and the total bandwidth generated by requests for them:

Here's traffic by geolocation:

And displayed in table form:

KeyCDN also offers real-time logs. You can watch traffic requests come in live:

And if you need a detail view, it's a click away:

You can also integrate KeyCDN's raw logs for processing with other services and tools such as LogEntries.com. See Get your CDN logs without a syslog server.

Other KeyCDN Features

Video on Demand and Live Streaming

KeyCDN also offers Video on Demand (VOD) services. A VOD Zone can be used to stream videos over Real Time Messaging Protocol (RTMP). You can use a Push Zone if you want to stream over HTTP. See also Stream Data from a VOD Zone.

KeyCDN also supports live streaming via RTMP and HTTP Live Streaming (HLS). The inbound RTMP live stream will be converted to an HLS stream in real time. See also:

• Live Streaming: RTMP and HLS
• Three Simple Steps to Publishing a Live Stream

Knowledge Base

If you have questions, KeyCDN has a friendly Knowledge Base and Support area to help you:

My first support contact was resolved quickly.

Automating KeyCDN With Its API

The KeyCDN API allows users to manage zones and receive reports in a straightforward, programmatic way, using conventional HTTP requests. If you're an experienced system administrator running a number of sites, you can use the KeyCDN API to automate your service requests:

In Closing

I really enjoyed getting to know KeyCDN and decided quickly it was a great solution for my publishing needs. It's fast, simple, easy to use, affordable and fully programmable. It offers a variety of advanced features and outstanding reporting. There's not much here not to like.

If you'd like to see more from me, you can browse my other Tuts+ tutorials on my instructor page or follow me on Twitter @reifman. You can also email me at Lookahead Consulting.

Related Links

• KeyCDN Website and Pricing
• W3 Total Cache (Performance Optimization Plugin for WordPress)