Updated date:

How to Reduce TTFB (Time to First Byte) With Cloudflare

Author:

I've been a happy Cloudflare user for years. Here are my thoughts about reducing TTFB on Cloudflare and whether Time to First Byte matters.

Cloudflare and TTFB (Time to First Byte)

Cloudflare is a popular CDN service that acts like a reverse proxy between your web host and the internet, blocking malicious bots and optimizing website speed. It is used by big companies and individual webmasters alike and offers a great free plan for personal use.

How Cloudflare works.

How Cloudflare works.

Cloudflare provides a measurable improvement in page load speed, as evidenced by tools like WebPageTest and Google Lighthouse.

Despite that, you may notice that your server response time (TTFB, or Time to First Byte) has increased after enabling Cloudflare. This may seem counterintuitive, but is completely normal and not a cause for concern.

Does TTFB Even Matter?

Not according to Cloudflare. While it remains an important metric on certain website speed tests, the server response time has little to do with the actual user experience. In other words, even though your TTFB may be higher with Cloudflare, your website will still load much faster overall. Cloudflare explains this in a blog post aptly titled Stop worrying about Time To First Byte (TTFB).

But why does Cloudflare make TTFB worse in the first place? To put it simply, instead of the visitor directly communicating with your web host, they now go through an extra hop, which adds some initial latency.

Unencrypted HTTP Without Cloudflare

This is grossly simplified, but a basic HTTP website without Cloudflare works something along these lines:

  1. Visitor requests a webpage
  2. Your web host delivers the content

Unencrypted HTTP With Cloudflare

Now let's add Cloudflare:

  1. Visitor requests a webpage
  2. Cloudflare fetches content from your web host
  3. Cloudflare optimizes the content (minification, compression, etc.)
  4. Cloudflare delivers optimized content to the visitor

The extra steps do add some overhead. If Cloudflare already has the resource cached on their servers, steps 2 and 3 are skipped, but by default, this only happens with static resources like images, Javascript, and CSS.

No SSL in Cloudflare.

No SSL in Cloudflare.

Encrypted HTTPS With Cloudflare (Full SSL mode)

If you use TLS (as you should) and enable the Full SSL mode in Cloudflare, the overhead increases further:

  1. Visitor requests a webpage
  2. Cloudflare fetches encrypted content from your web host
  3. Cloudflare decrypts the content
  4. Cloudflare optimizes the content
  5. Cloudflare encrypts the content again
  6. Cloudflare delivers optimized content to the visitor

Cloudflare has to decrypt your content in order to optimize it, so the Full SSL and Full (Strict) SSL modes add latency. In general, the security is absolutely worth it and the minor increase in server response time shouldn't be an issue.

Full SSL mode in Cloudflare dashboard.

Full SSL mode in Cloudflare dashboard.

Encrypted HTTPS With Cloudflare (Flexible SSL mode)

It is theoretically possible to reduce TTFB by switching to Flexible SSL mode:

  1. Visitor requests a webpage
  2. Cloudflare fetches content from your web host
  3. Cloudflare optimizes the content
  4. Cloudflare encrypts the content
  5. Cloudflare delivers optimized content to the visitor

While operating in this mode, the connection between origin and Cloudflare is unencrypted, so there is less overhead. Let's measure the actual effect his setting has.

Flexible SSL mode in Cloudflare.

Flexible SSL mode in Cloudflare.

TTFB in Full SSL Mode

To measure TTFB, I'm using this awesome free tool from KeyCDN that tests your website from ten different locations in the world. First, let's check the server response with Full SSL mode on Cloudflare:

TTFB with Full SSL

TTFB with Full SSL

TTFB in Flexible SSL Mode

Now let's switch to Flexible SSL mode, which Cloudflare lets you do with one click, and run the test again:

TTFB in Flexible SSL Mode

TTFB in Flexible SSL Mode

The reduction in TTFB is around 30% on average. Does this mean you should switch to Flexible SSL mode? Probably not.

TTFB is just one metric that doesn't have much to do with the actual website loading speed. Furthermore, Cloudflare states that Flexible should only be used "as a last resort if you are unable to set up SSL at your origin web server".

An argument could even be made that the Flexible mode misleads your visitors. They see the lock on the address bar and consider their connection to be secure, when it is in fact only partway so.

Personally, I wouldn't use Flexible on anything except a purely static site. But even then there's a better option.

Better Option: Cache Everything

While Cloudflare only caches resources like images and stylesheets by default, even on the Free plan, you can create a Page Rule to make it cache HTML too.

This way Cloudflare will serve the entire webpage from their blazing-fast edge servers without querying your web host at all! (This obviously isn't an option for parts of the site that need to remain dynamic, e.g. members area or shopping cart).

"Cache Everything" Page Rule

"Cache Everything" Page Rule

TTFB With "Cache Everything" Page Rule

Let's switch back to Full SSL for security but use a "Cache Everything" Page Rule and run the TTFB test again. Hold on to your hat.

TTFB with "Cache Everything" Page Rule in Cloudflare.

TTFB with "Cache Everything" Page Rule in Cloudflare.

When Cloudflare is allowed to cache the entire webpage, TTFB is up to ten times lower, from across the world, compared to not using Cloudflare at all. A fantastic result, and I get this performance entirely free.

This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.

Related Articles