How to Setup Cloudflare CDN for WordPress Blog

How to Setup Cloudflare CDN for WordPress Blog

Every second counts when it comes to a website’s loading time. If a site takes more than a few seconds to load than expected, it’ll make people abandon it almost immediately. This, in turn, affects the bounce rate, which can lead to worse search engine rankings. 

People expect to get access to the information on the internet as fast as possible. Therefore, it is important to align your website’s performance with your customers’ expectations. 

This article will discuss how Cloudflare CDN can help you increase your WordPress website’s loading speed. We’ll also provide a step-by-step guide on how to set it up.

What Is Cloudflare CDN?

One of Cloudflare CDN’s features is increasing website loading speed. It works by keeping multiple copies of your website’s data in proxy servers worldwide. 

This means that when people want to access your content, the request is sent to servers near their location to ensure immediate processing.

Cloudflare CDN also provides security against potential DDoS attacks, ensuring data privacy for your business and customers. 

How Does Cloudflare Help Your WordPress Blog? 

Here are some of the key benefits of using Cloudflare for your WordPress website: 

  • Fast response time. Cloudflare uses edge computing, which is responsible for the efficient transfer of data from one server to another. This feature reduces the waiting time for your site visitors, improving the overall user experience. 
  • Site protection. Users can customize website security settings through the Cloudflare dashboard to block potential online threats. Some security features include a web application firewall (WAF) and DDoS protection
  • SSL certificate. Secure Socket Layer (SSL certificate) is a piece of software that protects website data by ensuring that only authorized computers or browsers can access it. 

Cloudflare offers an SSL certification for WordPress site owners to protect client information and transactions. Users can then choose between Cloudflare’s flexible or full SSL encryption, depending on the level of security they need. 

  • Automatic platform optimization. Cloudflare helps to boost the overall performance of your WordPress site with automatic optimization. The process includes image resizing and automatic cache purge during website updates.

Setting Up Cloudflare on WordPress

Installing Cloudflare on your WordPress site is quick and straightforward. You can do it manually or through your hosting provider. 

For example, Hostinger automatically integrates Cloudflare in their WordPress hosting plans. This is great for site owners who want the full package needed to run a secure website without having to put much effort or thought into it.

If you’d rather install Cloudflare manually, you can do so by going for their free plan. 

There are also paid plans available for those who want enhanced security and functionality. They start at $20/month and come with features like web application firewall (WAF) rulesets, mobile optimization, and DDoS alerts. 

Once you have decided on a suitable plan, follow these steps to set up Cloudflare on your WordPress website.

1. Creating a Cloudflare Account

Signing up is easy and takes only a few minutes. Just make sure to have your WordPress site URL ready

Cloudflare signup page
  1. You now have a Cloudflare account but still need to add your website to access the services.

2. Adding Domain Name to Cloudflare

  1. Go to your Cloudflare dashboard. Select the Add Site button.
Adding a site on Cloudflare
  1. Add the URL of your WordPress website. Cloudflare allows its users to add as many websites as they want, even for the free version. 
Adding a domain name on Cloudflare
  1. Now, select your plan. If it’s for a blog or personal website, we recommend choosing the Free version. It comes with all of the needed basic features to protect your website from online threats and enhance its loading speed. 

Those who run an online store or a high-traffic website can subscribe to the Pro or Business plans for maximum performance benefits. Cloudflare’s premium plans come with automatic website updates and more security options. 

Cloudflare plans

3. Checking the DNS Records of Your Domain Name

Once your WordPress site is added to Cloudflare, you’ll be prompted with the DNS details of the domain name. In this step, enable or disable Cloudflare for specific subdomains.

To activate, simply toggle the cloud icon to an orange color.

Enabling Cloudflare for subdomain

We highly suggest enabling Cloudflare for your naked domain name and www subdomain. This way, Cloudflare will work on both www and non-www versions of your site.

Once you are done, press Continue to proceed to the next step.

IMPORTANT: It’s not recommended to enable Cloudflare for cPanel, mail, FTP, or any other subdomains as it can result in numerous DNS issues.

4. Pointing Your Domain Name to Cloudflare Nameservers

After activating Cloudflare for your domain and subdomains, you will see the Cloudflare nameservers on the next page. It is essential to replace old nameservers with Cloudflare’s.

  1. Access the Cloudflare nameservers by clicking on the DNS tab on the dashboard.
  2. Under the DNS Management section, you will see the Cloudflare nameservers assigned to your website. Copy these values.
Cloudflare nameservers

