CloudFlare Logo

This is the first in a series of posts about awesome web / fullstack developer online services.

As you might already have seen, I’m often critical of services and products – I usually find most of them suffering from not delivering what’s promised, insufficient support responses etc. Sometimes though, you come across services that are really good. Really robust and fun to use. Services that you can clearly tell that are run by smart people who know what they’re doing.

This one is about CloudFlare®, and if you’re curious to know what would be the next ones, these would be DigitalOcean and Stripe. Stay tuned, or better, subscribe to my mailing list and you’ll know as soon as they’re out!

Introduction

The tl;dr version: CloudFlare will make your site faster, within minutes of easy configuration, for free. There are paid packages as well (which will make your site more secure, more tolerant to attacks and even faster than the free package) but what’s awesome is that the free tier is really something that’s worth it. After you start with the free tier, which will give you measurable benefits straight away, you can decide whether to step up or whether you’re happy with the free tier.

Note: In this post I’ll frequently use technical terms that I won’t elaborate on, assuming you’re a fullstack developer who knows what they mean. If that’s not the case, feel free to Google them. I want to focus on CloudFlare’s features rather than expanding on commonly used terms.

You work with CloudFlare by tunnelling your site’s traffic through them. This is done by getting CloudFlare to be your domain’s DNS, so that browsing your domain is replied by an internal CloudFlare IP address (which you don’t have to know), and they in turn access your server. But only if they have to (we’ll get to that in a second).

Don’t worry about messing with your DNS records. As long as you currently know how to configure them on your existing DNS, you’ll be fine. CloudFlare are smart enough to figure out most of the things themselves, they’ll even pull out your mail records (MX) but of course won’t touch their pointers as they don’t handle mail for your domain.

DNS Records Table

Next you’ll find a whole world of goodies they give:

For start, all of your site’s traffic will be cached by them so hits to the origin (your server) will decrease by about 80%. Depending on the type of site(s) on your server, that could buy you precious time and money before you have to upgrade it, as your server’s CPU and disk will work much less. Oh, and network traffic will reduce tremendously too, so if you pay by bandwidth – expect to see your bills cut! This one just by itself is worth the minimal effort moving to CloudFlare.

Obviously your sites are dynamic, they are applications that render pages based on users and other changing data. That’s why CloudFlare doesn’t cache the pages themselves (but they do apply lots of networking tricks and compression to accelerate their serving). Despite that, you can manually configure CloudFlare to cache specific areas of your application rather than having them hit your server on every single page, like here:

Section Rules

The other caching aspect, which every site would leverage from, is caching your static assets – CSS, JavaScript, images etc. – they pull it on the first hit, then save it on their worldwide CDN. When users browse, they get the images from the edge closest to them – faster for them, and again saves your server’s bandwidth. Oh, and they will autominify these assets too.

Network Map

Below is a graph (built-in to the CloudFlare domain admin interface) showing you cached vs. uncached requests; see how huge the save is:

Analytics

For the sake of showing a simple and clear comparison between using and not using CloudFlare, I chose a relatively simple eCommerce site. The site’s pages are dynamic; they are generated by a web application (i.e. they are not static HTML) but they don’t change often. I ran two tests for the site using the famous www.webpagetest.org tool – before and after CloudFlare was applied on the domain. The site is hosted in Europe and the webpagetest.org test was done by browsing from a server located in Australia:

Before CloudFlare

LaChocolate Benchmark Before CloudFlare

After CloudFlare

LaChocolate Benchmark After CloudFlare

(Click here to see these two images side by side)

Few properties stand out: You can see that the ‘Fully Loaded’ time descended from 4.872s before to 3.792s after – an astonishing one whole second (which is a lot in case you were wondering). Note: there is almost no difference in ‘Repeat View’ which totally makes sense, as almost all assets are cached. In addition, note the score at the top right corner; this site can still be improved internally, but by just adding CloudFlare on the domain, ‘Compress Transfer’ jumped from a D to an A and ‘Effective use of CDN’ changed from ‘No’ to ‘Yes’ (interesting to see though that ‘First Byte Time’ actually got worse – I think it’s a fluctuation because the difference in first byte time between the two is only 0.009s).

Other awesome stuff

Then we get to lots of other wizardry CloudFlare can do as the middleman:

CloudFlare can serve HTTPS to the end-user while hitting your server using HTTP, so you don’t have to set up your own certificate and can enjoy lower bandwidth.

SSL

CloudFlare blocks attacks on your server (the quality of this blocking changes between free and paid plans though). They guarantee very robust DDoS attack blocking, which is huge. They can detect other application-level attacks such as SQL Injection and block them as well (Note: as a software developer who is passionate about security I would not recommend you to count on them, or on any other mediator, to automagically block these attacks on you. Thrive to learn OWASP Top Ten and make your site unhackable by these very obvious methods, which most of them can be run by widely available tools without needing to “be a hacker” and without much effort. Having said that, it won’t hurt to enable this feature in CloudFlare).

CloudFlare Overview

Beyond that there are tons of other features, like:

  • presenting suspicious users with a challenge page;
  • analytics (how many requests vs. how many hit your origin, bandwidth, threats etc.);
  • whitelisting and blacklisting specific IP addresses or ranges,
  • continuing to serve pages from their cache when your server is down,
  • customized rules per-page,
  • geoblocking,
  • I’m Under Attack Mode

and so much more.

CloudFlare just does it right. The UI is super-clear, there’s tons of help on everything, it’s fully transparent.

Action item: I know it’s hard to start using these services which sit between your server and the world. Choose one of your smaller sites for a start (less traffic / less structural complexity) and start with it. Within 15 minutes it can be up and running, served by CloudFlare. Then browse their settings pages and see for yourself.

I really think you can learn everything by yourself and using their awesome, graphically-rich support pages, but if you really like to have a good thorough starter, the Instant CloudFlare Starter book is a great one (full disclosure: it’s an affiliate link – read why it’s genuine and respectful here).

Conclusion

As I wrote in the beginning, I work with many software / cloud providers, and it’s really rare to come across ones which are really superior in their service offering and quality. CloudFlare is one of them.

Awesome Services Series: CloudFlare

Enter my mailing list to get high quality full-stack updates directly to your inbox. Just pure content.

I will never spam you and never share your email address.

x