Skip to content

How to configure CloudFlare CDN and improve your website SPEED on a 40%

May 29, 2020
In this post we will teach you how to configure CloudFlare CDN, and with it, improve the speed of YOUR WEB PAGE in 40% or MORE.

In this post we will teach you how to configure CloudFlare CDN, and with it, improve speed of your website in 40% OR MORE. ENTERS!

 

WE START:

Welcome to a new post.

Today the loading speed of your website greatly influences whether the visitor leaves your site or not, and not only that, it also influences SEO.

In this guide, we will teach you what this company is, how to install CloudFlare on your server, and also how to configure it.

We will separate the guide into different sections, follow them step by step. Ready? Let's go!

STEP-by-STEP guide to configure CloudFlare CDN

What is CloudFlare?

CloudFlare is a company that resides in the United States, which offers internet services oriented to servers and computer networks.

In addition, it provides security services for servers, and provides a fast content delivery network.

In simple terms: it is a company that will help you make your website fly. ?

How to install CloudFlare

In order to install CloudFlare, it is necessary that you already have your website and server operating correctly. Once you are sure of it, proceed with the following steps:

1.- Access the registry inside the official CloudFlare page, and fill out the form with your data.

2.- When your account is created, you must access it, and in the control panel, it will ask you to add a website. Enter your domain name, including the extension.

blank

3.- Now, you must click on «Scan DNS Records». CloudFlare will begin to process your website in search of the DNS of your website. This usually takes a moment, and to shorten the wait, they will show you an intuitive explanation video (it is in English).

blank

4.- Once the scan is finished, CloudFlare will detect your DNS settings for your website. If you already have experience with DNS, you will know what to do, but if not, check only the DNS option of type "A" that has your domain name, and the option of "CNAME" that has the value of "www".

When you check it, you will see that it will turn an orange cloud with an arrow through it. This indicates that the CloudFlare DNS service will be activated for that section of the web.

blank

5.- Well, now, click on «Continue». Next, CloudFlare will show you a table to choose what type of account you want to have for that website you want to add. For now, click on the "Free" option.

blank

6.- Now, you must update your Nameservers on your server. Notice that on the left it shows you the ones you currently have, and on the right, those that you have to change. Take note of them.

blank

7.- Well, to change the Nameservers of your server, you must log in to your Hosting account, and look for the "DNS Configuration" section (almost all hostings have that option).

While there, you will have to change the old Nameservers for those of CloudFlare, as shown in the previous point.

If you do not find the option in your hosting provider, contact support with them asking for the location.

8.- When you update them, go back to CloudFlare, and then click on «Continue».

9.- CloudFlare will redirect you to the control panel of that website, where it will show you several sections:

  • Status: It is the state in which the web is. If you have configured the new Nameservers correctly, you should see it under "Pending". If for any reason it was configured wrong, after 24 hours the state of the web will not change, and you will have to make corrections.
  • Security Settings: Don't pay too much attention to it for now, but it is the level of security enabled for that account. We will touch this later.
  • Subscription: the type of account that this website has: Free, Pro, etc.

10.- After a few minutes, if you configured the Nameservers correctly, CloudFlare will now tell you that the status of your website will be "Active".

Finalizing CloudFlare installation

However, you must allow at least 24 hours for the settings to be applied properly.

After 24 hours, we continue!

11.- Ready, up to this point you should have waited, right?

Well, the configurations must have spread by now. You have done the hardest. Now yes: to configure CloudFlare CDN for our website.

How to set up CloudFlare CDN step by step

I'll show you what has worked for us to blow up websites when setting up CloudFlare CDN, so be prepared because this is a super guide. Let's go there!

Analytics

This section will show you the statistics of your website: cached requests, saved bandwidth, unique visits to your website, stopped attacks, among other technical graphs.

This section is only informative for you.

We recommend you:  How to process a form with PHP and AJAX

DNS