3. Open a new browser tab and go to your hosting control panel. For Hostinger customers, you’ll find the nameservers’ details under the Domains tab.

Updating Hostinger nameservers
  1. Under the Update nameservers section, replace both values with those from Cloudflare, then click Save.
  2. Go back to the Cloudflare page and press Done
  3. Check the DNS tab on Cloudflare to see if the nameserver update was successful. 

It may take up to 72 hours for DNS to propagate worldwide. Once the nameservers update is complete, you will receive an email confirmation from Cloudflare. 

Alternatively, you can check the update status on the Cloudflare website. During this process, your page will not face any downtime.

5. Configure The HTTPS Settings

Configuring the SSL certificate

Hypertext Transfer Protocol Secure (HTTPS) secures website data through an SSL certificate. It is important to configure this setting to protect your WordPress site against potential data breaches and data leakage. 

It only takes two steps to set up HTTPS. 

  1. Go to the SSL tab on your Cloudflare dashboard. Choose Full SSL if you have an existing SSL certificate or Flexible SSL if you don’t.

    Flexible SSL is for protecting data transfers between the WordPress site and Cloudflare only. Meanwhile, Full SSL provides end-to-end protection from your site to the visitor’s server. 
  1. Head to the Edge Certificates section and turn on Always Use HTTPS. It might take a while for the changes to be visible, so check it after a few hours. Once you see a confirmation message and a padlock icon near the site’s URL, you’ll know that it’s active. 

If you have a hosting plan with Hostinger, take advantage of the free SSL certificate. Find it in the Advanced section of the hPanel. 

SSL folder on the hPanel

6. Installing and Configuring the Cloudflare WordPress Plugin

To finish up the process, we need to install the WordPress Cloudflare plugin for WordPress. This tool is loaded with a number of handy features to help you manage the CDN, such as:

  • One-click WordPress optimization
  • Web application firewall (WAF) rulesets
  • Automatic cache purge
  • Statistics
  • Built-in Cloudflare settings for easy modification

Here is a step-by-step guide on how to install the Cloudflare WordPress plugin:

  1. Access your WordPress dashboard and head over to Plugins -> Add New
Adding a new plugin on hPanel
  1. Search for the Cloudflare WordPress plugin. Install and activate it. 
Cloudflare plugin on WordPress
  1. Go to the Settings page and select Cloudflare.
Configuring Cloudflare settings on WordPress
  1. Select Get your API Key from here located below.
Getting Cloudflare API key

5. A new window will pop up. Go to the API Tokens tab, then select View from the Global API Key option.

Cloudflare API tokens

6. Enter your Cloudflare password, and then copy the provided API key.

7. Go back to the plugin Settings page, and paste the API key in the login field. Hit the Save API Credentials button. 

Once Cloudflare is set up and log in to the WordPress plugin, you will see several settings:

  • WordPress optimized settings. Clicking Apply Recommended Cloudflare Settings will reset values for caching and security level, Auto Minify, and IP geolocation. Cloudflare will automatically apply the settings to your WordPress site to enhance its performance. 
  • Automatic Platform Optimization (APO). This Cloudflare plugin feature is for keeping copies of your website data to increase loading time. It ensures that clients can instantly access your content. With automatic platform optimization, Cloudflare stores both static and dynamic content in its edge network.
  • Purge cache. Caching is the process of copying the website data and placing it in temporary storage for instant access. Cache purge means that Cloudflare will delete all previously stored information so it can copy new data. 

Using the Cloudflare plugin is a convenient way to manage settings within your WordPress dashboard. 

Other Cloudflare Features: An In-Depth Look 

There is a lot that Cloudflare has to offer. Here are just some of the additional features that Cloudflare comes with, free and paid.

1. Auto Minify

Auto Minify is a service that automatically cleans up the website’s code, making it more compact. Cloudflare does this by removing unnecessary characters on your WordPress website to boost site performance and improve user experience. 

This is applicable for Javascript, CSS, and HTML and is perfect for site owners who have a lot of plugins on their WordPress site. Auto Minify is available on all Cloudflare plans.  

2. Brotli

Brotli ensures quick data transfer between servers and browsers. It works by compressing files such as images, text, and font. This feature helps to boost the overall performance of your WordPress site. 

To turn it on, simply head to the Speed menu and look for it under the Optimization tab. Brotli is available to all users at no cost. 

3. Rocket Loader

Rocket Loader is responsible for increasing page load speeds, especially for pages that use JavaScript. It ensures that content like text, images, and fonts load correctly. 

Enable this feature on the Cloudflare dashboard under the Speed tab. Use it on all pages or only specific pages of your WordPress websites. 

