How to configure free CDN (Cloudflare) in WordPress with easy steps?

The CDN ( Content Delivery Network) is getting more popular nowadays. It is observed that our website is contained in rich content like images or videos, Google really wants too. The contents are loading inside a single server for worldwide access and will take more time to load the content. This means that If you are in ASIA, you are accessing a Europe based server which makes delays for data transfer from one end to another. 

The user experience of the website will decrease and no one will visit from another continent. Now coming into the current scenario. We can see that today the site data is distributed around the world. This is happening through CDN technology.

If you are not using CDN, then first note down the Page speed from GTmatrix, Pingdom, Google page speed checker. 

Then you will understand the changes after applying the CDN.

  • What will you get from this article?
  • What is CDN?
  • How can CDN help to speed up your website?
  • list of CDN service providers
  • Configuring Cloudflare CDN on your WordPress website.

What is a CDN service?

Content Delivery Networks or CDN are the multiple server connectivity situated all across the globe to propagate all the website contents to be delivered easily without causing time delay. Some people may confuse the CDN are hosting providers and it isn’t. 

Looking into the below image we can see that the person querying the site which is hosted in the US, which means all the data has to be traveled from the US itself. The person from Europe is accessing the website and it isn’t loading smoothly due to the distance. The user is annoyed with the service provided by the website and never returns back due to time delay.

If a CDN is situated near to his location, then the CDN stores the data of the website and query completed by the CDN itself. The hosting provider’s load on the server reduces and ultimately the user is satisfied with the speed.

CDN working

Primarily the website loads on the webserver and the data changes will be copied to CDN networks. Then the networks of servers propagate the individual data and identify where the user location is and find the nearest CDN and route the query to that server. So these queries and returning data are happening in split seconds. Hence the speed of the websites improves.

Advantages of CDN service.

The major advantage is that the site speed can be boosted.

Every second count and it is valuable for business. If you delay 1 second then the customer will search for your competitor, who can deliver a fast response for the customer’s query to become their profit.

So website design and the service quality is second if the website loads in higher time what will be the purpose of the service quality. 

According to Kiss matrix, a 1-second delay in loading will lose 7% of the business. It is important to use CDN for faster response.

Another notable change you can see with the TTFB ( Time to First Byte). 

TTFB defines the initial phase of your content loading. A WordPress CDN can significantly reduce the TTFB. 

There are a number of reasons for higher TTFB such as misconfiguration, server-level caching problem, Code level errors, etc. The DNS resolving time is also added to the TTFB and there may be changes in the values at certain times.

The contents are compressed all along. It is mandatory to use the GZIP functions on the server because it reduces the contents traveling by reducing the size. We are not talking about images. The images itself compressed in different ways and automatically done while uploading. The  WordPress images optimized plugins are helping to reduce 70% of the size without changing the visual effect. Here CSS and JS are used by the Gzip functions.

Lower the server load.

The website data is distributed in different geographical locations. The data is loaded after implementing the CDN from CDN nodes. The primary webpage query will be supplied by the hosting server itself. Then the rest of the contents delivered by the CDN. So if any changes may come with the actual websites, the changes will re-distributes to CDN. The key point here is the hosting server load will be lesser compared to non CDN websites.

Band Width reduction.

If the website is loading from your datacenter. A number of unwanted bots and malicious scanners are looking for your websites. This time the bandwidth is utilized for the non-worthy users. What will happen, if we implement the CDN?

The CDN records all the traffic including Bots activity and other scanner software. It will effectively stop the CDN. The traffic referred by Google analytics will be actual, whereas the CDN gives you more traffic and users than the analytics. The above said is the reason. 

We already know the hotlinking of other websites in the security article. The hotlinking is another bandwidth-consuming nonprofessional activity and CDNs are disabled this function. We can also disable the hotlinking  within the hosting control panel itself.

High availability

If one of the CDN servers down, automatically redirect the user to another possible nearest CDN. This network never goes down, due to the load balancing technology. CDN can be upgraded with any number of servers according to the connected cached contents. If the larger content then the CDN network load increases. In this scenario, they can add another couple of networks without affecting existing connectivity. So the CDN also comes with high scalability.

What about the SEO advantages?

