Supercharge Site Load Time & Reduce TTFB By 947% Using Cloudflare

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on tumblr
Share on reddit

Site load time is an essential factor for ranking sites on Google and TTFB (time to first byte) plays a vital role in it. I will explain how you can reduce your site's load time and TTFB by up to 947% using Cloudflare CDN and DNS.

Cloudflare is the complete speed booster and security solution for any site. The best thing is that its basic plan is available for free of cost.

So, why don't we make the most out of it if we can?

DigitalKube's Site Speed Test

Let me show you the results before and after applying this technique:

GTMETRIX TEST

BEFORE

DigitalKube GTMetrix Before Test

AFTER

DigitalKube GTMetrix After Test

PINGDOM TEST

BEFORE

DigitalKube Pingdom Before Test

AFTER

DigitalKube Pingdom After Test

As you can see, the site speed is improved by approximately 947% according to Pingdom.

You can also achieve this kind of load time without investing a single penny in a premium caching solution or CDN. It is totally free of cost.

We need to understand first what factors are the key players in this entire process.

If we take GTmetrix as a standard for this case study, then here are the elements that we will be fixing today:

  • Blocking: it is the time your browser takes before sending the connection request to the server.
  • DNS Lookup: it is the time taken by the hostname to resolve to an IP.
  • Connecting: it is the time taken by your browser to establish a connection with the server.
  • Sending: it is the time your browser takes to send the request to the server after a successful connection.
  • Waiting: it is the time taken by the server to process the request sent by your browser.
  • Receiving: it is time taken by the browser to download the requested page from the server.

Now, in the case of DigitalKube, this is what it looked like before:

DigitalKube TTFB Before

And below are the results after integrating Cloudflare with proper configuration:

DigitalKube TTFB After

If we combine all these six timings, they will form TTFB, i.e., Time To First Byte or the consumption of time before the actual loading of page starts.

That's why TTFB plays a vital role in your site's actual load time. I will show you how you can easily bring your site's TTFB down to a few milliseconds.

So, without further ado, let's get started.

Reduce TTFB & Site Load Time With Cloudflare

We will be using Cloudflare for two purposes here:

  • Cloudflare DNS to cache and resolve DNS requests quickly.
  • Cloudflare CDN to cache the entire site for faster delivery.

Let's discuss both one by one along with their individual setups:

Cloudflare DNS

According to DNSPerf, Cloudflare tops the chart comprising of both free and paid DNS hosting providers in resolving authoritative DNS:

DNS Chart

On the bright side, Cloudflare's DNS hosting is totally free. So, let's see how we can host our site's DNS on Cloudflare.

Step #1. Sign Up for a free Cloudflare account by clicking here.

Step #2. Now enter your site's domain and click 'Add Site'. It's not necessary to add 'www' to the domain. For example, if your website is www.example.com, then simply add example.com.

Cloudflare Add Site

Step #3. At this point, Cloudflare will start scanning your domain's DNS records. This hardly takes 60 seconds to complete. Once the DNS scan has finished, click Next.

Cloudflare Querying DNS

Step #4. It will ask you to choose a plan. So select one according to your needs and then click Confirm Plan.

Cloudflare Plans

Step #5. Cloudflare will display a list of all the DNS records found by it, including your subdomains. You can decide which records you want to enable Cloudflare for by clicking the orange cloud or bypass by clicking the grey cloud.

NOTE
  • Some records, like MX, never go through Cloudflare (no cloud).
  • If no DNS records are displayed, you must add DNS records manually in order for traffic to reach your origin web server.
  • If there are any additional records you’d like to add, you can add them here.

After you've reviewed your DNS records, click Continue.

Cloudflare DNS Records

Step #6. This is the final step! You will be given some nameservers for your domain. The Cloudflare nameservers that are assigned to your domain will be shown that you have to update on your domain registrar's end by removing all the existing ones.

Cloudflare Nameservers

NOTE: Your Cloudflare nameservers may vary from the ones shown in the image above. Kindly add only those that you see in your Cloudflare account. You can also find your Cloudflare nameservers in your Cloudflare Dashboard under Overview.

Finally, click Continue.

Congratulations! You have successfully added your site to Cloudflare.

High Response Time & TTFB With Cloudflare

After your initial setup of Cloudflare, you may have noticed that TTFB and response time has risen exponentially.

Cloudflare’s servers behave like any other server. When they receive a request, their servers start to prefetch the page from your origin server. All the reverse caching proxy servers do this.

This is actually the time taken by Cloudflare to load the page from your origin server and serve it through its server with an extra layer of protection added.

So the high TTFB is due to the fact that Cloudflare is not caching your site's pages entirely. Only the static elements are cached. To cache the complete page and eliminate this high TTFB issue, we'll make use of some page rules in the Cloudflare CDN setup in the next part.

Cloudflare CDN

Cloudflare can boost your site by caching not only your site's structure, but its DNS queries too.

By default, Cloudflare caches only static assets such as stylesheets, images, and javascript.

Here's a surprise!

Cloudflare can catch your entire website just like a caching plugin if you configure it properly. Not everyone is aware of this feature.

Cloudflare's Availability

Cloudflare has a high availability with 165 data centers around the globe. That means your cached site is served to your visitor through its nearest available data center with minimal DNS response time.

Setup Cloudflare CDN

The process is pretty simple. Follow every step carefully:

Step #1. Cloudflare Caching Settings

Login to Cloudflare and go to the 'Caching' tab and change the option in 'Browser Cache Expiration' to 'Respect Existing Headers'

