Thursday, December 31, 2015

How to get the most out of CloudFlare

What are the benefits of using CloudFlare?

Quite a few things, all of them being free to use:

Using CloudFlare: performance comparison before and after

Unfortunately blogs hosted by Blogger are designed in a way that makes it impossible for CloudFlare to fully optimize it: static resources (JavaScript, images, etc) are hosted on dozens of different domains, but CloudFlare can only optimize content hosted on your own domain. There's still a few things CloudFlare can do, most importantly: delaying JavaScript until the page is loaded, therefore speeding up the time it takes to see content on your website.

Here's the raw data:
before enabling CloudFare - WebPagetest
after enabling CloudFlare - WebPagetest

before enabling CloudFlare - PageSpeed Insights
after enabling CloudFlare - PageSpeed Insights

How to configure CloudFlare?

  1. Sign up at cloudflare.com
  2. Follow CloudFlare setup
    1. Add your domain
    2. Make sure they imported all DNS-entries for your domain (about half of them missing in my case). Also make sure the "Status" of each entry is an orange cloud-icon. That means that all traffic is going through CloudFlare's server. Only if you enable this you'll benefit from the features offered by CloudFlare - otherwise it's just a plain DNS server.
    3. Change nameserver at your domain registrar
  3. Configure cloudflare
    1. Default settings are mostly fine, I turned down "Security Level" to "Low" because I want to avoid false positives where some of my visitors have to enter a captcha before reading my blog...
    2. Turn on "Auto Minify" for HTML, JS and CSS. There's almost no risk of breaking something, unless you're doing funky stuff in your JavaScript (which you shouldn't do anyway if that's the case).
    3. Wait for the DNS changes to kick in (1-2 days), see if everything still works fine and then give "Rocket Loader" a try. Set it to "Automatic", force-reload your website and see if everything works as expected.
    4. Create a "Page Rule" for "yourdomain.com/*" (e.g. "tomtasche.at/*") and set "Custom Caching" to "Cache everything"

Sunday, December 27, 2015

How much does improved website speed cost?

Okay, I'll admit that the title of this post sounds a little too sensational. But it fits into a row of posts I've posted before: How much does the worldwide fastest DNS server cost? and How much does a HTTPS certificate cost?. Of course improving a website's speed is a long (and painful!?) process which needs a lot of time and knowledge, but there's a few shortcuts to get you started faster. Like for the other two posts mentioned before, the solution in this case is, again, to put a server in between your users and your servers. CloudFlare's servers to be exact.


What CloudFlare does in this case is several things. Most importantly, they cache everything that is safe to cache - static images for example - so that they are downloaded from their speedy and globally distributed servers instead of your possibly slow (no way!?) servers. Other than caching images, they also optimize them (cutting off unnecessary fat) in the process of caching them. There's more that's being optimized, like shrinking HTML-, CSS- and JavaScript-files but don't leave it to me to explain all of that - go read it directly at CloudFlare.

There's other companies offering similar features of course, but CloudFlare is the one I'm using in production myself, so I can't speak for the others unfortunately.

Here's how to get the most out of CloudFlare!

Multi-module dispatcher for AppEngine Development Server

The great thing about AppEngine is that you can test and use almost all features during development locally. However there's one really important thing missing for everybody that is using modules - as suggested by the official documentation: accessing all your modules via the same port, where requests are routed according to your configuration in dispatch.xml. This feature is not available locally: "All dispatch files are ignored when running the development server. The only way to target instances is through their ports."

That makes some tasks really complicated, like sending requests from a web client. Usually you send the request to the same server hosting the resources, but with a multi-module setup that does not work locally, because the module you want to access is hosted under another port than the one serving your web client's resources. At first we adapted our code accordingly, which included a really complicated Grunt-configuration to change server URLs in JavaScript accordingly. Eventually we hit a roadblock because cookies set by one module where not visible for requests sent to another module (because they act as different hostnames). The solution we came up with is a proxy server in front of your modules which routes requests like AppEngine does when deployed.

In order to achieve this, we're using some grunt-plugins:


Now call "grunt dispatch" and your server is ready to go at localhost:9000. All requests with a URL matching "/api" (e.g. "localhost:9000/api/hello") are routed to localhost:8081 and all the rest goes to localhost:8080. As you can see this does not read your actual configuration from dispatch.xml, but it's really easy to set up anyway (same logic applies, just JSON instead of XML).

The same applies to Python users with dispatch.yaml of course...

How much does a HTTPS certificate cost?

Enabling HTTPS connections to your website is a must-have nowadays. Full stop! It even affects your visibility in Google Search. Dealing with certificates is cumbersome and boring though - lots of different formats, algorithms and generally a lot you can do wrong. However, there's easy solutions for most websites:

Put HTTPS in front of your website

...using CloudFlare. This requires zero changes on your server and is completely free of charge. Another very positive side-effect: you get one of the fastest DNS servers too.

Basically what this does is put another server in front of your server. The server in the middle is what your users talk to in the first place - therefore using its SSL certificate to secure the connection. That server then forwards requests to your own server via an unsecure connection (depending on your setup). This of course is a potential threat because ISPs, etc could spy on your user's data, but it saves your user from nasty man-in-the-middle-attacks when using a public WiFi (at a coffee shop for example...).

Here's how to get the most out of CloudFlare!

Get a free certificate

Another solution which requires more work than just clicking on a few buttons in a web interface: creating your own certificate and using that to secure the whole connection between your users and your servers. Usually an SSL certificate costs some money, but there is a new intiative offering legitimate certificates for free: Let’s Encrypt. It sounds really scary in the first place, but it's actually a project backed by big companies and there's nothing to worry about (other than that it is in public beta as of December 2015). You can also read about it on all major tech news websites...

Although this does not completely save you from using the commandline, there is a big community backing this project which offers semi-automated setups for most platforms and usecases.

How much does the worldwide fastest DNS server cost?

Stats shown on dnsperf.com as of December 2015
Do you know how much it costs to serve your website using the worldwide fastest DNS server there is? Nothing - it's free! The fastest DNS server in most parts of the world (according to dnsperf.com) is hosted by CloudFlare, a company offering solutions for speeding up websites. Most of those features are available for free in their most basic form. One of those features? Super-fast and easy DNS. It's as easy as changing your nameserver (usually possible via a web interface at your domain registrar) and you're ready to go.

Here's how to get the most out of CloudFlare!