Logo Edyrecommends

How to Use Cloudflare with WordPress

A Step-by-Step Guide with screenshots and explanations.


How to use Cloudflare with WordPress

This article aims to provide you with how to use Cloudflare with WordPress using the free services that Cloudflare offers and demonstrate how you can use them to manage your WordPress websites.

In today’s digital landscape, having a fast and secure website is crucial for any business. Slow loading times and security vulnerabilities can lead to a loss of customers and revenue. One tool that can help address these issues is Cloudflare.

Using the free Cloudflare service with WordPress can optimize your site’s performance and security while improving reliability. This tutorial will explore how to use Cloudflare with WordPress and the benefits it can bring to your website.

From improved website speeds to enhanced security features, you won’t want to miss out on this powerful tool. So, grab a cup of coffee, and let’s dive into the world of Cloudflare and WordPress.



serpple

A quick overview of Cloudflare


How Cloudflare Works

Cloudflare is a web performance and security company that helps make the internet work as it should. It provides content delivery network (CDN) services, cloud cybersecurity, DDoS mitigation, and ICANN-accredited domain name registration services. Cloudflare has over 20 million customers worldwide and serves over 25 million internet properties in over 200 countries. Its global network spans over 200 cities in 90 countries and handles over 10 trillion monthly requests.

Cloudflare also offers a range of products to help businesses improve their website performance, including its CDN, DNS, DDoS protection, and security solutions.


How Cloudflare works?

Cloudflare acts like a bouncer at a party, standing between your web host and the incoming traffic to your website at the DNS level. With the ability to check each person as they enter, Cloudflare’s protection ensures that your website stays reliable and secure.

When a user attempts to access your website, the request goes to Cloudflare’s servers first. If it is from a trusted source, the request is forwarded to your web host, and your visitor can access the requested page. Otherwise, if the source is suspicious or malicious, Cloudflare will block the request


What are the benefits of Cloudflare with WordPress

  • CDN
  • Caching
  • Security
  • User Experience

Improve Website Performance (CDN)

outranking web logo black long

Looking for a tool to help you create content that ranks?

NOw AI writer with GPT4

Create Content that Drives More Traffic and Revenue to your Website

The primary benefit of using a CDN like Cloudflare is improved website performance. CDN can significantly reduce website load times and improve website speed by caching website content on servers closer to users.

Cloudflare is especially important for websites with visitors from all over the world or experiencing high traffic volumes.


Reduce Bandwidth and Server Load (Caching)

Another benefit of the Cloudflare free CDN is that it can reduce bandwidth usage and server load. Caching website content on the Cloudflare network reduces the traffic that needs to be served directly from a website’s server.

It can help prevent server overload during periods of high traffic and reduce the risk of downtime or slow performance.


Improve Website Security (Security)

In addition to performance benefits, the Cloudflare CDN can also improve website security. Cloudflare’s web application firewall (WAF) can block malicious traffic before it reaches a website’s server, while its DDoS protection service can help defend against distributed denial of service (DDoS) attacks.

It can also provide SSL/TLS encryption, which can help secure website data and protect against man-in-the-middle attacks.


Improve User Experience

Cloudflare’s CDN also offers a range of advanced features that can further improve website performance and user experience.

For example, it can automatically compress images and other content to reduce file size and improve load times. It also supports HTTP/2 and HTTP/3, the latest protocols for web communication, which can further accelerate content delivery.


Why Integrating WordPress with Cloudflare is Beneficial?

WordPress is one of the most popular content management systems (CMS) in the world, powering over 43% of all websites on the internet. Because WordPress is open-source and widely used, it can be a popular target for cyber attacks.

Integrating Cloudflare with WordPress can help protect against these threats by adding an extra layer of security and performance optimization. Additionally, Cloudflare has a WordPress plugin that makes setting up and configuring its services for WordPress websites easy.


How to Use Cloudflare with WordPress?

Configuring Cloudflare for WordPress may appear to be a complicated process, but no need to fret! You’ll find it’s not too difficult by carefully following the steps. I’m here to help walk you through the process with a step-by-step guide


Step 1: Sign Up for a Cloudflare Account