Cloudflare Broswer Cache Expiration

Setting 'Respect Existing Headers' will tell Cloudflare to not automatically override or insert a Cache-Control header, unless it is told to do so by a specific Page Rule.

We are going to add some page rules in the next step and this step will make sure that any of the page rules doesn't override the others.

Step #2. Cloudflare Page Rules

Now go to 'Page Rules' tab and create three rules as follows:

Cloudflare Page Rules

NOTE: Free plan of Cloudflare allows only a maximum of 3 page rules.

Just replace your site's address in the page rule URLs:

  • https://www.digitalkube.com/wp-login.php*
  • https://www.digitalkube.com/wp-admin/*
  • https://www.digitalkube.com/*
NOTE: By using the asterisk (*) in the above URLs, we are creating dynamic patterns that can match many URLs, rather than just one. So, don’t forget to add them unless you want to target a specific page.

Let me explain each and every page rule setting and why you need them:

For /wp-login.php* and /wp-admin/*
  1. Always Online: Off (Because we don’t want to make changes to a cached copy on the backend that won’t display any output on the frontend when the site comes live)
  2. Cache Level: Standard (Because it will only cache the static content that has a query string in it so that they load fast with changes displayed in real time)
  3. Disable Performance (It will disable all the performance enhancement modules like Auto Minify, Rocket Loader, Mirage, and Polish because we want the changes to be displayed in real time)
For /*
  1. Browser Integrity Check: On (This setting prevents the misuse of HTTP headers by spammers. It will also challenge users without a user agent or a standard user agent to solve a captcha)
  2. Browser Cache TTL: an hour (It will keep the cached copy of your site for one hour on client browser)
  3. Cache Level: Cache Everything (This will create a static copy of your entire site on Cloudflare’s servers and help your site load faster than ever)
  4. Edge Cache TTL: a month (This is the duration of how long Cloudflare will keep the cache on their servers)

Step #3. Install Cloudflare Plugin (For WordPress Sites)

If you have a WordPress site then this plugin is really helpful. Cloudflare's official plugin automatically purges cache from their servers every time you make a change to your site.

It ensures that you see the most updated content on your site's frontend.

Go to Plugins >> Add New and search for 'Cloudflare'. You'll find their official plugin on the top of the search. Install and activate it.

Add Cloudflare WordPress Plugin

Once you have activated the plugin, go to Settings >> Cloudflare to begin the further setup.

Cloudflare WordPress Plugin Setup

Click on the option to sign in so that we can configure the plugin with our Cloudflare account.

Cloudflare WordPress Plugin API

Now on this page, enter the email address you used to register your Cloudflare account. API Key can be found on 'My Profile' page in your Cloudflare account.

Cloudflare Global API Key

After the setup is complete, turn on the slider for 'Automatic Cache Management'

Automatic Cache Management Cloudflare

This is the most crucial part of this tutorial. It automatically purges the Cloudflare cache whenever you add/edit/delete a post, page, attachment or comment.

All the associated URLs with those posts, pages, attachments, and comments will be purged from the Cloudflare cache. It purges the cache automatically even when you switch or customize a theme within the WordPress admin panel.

Fix WordPress Admin Bar Showing Even When Logged Out

So, we have noticed this problem after applying this trick. The WordPress admin bar is still visible even after you log out of your site. No matter how many times you log in or out, it will stay right there.

The 'Cache Everything' page rule we have created above is the actual culprit here. That rule created a static HTML copy of your website including the admin bar and both are visible to everyone even when logged out.

But no need to worry as nobody can gain access to your site through the admin bar. The bar they see is just a static copy. The links it has don't work.

To fix this issue, we have only one solution and that is to entirely disable admin bar for all users.

Disable WordPress Admin Bar For All Users

If you want to disable the WordPress admin bar on your entire site irrespective of the user, then follow the steps below.

Step #1. Go to Appearance >> Theme Editor >> functions.php

Step #2. Paste the code given below and save the changes.

add_filter('show_admin_bar', '__return_false');

Disable WordPress Admin Bar For Specific Users

If you want to disable the WordPress admin bar for specific users, then follow the steps below.

Step #1. Go to Users >> Your Profile

Step #2. Now uncheck the option 'Show Toolbar when viewing site'

Disable WordPress Toolbar

If you are not logged in as the user you want to disable the admin bar for then go to Users >> All Users and click 'Edit' next to the user and follow Step #2.

NOTE: Make sure you purge the cache from Cloudflare or any caching plugin on your site (if any).

Final Words

Speeding up a site can be a trickier and expensive thing, but Cloudflare gets the job done for no cost at all. Though the configuration process is a bit lengthy, it's totally worth it considering the features and price.

Best Managed WordPress HostingWPX Hosting
Best Managed Cloud HostingCloudways
Best Shared HostingSiteGround
Best Site & Page BuilderElementor
Beautiful WordPress ThemesElegant Themes
Lightest & Fastest WordPress ThemeGeneratePress
Best Lead Generation ToolOptinMonster
Best CDNStackPath
Best Domain RegistrarNamecheap

Related Posts

Ritesh Saini
Ritesh Saini
I’m a Professional Blogger & Internet Marketer living in India. Started my blogging and online marketing journey in 2013 when I was just 18 years old. You can see my work here on this blog and at criticecho.com

1 thought on “Supercharge Site Load Time & Reduce TTFB By 947% Using Cloudflare”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ShortPixel Logo50% Extra Credits
ShortPixel Coupon
Use our exclusive ShortPixel deal and get 50% extra credits on your purchase of one-time credits.