Improve Jekyll-based static site performance over the world with Cloudflare

comments

I have Google Analytics and Yandex Metrica counters embedded on this site and I have monitored site activity for a while. One metric I have worried about was site performance. Yes, this blog is jekyll-based static site. Can there be performance issues with static site content? I thought no, but Yandex Metrica shows me that performance issues are here. It may be slow 3G internet is in the game or I have Moscow's shared hosting issues, I can't be too sure. Here I'll show how to start using Content Delivery Network using Cloudflare as an example.

DOM load time by pages DOM load time by countries

Hosting issues?

I choose very-very cheap shared hosting which is apache webserver-based hosting. In very basic micro-plan I have:

  • 50Mb of disk space
  • support for PHP and Perl
  • unlimited traffic
  • 1 MySql database
  • 1 FTP account

It's more than I need for my personal blog. And it's price is just 12 russian roubles per month (about $0.2 per month, $2.4 per year). Very cheap.

There are some downsides for this price:

  • It's shared hosting. Sites on the same server uses same processor and disk. Therefore sites can affect each other.
  • Datacenter is located in Moscow. The farther away from Moscow readers are placed, more latency, the longer the page load time will be.
  • It's not possible to turn on SSL connections on micro-plan.

I can live with that downsides :). To improve page load time I needed to change hosting plan or hosting provider or... I needed some kind of Content Delivery Network!

Cloudflare

The Cloudflare is cloud CDN service. Why I considered to use Cloudflare?

  • It has about 110 data centers over the world.
  • Cloudflare has smart content optimization features built like javascript, html and css minification. It can be useful if you do not have automated preproduction pipeline like I considered earlier or if you hosted on github-pages.
  • Cloudflare can force secured SSL connections to your site content for free!
  • Potentially, Cloudflare can detect DDoS-attacks and prevent them.
  • It has a free plan for bloggers!

Cloudflare Wizard

I must say that it was super easy to switch to using Cloudflare.

To start using Cloudflare you just scan domain name specified:

Scan completed

After you press Continue Setup button, you'll see your current parameters:

Scanned site parameters

And to finish Cloudflare integration you just need to change nameservers for your domain name:

Last step is to change DNS nameservers

When I changed nameservers, I had active site status in less than 1 hour:

Active site status

For last point, I'd like to force SSL connections to my site and to force html caching. I did this using Page Rules tab (there is 3 free page rules available on free plan):

Page rules

Conclusion

Now I have my blog delivered through CDN and page load time should be decreased over the world. If any of you have issues with access to blog content sometimes put me a message, please. I'll monitor metrics later to decide is it worth to use CDN or not.

Happy blogging!

Comments