The first step in setting up Cloudflare with WordPress is to create a Cloudflare account. You can do this by visiting the Cloudflare website and clicking the “Sign Up” button. Follow the prompts to create your account and log in to your Cloudflare dashboard.


Sign Up for a Cloudflare Account

Step 2: Add Your Domain Name to Cloudflare

Once you’ve created your Cloudflare account, you must add your website to Cloudflare. To do this, click the “Add Site” button in your Cloudflare dashboard and enter your website’s URL.


Adding a Domain Name to Cloudflare

Cloudflare scans your site’s current DNS records to try to import as many as possible.


Step 3: Select a Cloudflare Plan

After adding your domain name, select a plan that suits your needs.

Cloudflare offers four plans:

  • Free
  • Pro
  • Basic
  • Enterprise

Cloudflare Plans

A free plan includes basic features like DDoS protection and a shared SSL certificate. You may upgrade to a Pro, or Business plan or need a Cloudflare Enterprise plan if you are a large business.

The free plan is all you need for your WordPress website. It is absolutely enough for most needs. Included in the free plans are 5 Firewall rules.


Step 4: Verify Your DNS Records

After selecting your plan, Cloudflare will show you a list of DNS records it found. You need to verify them to ensure that they are correct. Check if all the necessary DNS records are present and accurately entered. These records typically include A, AAAA, CNAME, and MX records.

Review Your DNS Records

If any of the DNS records are missing, you can add them by clicking on the “Add Record” button. Choose the type of record you want to add, enter the relevant details, and save the changes.

If there are any unnecessary DNS records, you can delete them by clicking on the “Delete” button. It reduces clutter and ensures that only the essential DNS records are present.

In my experience, it gets most of your A records, CNAMEs, and MX records. However, it frequently misses TXT records (like SPF, and DKIM, and other records used to validate services). These will need to be added manually.

Take your time and compare all DNS settings very carefully with your existing web hosting company


Step 5: Update Your Nameservers to Point Toward Cloudflare


Now you must update your nameservers to Cloudflare nameservers to use its services.

Cloudflare Nameservers

Follow the instructions below to update your nameservers to point your domain to Cloudflare:

  • To update your nameservers, log in to your domain registrar. This is the company from which you purchased your domain name.
  • Locate the DNS management section, where you can edit your domain’s nameservers.
  • Replace the current nameservers with the Cloudflare nameservers provided during the Cloudflare setup process. Typically, there are two nameservers that you need to update.
  • After updating the nameservers, save the changes.

Updating Nameservers

To verify that the nameserver changes have taken effect, you can use an online DNS checker tool to check the DNS records of your domain. It will show you the updated nameservers.

After updating the nameservers, you need to wait for DNS propagation. This process can take up to 24 hours, during which the updated nameservers propagate to all the DNS servers worldwide.

Cloudflare is now set up, and you can begin exploring the features. In the following sections, I show you how to use Cloudflare with WordPress with the optimal settings.


Configure Cloudflare Settings

Once the nameservers are updated, you can configure the settings. This involves selecting which Cloudflare services you want to use, such SSL, caching, speed or firewall rules.


How to use Cloudflare SSL/TLS (Overview)

Cloudflare provides a free SSL certificate that provides secure communication between a user’s browser and a web server, which is essential for protecting sensitive information like passwords, credit card numbers, and other personal data.

With Cloudflare SSL, you can enable HTTPS (Hyper Text Transfer Protocol Secure) on your websites, which encrypts all communication between the website and its visitors.


SSL TLS Encription

Cloudflare offers four different SSL options:

Off

This option disables SSL encryption altogether, meaning all communication between the website and its visitors is unencrypted. It is not recommended, as it can leave sensitive data vulnerable to interception.

Flexible

This option encrypts the communication between the visitor’s browser and Cloudflare but not between Cloudflare and the website’s origin server. While it’s better than no encryption, it leaves the connection between Cloudflare and the origin server vulnerable to interception.

Full

This option encrypts the communication between the visitor’s browser and Cloudflare and between Cloudflare and the origin server. It is a more secure option.

Full (Strict)

This option is the same as Full and provides an additional layer of security by ensuring the certificate is not forged or otherwise invalid.

Keeping the SSL option to full is recommended because it can positively impact a website’s rankings, as search engines like Google prefer secure sites. Additionally, implementing SSL on a website can increase visitor trust and help protect sensitive data.

I recommend the Full setting.

Btw you may wonder why to use Cloudflare SSL when you already have an SSL from your web hosting provider.

Is it okay to use Cloudflare SSL when my host already provided an SSL certificate from Letsencrypt?

Absolutely! There’s no harm in using Cloudflare SSL (Secure Sockets Layer) in conjunction with an SSL certificate from Letsencrypt that your web host provided. In fact, using both can enhance the security of your website and provide additional layers of protection. Cloudflare SSL provides a secure connection between your website and its visitors, encrypting data transmission to prevent hackers from accessing sensitive information like passwords and credit card numbers.

Meanwhile, Letsencrypt SSL is the first free, automated, open certificate authority offering free SSL/TLS certificates. Both SSL certificates validate your website’s identity, which helps protect your visitors’ privacy and boost their trust in your site.

So, use both SSL certificates together and enjoy the benefit of extra security, making your website feel safer and more reliable for your audience.


SSL/TLS Recommender

Turn this on to be sure you’re using the best security

Edge Certificate

Here are my recommended settings.

  • Total TLS: this should usually be turned on
  • Always Use HTTPS: this should usually be turned on
  •  HTTP Strict Transport Security (HSTS): you should use this to help prevent man-in-the-middle attacks.
    With HSTS enabled, the site must have an SSL certificate (through Cloudflare or your host), or it will not load.
    Toggle on all options and
    select 6 months(recommended) as MaxAge Header
  • Minimum TLS Version: 1.0 Default
  • Opportunistic Encryption: on
  • Automatic HTTPS Rewrites: on
  • CertificateTransparencyMonitoring: on

How to use Cloudflare Speed Optimization

Auto Minify

Auto Minify is a feature in Cloudflare that automatically compresses and optimizes a website’s code, reducing its file size and improving page load times. Specifically, Auto Minify removes unnecessary white space, comments, and other extraneous data from a website’s HTML, CSS, and JavaScript files, resulting in faster page load times and a better user experience.

To enable this option, go to Speed → Optimization → Auto Minify.


Auto Minify

Cloudflare offers three types of Auto Minify: HTML, CSS, and JavaScript. You can choose which types of code they want to minify and enable the feature with just a few clicks.

I recommend enabling Auto Minify but keep it off if you are doing minification through a cache plugin. Additionally, in rare cases, Auto Minify may cause issues with certain website features or third-party scripts.

Brotli

Brotli Cloudflare

Brotli is a compression algorithm that can significantly reduce the size of files, such as HTML, CSS, and JavaScript, without sacrificing quality. This results in faster load times and improved website performance.

In Cloudflare, the Brotli feature is available to all users and can be enabled through the “Speed” tab. Once enabled, Cloudflare will automatically compress eligible files using the Brotli algorithm.

Rocket Loader

Rocket Loader is a tool in Cloudflare that optimizes the loading of JavaScript files on websites. It works by asynchronously loading JavaScript files in the background while the rest of the page is being loaded, reducing the impact of JavaScript on website performance.

Cloudflare Rocket Loader

To enable Rocket Loader in Cloudflare, navigate to the “Speed” tab. Click the “Rocket Loader” option under the “Optimization” section. But most of the time, it is recommended to keep it off.


My recommendation

  • Auto Minify: JavaScript and CSS turned on. I find HTML Minify might break analytic tracking code.
  • Brotli: on
  • Early Hints: on
  • Rocket Loader: off
  • Mobile: all settings off unless you have a standalone mobile site for some reason

Image Resizing (not needed)

The Image Resizing feature in Cloudflare is a tool that allows you to resize and optimize images on the fly. It can improve website performance and reduce page load times by reducing the size of images, which can be a major contributor to page bloat and slow loading times.

To enable image resizing, go to Speed, and click on the “Image Resizing” option under the “Optimization” section.

However, you must upgrade to the pro plan to access this feature.


Polish (not needed)

Cloudflare Polish feature

The Polish feature in Cloudflare is a powerful tool that allows you to optimize and compress images, improving website performance and reducing page load times. This feature is particularly useful for websites that rely heavily on images, such as e-commerce sites, photography portfolios, and online magazines.

The Polish offer multiple options, such as lossless compression, lossy compression, and WebP image format conversion. You must upgrade to the Pro plan or above to benefit from this feature.


How to use Cloudflare Web Firewall

Web Application Firewall (WAF) is a security feature offered by Cloudflare that helps protect websites from common online threats such as SQL injection attacks, cross-site scripting, and DDoS attacks.


Web Application Firewall

Cloudflare’s WAF works by filtering incoming traffic to your website and blocking any malicious requests. It also allows you to create custom firewall rules to protect your WordPress site further.

The Cloudflare free version offers five rules that you can use to perform various actions, such as redirecting visitors based on the IP address to a specific page, caching certain pages for a longer duration, or adding security features to particular pages.

If you create a firewall rule, it needs careful testing. Otherwise, users from another country might be unable to access your website.


How to use Cloudflare caching

Caching can significantly improve the performance of your website. When you enable caching in Cloudflare, Cloudflare will store a copy of your website’s static content (such as images, CSS files, and JavaScript files) on its servers worldwide.

When a visitor requests your website, Cloudflare will serve the cached version of your website’s content from the server closest to the visitor, which can greatly reduce the time required to load your website.


Caching Level

Caching Level in Cloudflare

It is recommended to set Cloudflare’s caching level to “Standard.” It caches all static content, including images, stylesheets, and scripts.


Browser Cache

Browser Cache in Cloudflare

Configuring the browser cache TTL (Time to Live) to one month or higher. This setting controls how long the browser should store cached content. By setting it to one month or more, returning visitors can access the website’s cached content without re-downloading, resulting in faster page load times.

Crawler Hints

Crawler Hints in Cloudflare

Crawler Hints is another setting that helps optimize caching in Cloudflare. When turned ON, Crawler Hints enable search engines to better understand the website’s structure and content. It allows them to index the website more efficiently, improving search engine rankings and faster load times.


Always Online


Cloudflare Always Online

Always Online is an optional setting that you may turn ON to ensure visitors can access the website’s cached content, even if the origin server is down. This feature is useful during server downtime or maintenance, ensuring users can access the website’s cached content.


Tiered Cache

Tiered Cache in Cloudflare

Turning on Argo in the Tiered Cache settings can further optimize Cloudflare caching. Argo is Cloudflare’s optional content delivery optimization service that uses advanced routing techniques and prioritization algorithms to deliver content faster to users.


How to use Cloudflare networks

Cloudflare also offers various network settings that can be configured to optimize your website’s performance and security. You don’t need to pay much attention to these settings because the default settings work best. Some of the network settings offered by Cloudflare are:

HTTP/2

It allows for faster page load times and reduced latency compared to the previous version, HTTP/1.1.

HTTP/2 to Origin

This feature allows Cloudflare to communicate with the origin server using the HTTP/2 protocol.

HTTP/3 (with QUIC)

This is the latest HTTP protocol version that uses the QUIC protocol instead of TCP. HTTP/3 offers faster connection times, improved reliability, and better performance in high-latency environments.

0-RTT Connection Resumption

This feature allows Cloudflare to reuse a previously established connection to the origin server, reducing the time required to establish a new connection and improving website performance.

IPv6 Compatibility

Cloudflare supports IPv6, which is the latest version of the Internet Protocol. It allows your website to be accessible to visitors using IPv6-enabled devices.

WebSockets

WebSockets is a protocol allowing real-time communication between a client and a server. Cloudflare’s support for WebSockets will enable you to build real-time applications that can be delivered over HTTPS.

Pseudo IPv4

This feature allows Cloudflare to present IPv6-only websites as IPv4-compatible, which can improve compatibility with legacy systems that do not support IPv6.

IP Geolocation

You can also use it to redirect visitors to specific pages based on location.

Maximum Upload Size

This setting lets you specify the maximum data users can upload to your website.

Response Buffering

This feature allows Cloudflare to buffer the response from the origin server before sending it to the client, which can improve website performance.

Cloudflare network settings 1

How to use Cloudflare Scrape Shield

Scrape Shield is a security feature in Cloudflare that protects websites against malicious activities, including email harvesting and hotlinking. It provides website owners with tools to protect their content, prevent spam, and improve their website’s performance.

While these tools are helpful, they add JavaScript to the page load, affecting website performance. Therefore, it’s important to consider the impact on page load times before enabling these features.

If the website does not require protection against email harvesting or hotlinking, it’s recommended to keep these tools turned off.

Please see the screenshot for the recommended settings. Basically all settings should be turned off


Cloudflare Scrape Shield

How to use Cloudflare email routing

Cloudflare email routing allows you to create any custom email addresses and route them to the mailbox you choose. With Cloudflare’s free account, you can easily create and manage email addresses without monitoring additional services or software. Additionally, you can configure rules and catch-all addresses for your emails and leverage the power of Cloudflare Workers to implement any logic you need to process your emails and create automated responses. With Cloudflare Email Routing, you can easily create a free business email address for yourself or your business.


How to use Cloudflare with WordPress Plugins

There are several plugins you can install in WordPress for the Cloudflare network. I want to mention three plugins

  • official Cloudflare (free)
  • Super Page Cacher (free)
  • WP Rocket (Paid)

Cloudflare

Installing Cloudflare Plugin is unnecessary for using Cloudflare on WordPress, but it helps you change the Cloudflare settings from your WordPress dashboard.


Installing Cloudflare Plugin

To install the plugin, you need to follow the below instructions:

Log in to your WordPress dashboard and go to the “Plugins” section on the left-hand side of the dashboard. Click on “Add New” to add a new plugin.

In the search bar, type “Cloudflare” and click the “Search Plugins” button. The Cloudflare plugin should appear at the top of the search results.

Click on the “Install Now” button next to the Cloudflare plugin. Wait for the plugin to install, then click “Activate” to activate the plugin.

After activating the Cloudflare WordPress plugin, connect it to your Cloudflare account. Go to the Cloudflare plugin’s settings page, and enter your Cloudflare email address and API key.

The Global API key you will find in your Cloudflare account profile page, tab API tokens. It is also possible to generate a special API token for the connection. You also need the Zone ID. This key you see on the Domain Overview page on the right side.

The plugin provides various options, such as purging the cache, enabling HTTPS, and configuring page rules. Configure the settings according to your preferences.

After configuring the plugin settings, it is recommended to purge the cache so that any changes you make to your website are immediately reflected.


Super Page Cacher

The Super Page Cacher plugin is another highly recommended free plugin that works fine with the Cloudflare network.

If you are looking for ways to enhance the loading speed of your website, Super Page Cache for Cloudflare plugin is the perfect solution. This plugin can take your website caching to the next level by caching the static files and the HTML webpages generated by WordPress. The best part is that it works seamlessly and requires no prior technical knowledge.

All you need to do is provide your Cloudflare Account’s API Key or API Token details and let the plugin do its magic. For advanced users, the plugin does offer detailed settings that can be customized. However, for most users, the default settings work perfectly.

With Super Page Cache, you can ensure that your website visitors have a seamless browsing experience.


WP Rocket (paid)

WP Rocket is a powerful caching plugin for WordPress that can be integrated with Cloudflare to optimize the performance of your website. When WP Rocket is used in conjunction with Cloudflare, it can perform the minification process of CSS and JS files and WP Rocket, combine files, enable Cloudflare add-ons, and configure settings to complement Cloudflare.

Overall, integrating WP Rocket with Cloudflare is an effective way to improve the performance of your website by optimizing its settings and delivering static files quickly.


Conclusion

Using Cloudflare with WordPress offers a variety of benefits. It helps to speed up your website, improve security, and reduce the load on your server. It also provides access to an extensive network of global CDNs, which can help to deliver content faster and more reliably.

Cloudflare’s free plan also offers many beneficial features for WordPress users, such as caching and protection from malicious attacks.

Overall, using Cloudflare with WordPress is a great way to optimize your website and ensure it runs smoothly and securely.


Disclosure

Affiliate Program

Any purchases made from clicks on links to prodcuts on this website may result in an affiliate commission for me

Leave a Reply

Your email address will not be published. Required fields are marked *