How I Used Cloudflare to Reduce Page Load Time from 4.02 Seconds to 1.12 Seconds

A computer and clock showing speed and words "How I Used Cloudflare to Reduce Page Load Time"

The screen shots and web page tests in this article reflect our old site design from October 2015.

Did you know that Google might start crawling fewer pages on your site if your web page takes longer than 2 seconds to load?

And did you know that one of the best ways to get measurable results in your efforts to reduce page load time is by utilizing a Content Delivery Network (CDN) like Amazon Cloudfront or Cloudflare?

This post is Part One of a two-part series that will explain what a CDN is, why we decided to try one, and how it made a measurable difference in page load time on our website.

Be sure to check out Part Two where we discuss some troubleshooting tips for Cloudflare and WordPress.

Why You Need to Reduce Page Load Time

It’s a widely known fact that Google has been incorporating page load speed into search rankings.

Providing the fastest load time possible for your visitors is more critical than ever. If it takes Google longer than 2 seconds to fetch a single URL, GoogleBot will reduce the number of pages it crawls on your site.

There are many ways to reduce page load time — by minimizing your JavaScript and style sheet files, optimizing your images, or using caching and beyond.

Despite our best efforts to reduce page load time, our WordPress page load speed still clocked in at 4.02 seconds.

And our YSlow score hovered between a “C” and “D” grade no matter what we did.

For awhile I considered a CDN, but honestly was afraid to try it.

But then several clients inquired as to whether a CDN would be a good idea for their websites, too.

Since I never like experimenting on a live client site, we decided to set up Cloudflare on our site and see how much difference a content delivery network would make.

Before I talk about my experience, though, let me tell you a little about what a CDN is.

What is a CDN?

Wikipedia defines a CDN as follows: “Content Delivery Network (CDN) is defined as a system of distributed servers (network) that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.”

In other words, it doesn’t matter if your visitor is looking at your webpage from Michigan or from Singapore, the web page will be delivered from the server closest to that visitor.

CDNs have web servers located all over the world, and they’ll store a copy of your webpages and other assets like images on those servers.

This way, no matter where your visitors are, they will have access to a webpage delivered from the nearest server to their computer. That geographical distance is what has the greatest impact in speeding up the page load time for your users.

In addition, because a CDN gets what it needs to display on a webpage from its own servers, it significantly lightens the load. Resources are spread over multiple CDN servers instead of everything being loaded from your web server.

This also reduces the bandwidth that hits your hosting provider server which, in turn, can potentially save you bandwidth cost and reduce bottlenecks.

How to Choose a CDN

Honestly, choosing a CDN can be tricky since there are many options available. Finding the right one depends entirely on your needs and the popularity of your site.

To me, it boils down to 4 main factors:

  • Where are your users located? If most of your users are located in the US, then it makes sense to go to a provider that has more servers located in the US. If your users are worldwide, it makes sense to use a CDN that has a stronger international presence.
  • How much traffic do you get? If you are getting a lot of traffic, you should use a CDN that is capable of handling high traffic volumes such as Amazon CloudFront or Akami. Otherwise, you would be better off using a free service like Cloudflare.
  • What type of content will you provide? Are you streaming media such as games, videos or audios? If so, you should concentrate on a CDN that specializes in streaming.
  • What type of services do you provide? If you are a marketer who needs solid data on how and when your user accesses the content, then you need a CDN that provides detailed real-time statistics. If you have sensitive information, then you need a CDN that provides secure encoding during transfer.

Now that you have some idea of what a CDN is, let’s look at how I used one to reduce my page load speed to almost 25% of what is was.

How I Reduced Page Load Time

For a WordPress site, setting up a CDN can be easy and painless.

I decided to use Cloudflare as my CDN provider because it’s free, it integrates nicely with WordPress, and it has security features that analyze and prevent malicious threats.

I already use the WordPress plugin WPFastestCache, which handles caching and minifying and really helps improve web page performance.

But putting the site on Cloudflare would give it even more of a performance and security boost.

How to Set Up a Cloudflare Account

There are 2 possible ways to sign up for CloudFlare: You can manually sign up at Cloudflare, or some web hosts have an automatic CloudFlare sign up option in CPanel.

I strongly suggest you DON’T use this automatic option.

We used it when we first activated Cloudflare thinking it would be easier if our hosting provider did all the work for us.

But upon later investigation, I found many reports of people’s sites going down for days because of poor host setup, limitations, and domain propagation issues. Still, we did not experience any of these issue with A2 Hosting, our hosting provider.

In addition, doing the manual setup is really easy and avoids potential downtime or headaches should you decide to move your domain to another hosting company.