To activate it on specific web pages only, head to the Page Rules menu, add the URL, and pick a setting. 

Rocket Loader is available for all Cloudflare users for free. 

4. Firewall

Cloudflare’s firewall blocks potential online attacks to keep your website’s content secure. The free version comes with DDoS protection and optimized security rules for CMS platforms like WordPress, Joomla!, and Drupal by default. 

Those who want to boost the security of their WordPress site can subscribe to Cloudflare’s premium plan. It comes with a web application firewall (WAF), customizable security rules, and access to analytics reporting. 

Users can configure their security settings under the Firewall tab. 

5. Network

To enhance website performance, head to the Network menu of your Cloudflare dashboard. Network settings allow the use of HTTP/2 and WebSocket for enhanced site functionality. 

In the Network settings page, WordPress site owners can also enable IP address geolocation to identify where their site traffic is coming from. Most network features are free except for Response Buffering and True-Client-IP-Header, which are available only for the Enterprise plan owners.

6. Page Rules

Page Rules focuses on HTTPS rewrites and preferences on particular pages of your WordPress site. This feature gives site owners complete control over Cloudflare settings. 

To configure Cloudflare Page Rules, head to the dashboard, add your preferred URL, pick a setting, and hit Save. Anyone can set page rules, but the free version only allows a maximum of three.

7. Image Resizing

Image resizing is the process of minimizing image measurements to boost the performance of your WordPress site. With this service, Cloudflare also automatically adjusts images on your site to fit any device. 

This feature is essential for maintaining a consistent website appearance. Moreover, smaller images require less storage space, which contributes to a faster loading time. If your WordPress website loads quickly, it can increase ranking in search results as well. 

Anyone who wants to take advantage of image resizing can subscribe to a Business plan for $200/month. It comes with up to 100,000 image requests per month. 

8. Mirage

Mirage increases page load speed for any type of website. It works by temporarily putting image placeholders so that visitors can see your website’s content as it is loading, instead of a blank page. This feature is handy for mobile devices that have a slow internet connection. 

You can add this to our WordPress site by upgrading to a Pro plan for $20/month. The Pro plan also comes with a web application firewall, image optimizations, and DDoS protection. 

9. Polish

Polish compresses images by removing unnecessary data such as the camera manufacturer or the image details. Cloudflare minimizes images in two ways – lossless and lossy

With lossless compression, Cloudflare minimizes the images while retaining the quality. It is perfect for delivering high-quality content without sacrificing load speed.

On the other hand, lossy compression reduces the image size and quality to boost loading performance. 

Cloudflare’s Polish feature also allows users to save images in WebP format, which requires less storage space than PNG and JPEG formats. 

WordPress site owners can use Polish by upgrading to the Pro plan. 

Cloudflare Integration With Hostinger

Hostinger users can easily configure Cloudflare from their hPanel: 

  1. Log in to your Hostinger account to access the hPanel.
  2. Go to Domains and click Cloudflare. 
Domains section on the hPanel
  1. Complete your Cloudflare purchase and click Set up
  2. You will see the Cloudflare control panel with settings for service status, SSL communication, security level, and subdomain. Select the Service status and set the SSL communication options to Full to enable end-to-end data protection. 
  3. If applicable, choose the subdomains you want to encrypt. Once you’re done, press Save
Cloudflare control panel

Managing Cloudflare through hPanel is a convenient way to keep track of domain, hosting, and security settings from one platform. Any changes you make on Cloudflare via hPanel will automatically reflect on your hosting account too. 

Conclusion

A Content Delivery Network is an important service that can help you boost your site speed. Out of the many options available, we highly recommend using Cloudflare. It offers a reliable CDN service with excellent security and performance improvements.

You can set up Cloudflare on WordPress for free. Here’s a quick summary of the steps we’ve discussed in this article:

  1. Create your Cloudflare account.
  2. Add your domain name to Cloudflare.
  3. Check the DNS records of your domain name in Cloudflare and activate the service for your naked and www domains.
  4. Point your domain name to the Cloudflare nameservers.
  5. Configure the HTTPS settings
  6. Install the WordPress Cloudflare plugin for easy configuration.

Make sure to look out for Cloudflare’s free and paid features such as one-click WordPress optimized settings, Rocket Loader, and Auto Minify to optimize your WordPress website further.

Author
The author

Klara R.

Klara is a digital content writer for Hostinger. She enjoys creating eCommerce sites and is always looking to expand her IT knowledge. During her free time, Klara likes to travel and experience different cultures.