Daniel Muller
A Swiss Geek previously in Singapore, now in Portugal

Koken: Serve assets through CDN

by Daniel Muller in Koken, Photos on #CDN, #GALLERY, #SPEED

You can highly improve your site display speed by using a CDN. This is also true with Koken.

Koken doesn’t provide a “out of the box” way to handle CDN, so I wrote a plugin to allow you to serve your Koken assets through edges closer to your visitors.

CDN? Isn’t that overkill?

You could think that way. Specially when you have an album like mine, which is more family and friends oriented with a really low traffic footprint. The Problem is that family and friends are spread across the world: South America, Europe, South-East Asia. By choosing your server location, you can only make a nice user experience to one region. Using a CDN will allow to give an equal experience to all of them.

Why not “All CDN” ?

A more easy way would have been to go the all CDN, by pointing your domain to your CDN provider and using you Koken installation as backend. This thought crossed my mind, but I ruled it out quickly, I didn’t want to enter the fine-tuning game of html and admin caching.

Koken CDN plugin

This plugin is a set of filters rewriting the output of Koken’s API (api.content) and the html output (site.output). API rewrite is used to rewrite the URL’s of the images and HTML rewrite is used to rewrite URL’s of stylesheets, javascripts and fonts. The plugin let you choose which assets you want behind a CDN.

Prepare your site for a CDN

  • The best practice to manage caching rules on the CDN is to define the right cache headers on your Koken installation. Koken is missing some cache headers as pointed out in my other article: “Boost your Koken speed with client-side caching”. First step is to fix this issues. up to you to choose the right amount of cache expiry. This depends on your traffic and on time for a visitor to return.
  • A second issue from Koken, is that the images a generated by a PHP script (i.php), which uses $_SERVER['HTTP_HOST'] to call the API. To avoid a full loop back through the CDN, your CDN provider needs to be able to call your website using the backend Host header.
  • Choose a CDN provider, define cdn.yoursite.com as endpoint using yoursite.com as backend. Update your DNS and create the entry cdn.yoursite.com pointing to your CDN provider.
  • Install the plugin, configure it to use cdn.yoursite.com
  • Enjoy your new speed

Which CDN to use ?

There are so many out there, difficult to point towards one. All depends on your expectations and budget. This article holds a list of free CDN, which can be a good starting point to experiment without opening the wallet.

After looking a bit around, my choices where:

  • Cloudflare: I used to use them for this site, but you need to host your DNS with them and top level domain only. I couldn’t use them with my album, since I don’t use top-level domain.
  • Incapsula: They have a free plan, but the link to it is well hidden below the paid ones. I didn’t give them a try
  • Cloudfront: Not free, but cheap enough compared to the service offered. I already have an account for my S3-backups and I am familiar with the configuration. I went CF, since I had some vouchers to spend.

What are the gains?

My server is located in Europe, I access the Gallery from South-East Asia and the differences are phenomenal.

Load times for one image:

  • Without CDN: 3100 ms
  • With CDN: 60 ms

Your visitor will get the image almost instantly where before he had to wait 3s to see it appear on his screen.