Cielito Lindo Productions

Discovering the beauty of God's creation | And it was very good

Use Koken with a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a network of servers distributed over the whole world. They mirror the page content of your Koken page. This has one big advantage: Let's take for example that your hoster sits in Europe and a possible visitor from Australia connects to your site. Without a CDN all the files (and especially the heavy images) would need to go all the long way from Europe to Australia which would result in a long waiting time for the user until the data arrives on his device.

This scenario can be improved by using a CDN. This stores the images on the CDN-servers. So if the CDN fe. has a server in Australia (or at least closer than Europe) then the Australian user gets the images from the Australian server which is obviously faster.

I've been using myself KeyCDN and been quite satisfied with them. They have a 30-day trial period so you won't loose anything on trying them out. But be aware that once this time expires they stop delivering and then you won't have any images anymore on your page. (update: this is not completely true as then images will still get delivered from your own koken homepage)
It only took minutes for me to get everything set up and the difference in image load speed is really notable comparing the page with and without CDN. (although I didn't make any measurements yet).

So what I did in detail is:
- Create an account on KeyCDN.com and log-in
- Create a new zone; in the settings assign a name, and make sure that Zone Status is "active" and the Zone Type is "Pull". In the field Origin URL enter the url to your koken-page (let's say http://myexample.com for this tutorial)
- Get the Koken CDN plugin from github
- Unzip it and upload it to you Koken-installation via FTP (make sure to get the following folder structure fe. koken/storage/plugins/koken-plugin-cdn-master/plugin.php)
- In your Koken admin panel go to Settings -> Plugins and enable the plugin (CDN for images). Perhaps you need to wait a bit or reload the page until the plugin appears.
- Go into the setup of the CDN-plugin and enter the zone URL that you got assigned from keyCDN (fe. xx-xxx.kxcdn.com)
- Leave all the check boxes selected unless the first one and wait.
- Go to your homepage and make sure that everything is working correctly. You should already see that the images are loading faster now. In your KeyCDN admin-panel under Reporting -> Analytics you can see under "Cache Hits" what percentage of files is served by the CDN.

Note: There are more explanations about the used plugin here. It suggests some preparation steps before enabling the CDN. I didn't do any of these, my page and CDN are working without them. (The only thing I did is adding KeepAlive - please see my other blog post on this)

There's still another tweak that you can apply to your Koken and CDN setup. If you load your page you probably noted in the lower part of your browser that your page connects to fe. xx-xxx.kxcdn.com. You can change this in order to state "connecting to cdn.myexample.com". To do so follow these steps:

- In your KeyCDN add a Zonealias. As Alias enter fe. cdn.myexample.com and as zone select the previously created one.
- Login into your webserver admin panel and go to the DNS settings page.
- Add a CNAME entry, fe cdn.myexample.com 120 IN CNAME xx-xxx.kxcdn.com
- Wait at least 5 minutes until the changes apply globally.
- If you want to check the DNS you can do this with a tool provided by KeyCDN. You can find it here

KeyCDN even lets you add a certificate for your CDN (fe. a Let's Encrypt certificate). So if your page is accessed via https then the user gets a valid certificate. Please be aware that after configuring the certificate you need to recreate the zonealias.

If you later on buy a signed certificate for your koken page and decide to automatically redirect all your visits on http to https then you will also need to update in your KeyCDN the zone name from http://myexample.com to https://myexample.com