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

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:

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:

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

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:

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.

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.

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

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.

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

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.

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 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’

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:

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/*

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

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.

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

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

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.

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

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’

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.

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.