Once I signed up with Cloudflare, it was time to get my website set up with the Cloudflare CDN.

There are basically 4 steps:

1. Add Your Domain

Cloudflare will scan your site DNS setup. Once the scan is finished, you need to click on the continue button to proceed with the setup.

Screenshot after adding a domain in CloudFlare

2. Review and Verify

After the scan, Cloudflare will show you a list of all DNS records of your main domain and subdomains they found.

Screenshot to verify domain and subdomain in CloudFlare

3. Select a Plan

You will be asked to choose a plan, performance and security settings. Cloudflare defaults to the paid version so if you don’t want the additional features of the paid version, be sure the plan setting is free.

Screenshot to select settings in CloudFlare

4. Update Your Nameservers

You will be asked to update your name servers and point them to Cloudflare’s nameservers. Various registrars have different ways to update the nameserver so check their documentation for the exact steps.

It can take up to 48 hours for the new information to be updated on the Cloudflare servers. Once the propagation is done, Cloudflare will notify you via email.

There are other things you can tweak to improve security and page speed but by just using a CDN, you will see measurable benefits.

The Results

So how did CloudFlare help us reduce page load time on our website?

We went to GTmetrix to see a before and after comparison of the site. We were happily surprised to see that the page, which originally took 4.02 seconds to load, now took only 1.12 seconds.

That means the original page took 3.6 times as long to load as it does now!

And YSlow showed a grade leap from Grade D to Grade A. While grades are only good for comparison, that’s a significant improvement just from using a CDN.

GTMetrix Results Before:

Page Speed Test using GTMetrix.com before CDN activation

GTMetrix Results After:

Page Speed Test using GTMetrix.com after CDN activation

Web Page Test showed that the page which originally took 4.651 seconds to load, now took only 1.957 seconds. This meant that according to the Web Page Test tool the original, non-CDN version was 2.4 times slower to load.

Web Page Test Results Before:

Page Speed Test using WebPageTest.org before CDN activation

Web Page Test Results After:

Page Speed Test using WebPageTest.org after CDN activation

I’m very pleased particularly considering that the tools and services we used are completely free and still made such a huge impact on my site.

While you may not see as good an improvement, or you might see better, there is really no reason why you shouldn’t try adding Cloudflare on your site to reduce page load time.

Learning Along the Way

We’ve learned some tips and tricks in the past few weeks that may help you troubleshoot your CDN integration. In Part Two we continue our discussion on using a CDN to reduce page load time and share some troubleshooting tips.

Over to You

So let me ask you: Have you set your WordPress site up on a CDN? Which one are you using and has it helped reduce page load time for your site? We’d love to hear about your experience in the comments below.

 Image Credit: Fotolia

8
Leave a Reply

avatar
4 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Shreya DasDeb PottsRobin StrohmaierMichelle PhillipsMehdi Akram Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Shreya Das
Guest

Thanks for sharing the valuable information. Go to https://developers.google.com/speed/pagespeed/insights/ and check your page speed. Here also you can detect the critical errors which down your page load speed. You can also download the report. By: mozinfotech.com

Michelle Phillips
Guest
Michelle Phillips

Hi Shreya, thank you for taking time to leave a comment. There are many good tools for testing page speed. We did use many of these tools including GTMetrix but found that our YSlow grade wouldn’t improve until we put our site on a CDN.

Deb Potts
Guest
Deb Potts

Michelle, I know you put a lot of effort into these posts. But it’s well worth it in my book. I love the screen shots and step by step, clear instructions. Top notch my friend!

Michelle Phillips
Guest
Michelle Phillips

Thank you so much, Deb! I’m really glad to know that the instructions were clear to you and really appreciate you taking the time to leave a comment!

Robin Strohmaier
Guest

Michelle, this is a fantastic article on how to set up a Content Delivery Network (CDN). I haven’t set up a CDN on our WordPress site and when I do, I will be referring to this. I’m looking forward to part 2! Thank you for the step-by-step tutorial!

Michelle Phillips
Guest
Michelle Phillips

Robin, I so appreciate your comment and am glad to know you’ve found this article helpful. This was one of those projects that I kept putting off because of the “unknowns.” But upon hearing the news about Google crawling less pages on sites that took 2+ seconds to load, I knew it was time to take the plunge. And like many technology endeavors, it wasn’t so bad after all 🙂 I look forward to hearing about your experience setting up a CDN for your WordPress site! Thank you again for your feedback.

Mehdi Akram
Guest
Mehdi Akram

Nice & helpful article.

Michelle Phillips
Guest
Michelle Phillips

Thanks for letting me know, Mehdi! Glad you found the post useful.

Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close