Unless you want to add a new sub-domain, or some other DNS configuration to go through CloudFlare CDN, you will enter here to configure it.

Enter the name of the sub-domain, the IP address of the web, and tap on the cloud so that it turns orange, and add it.

SSL

Here are several sections to configure. We recommend that the SSL level you have is set to "Full", to ensure complete protection.

We will not touch this section any more because it is not for the purposes of making our website faster.

In order to configure SSL with CloudFlare, we have a post that details how get free SSL certificates.

Firewall

In this section you will find various settings to protect your website from unauthorized access. From here, we recommend that you configure the following:

  • Security Level: High.
  • Challenge Passage: 30 minutes.

Access

This option protects internal resources by authenticating against identity providers that you already use. It's a bit technical, plus you have to pay to use it. We will not touch it.

Speed

This is a very important section to optimize speed. As you will notice, it says "Speed" in English.

If you are using a WordPress plugin to optimize JavaScript, CSS and HTML files, I do not recommend checking the "Auto Minify" boxes, as it may corrupt your site.

We recommend activating the "Brotli" option to enable HTTPS compression.

Similarly, we recommend activating the "Rocket Loader" option, to improve the printing of pages that include JavaScript.

IMPORTANT NOTE: I remind you that these are ONLY RECOMMENDATIONS, which have worked for us. Before continuing with the post, please verify that your website works correctly.

If so, then we continue with the post, if not, go deactivating Speed options to see which one gave you the failure.

Caching

Caching is another fundamental section for the speed of your website, and it is what regulates how often copies of your website are made on different CloudFlare CDN servers, in addition to user browsers.

Don't worry, this is good, nothing internal to your website is stored such as databases, etc.

From this option, we recommend you configure the following:

  • Cache Level: Standard.
  • Browser Cache Expiration: 4 hours.
  • Always Online: On.

Workers

This option is to run JavaScript on the CloudFlare side, we won't touch on it in this post. You also have to pay for it.

Page Rules

This IS ANOTHER VERY IMPORTANT SECTION to configure CloudFlare CDN. This option allows you to configure certain settings to your websites to apply something special to them, and that is just what we will do.

By default, you are entitled to 3 Page Rules. Add a Page Rule, and apply the following settings:

blank

In this way, we will save a lot of bandwidth, also improving the performance of the server.

This can bring certain disadvantages, such as:

By requesting updates every 4 hours, all the changes to your website that you make will not be noticed instantly. If you want them to be noticed instantly, you should do the following:

Access the Cache panel, and click on the "Purge Everything" button (if you made a lot of changes to your website and want to refresh the changes), and wait a minute.

Or click on "Custom Purge" (if you only want to see the changes of a certain section), copy the URL and paste it in the section.

Another important thing I must tell you is that when making these changes, we cache the entire web, even the wp-admin of the WordPress site.

This section, being constantly used, we want fresh content, because if we cache it, it may even stop working correctly. So we must create another Page Rule with the following settings:

blank

Ready, with all this, we will have this section covered.

Network

Here we apply certain settings at the network level, of which I recommend you configure the following:

  • HTTP / 2: On.
  • WebSockets: On.
  • Pseudo IPv4: Add Header.
  • IP Geolocation: On.
  • Maximum Upload Size: 100 MB.

Traffic

From this section, I recommend that you buy the Argo service if your website already has enough traffic, it improves even MORE the response speed of your website. We have tried it and we are satisfied.

Scrape Shield

From this option I recommend that you configure the following:

  • Email Address Obfuscation: On.

All the other sections that were not mentioned are things that we will not touch because they do not go with important settings.

And voila, now this CloudFlare CDN configuration has been left to 100%.


Before concluding the article, I would like to tell you that we like tech tutorials For our entire audience, we invite you to take a look at us and see what you like.

We also have articles related to programming world: courses, tutorials, help, etc. Sure there is something you may like.

Were you able to set up CloudFlare CDN? Give us your opinion in the comments, please!

See you in another new post.