Yes,  Google officially announced that the ranking factor now determines with the site speed. The algorithm has changed after 2010 and they studied the user experience with site speed. which shows the user is spending less time on slow loading websites. So considering the ranking factor you have to move with the CDN in order to rank well on google.

CDN service providers

  • Cloudflare
  • Fastly
  • KeyCDN
  • MetaCDN
  • StackPath
  • Akamai
  • Amazon CloudFront
  • Microsoft Azure CDN
  • CDN77
  • Google Cloud CDN

Configuring CDN on WordPress website

Here we have selected the Cloudflare as an example. There is a reason for choosing Cloudflare as CDN. For your WordPress site, the Cloudflare will be provided free service for the CDN configuration and monitor your site traffic with DDoS protection.

There are 2 ways for integrating the Cloudflare CDN with your WordPress website. 

  1. Using the hosting provider’s control panel
  2. Manual connection through the Cloudflare website.

Method 1:

Using the hosting provider’s control panel

For this method, some of the hosting providers are paying for the service. Actually, Cloudflare service can avail free of cost by entering their website or install the Cloudflare WordPress plugin.

The control panel will give you an icon for Cloudflare and you have to enter into the app. Then you will be asked for here and you will be asked to setup the Cloudflare account. 

CDN through control panel

Either create a new one or just log in with the existing user id.

cloudflare through control panel2

Once the progress of the setup is completed the indication will show that Cloudflare CDN is activated in your WordPress website.

Method 2 :

Through Cloudflare website

You have to enter the Cloudflare official website and need to create a new account for attaching your website.

cloudflare setup1

Then You have to add the WordPress website for enabling the CDN.

cloudflare setup2

After that, you can select the plan for Cloudflare CDN

cloudflare setup3

The final DNS settings to be complete properly to your control panel

cloudflare setup4

Name server location in your control panel will be shown as your hosting provider’s server name. So first keep their Name server in a safe place and update these Name servers in hosting providers’ control panel.

After updating your Name servers on the control panel return to the Cloudflare and press OK check Name Servers button. It will search for your website and the activated message will be shown like this.

cloudflare setup6

The Cloudflare security Rules

Cloudflare allows you to create 3-page rules for free. Let’s see how the page rules can be set.

cloudflare setup page rules

Open page rule setup and then click on create a new page rule

Then you will redirect to the page showing to enter the website URL. Here I have entered my blog 

URL:- www.yourdomain.com/wp-admin* 

cloudflare setup page rules2

This means the PHP file of your WordPress site is should be secure 

Cloudflare page rule

Then select the Settings are drop-down select the Security, then the rule will be High 

The same should be done for www.yourdomain.com/wp-admin/*  same ruleset.

Another one redirects all HTTP requests into HTTPS. To create a new page rule then select the select the settings section click on SSL, then Next drop down should be Full.

cloudflare setup page rules ssl

Now we can see the Cloudflare Analytics tab. Which will give you complete traffic and country-wise number of users who visited your site? 

Analytics

Thus we had configured Cloudflare CDN in WordPress website. You can also install WordPress plugin for the Cloudflare, the total matrix also can view within the dashboard, which is more convenient for users.

Final words

What do you think about CDN? Still not using or you are configuring right away? 

Yes, configure and feel the change right now.

If you like this article please subscribe to our newsletter for amazing upcoming contents and blogging tips.

Feel free to comment below. I would love to hear from you.

1 thought on “How to configure free CDN (Cloudflare) in WordPress with easy steps?”

  1. Hey Shiju ,

    Excellent post and fab-work here. I truly appreciate your hard-work.

    Glad to say that you have suggested the best ways to configure CDN on wordpress site. You have explained the points very nicely along with all the crucial & necessary information that is true enough to understand and educate the readers. Your post is really providing in-depth knowledge and have also boosted my knowledge upto some limit.

    Your each of the suggested methods to configure CDN in wordpress works great but according to me integrating the cloudflare CDN with wordpress site using cloudflare website is better option. Your steps (including images ) to configure CDN through cloudflare website are so clear and providing better understanding as well.

    Eventually thanks for sharing your knowledge and such a helpful post.

    Reply

Leave a Comment