CDN for WordPress

Danila Vershinin

7 years ago

What is CDN

No matter how fast is your server, nothing can beat internet latency. If your server is in one location on the globe, and visitors are geographically far from it – they will be affected by network latency.

Let’s see how CDN works on example. What happens when someone from Australia visits www.example.com which is hosted in USA based server:

Browser loads www.example.com HTML page. This is direct connection to USA server
Browser finds a reference in HTML to cdn.example.com/image.jpg
Browser resolves DNS for cdn.example.com to an Australian IP address (if the CDN provider has point of presence in Australia)
Browser requests the image from Australian edge server
The Edge server in question checks if it has the file
5.1. The Edge server outputs the file from its cache to browser for display. this is a cache HIT. Thus the network latency issue is solved
5.2 The Edge server has no image.jpg in cache, so it seamlessly communicates with the origin server at USA, fetches the file, stores into its own cache and serve it to the visitor. it’s a cache MISS. Subsequent request will be more than likely a HIT. So network latency is eliminated from future requests to the image from Australian visitors

That is the most common setup for a CDN. It is called pull zone. Technically a pull zone is:

A separate subdomain to your website, i.e. cdn.example.com. You would create it in your DNS. It is typically a CNAME record which points to CDN’s servers
… bound to static files of your website. You don’t need to upload anything. When CDN edge servers receive a request for an image or another file, they will either serve it directly from their cache or request back from your origin server, refill their cache and serve it.

The pull zones don’t need you to upload anything to them. A pull zone CDN automatically refills its cache when visitors access the files from it.

KeyCDN

More than an intro to how this CDN works

KeyCDN is a CDN of choice if your server supports Brotli compression. They are the only CDN that comes with Brotli support.

KeyCDN’s edge servers need to fetch the content from your origin server to actually cache your assets. The more traffic a website receives the quicker will all the assets be cached on the KeyCDN edge servers. The X-Cache header indicates if an asset has been delivered directly from a KeyCDN edge server if the value is a HIT. A MISS means that the asset was pulled from your origin server and commonly has a slow loading time.

I would say that the important gotcha of KeyCDN is that each of their locations have multiple edge servers. Each edge server has its own cache:

A location (POP) consists of several servers, each server will maintain its own cache. It’s possible that you reach a different server in the same location shortly after a HIT. If the other server does not have the file cached yet, it might is a MISS again.

That seems like a bad design if you ask me. In comparison, Cloudflare have a shared cache between edge servers in the same point of presence, which is better for websites that have moderate traffic.

With KeyCDN, you need to load your website several times if your website does not have much traffic so that all the assets get cached.

Assets that are cached by KeyCDN edge servers are removed if you purge the zone or if they are not requested in a 48 hour period. If files are regularly accessed, they will honor what you have set as the max-expire option.

Steps to enable KeyCDN in WordPress

First, simply sign up for KeyCDN.
Then, you need to configure a subdomain for your website which will hold static assets. We have a step by step to serve static WordPress files on a cookieless domain using nginx.
So now you have static.example.com. In KeyCDN: create a pull zone with origin set to https://static.example.com. Enable LetsEncrypt SSL option.
In your DNS: create a CNAME record that points cdn.example.com to your pull zone’s *.xcdn.com domain.
In KeyCDN: create a ZoneAlias and put it as cdn.example.com (verify it and save it couple times to generate LetsEncrypt SSL).
Verify things work by accessing some asset form cdn.example.com instead of the static.example.com.
Now, depending on the option you used to implement static subdomain earlier:

Update URL in CDN enabler plugin settings to https://cdn.example.com
Update wp-config.php static subdomain URL setting to https://cdn.example.com/wp-content

Keep the nginx configuration the same. It should still point to https://static.example.com (remember KeyCDN will use it to fetch files for its cache).

KeyCDN hosts a number of tools to check modern web performance technologies: