How to Set Up Cloudflare CDN on WordPress

HOW TO SETUP CLOUDFLARE CDN ON WORDPRESS

“Improving Website Speed and Performance with Cloudflare on WordPress”

In today’s digital age, it’s important for websites to load quickly. Fast page speed not only enhances user experience, but it can also improve search engine rankings.

One way to increase the speed and performance of a WordPress site is by setting up Cloudflare. This tutorial will guide you through the process of using the WordPress Cloudflare plugin, as well as provide tips for optimizing your website with this service.

By following this tutorial, you will learn how to use Cloudflare to speed up and secure your WordPress site.

What is Cloudflare and How Does it Work?

Cloudflare is a well-known content delivery network (CDN) that helps websites load faster. It does this by using a network of servers around the world to deliver website content to users more quickly.

Cloudflare works by creating copies of a website on proxy servers. When someone tries to access the website, their request is sent to the server that is closest to their location, which helps speed up the process.

In addition to improving website speed, Cloudflare also offers protection against distributed denial-of-service (DDoS) attacks. It monitors all incoming traffic and blocks any suspicious users to keep the website safe.

The Benefits of Using Cloudflare for Your WordPress Website

Cloudflare is a powerful tool that can improve the speed and security of your WordPress site. By minimizing the distance between a visitor’s device and Cloudflare’s servers, it can help your website load faster.

It also offers performance enhancements like image resizing and auto minification, which can help your site run more smoothly.

In addition to these benefits, Cloudflare can also help protect your website’s data privacy by hiding your nameservers on domain registration lookup tools. Its web analytics feature also provides an extra layer of security by showing the number of threats it detects and blocks.

Setting Up Cloudflare on Your WordPress Site

Follow these steps to set up Cloudflare on your WordPress website:

1. Create a Cloudflare account:

Go to the Cloudflare website and click “Sign Up” to create a new account. Make sure to verify your email address before proceeding to the next step.

2. Add your domain name to Cloudflare

Log in to your Cloudflare account and follow these steps to add your domain name:

  • Click “Add site” at the top right of the Cloudflare dashboard.
  • Enter your WordPress site’s URL and click “Add site”.
  • Select a plan for your Cloudflare account. The FREE plan is suitable for small to medium WordPress websites. The premium plans offer additional features for websites with higher traffic:
  • Pro – offers additional optimization features and cache analytics for $20/month.
  • Business – comes with dedicated customer support and more advanced security features for $200/month.
  • Enterprise – provides complete features for caching, security, and optimization. Contact Cloudflare’s customer service for pricing.

3. Verifying Your Domain’s DNS Records on Cloudflare

After adding your WordPress site to Cloudflare, it will automatically scan for common DNS records and add them to your account. However, it may not find all of your domain’s DNS records. In this case, you will need to review your DNS records manually.

First, make sure that your domain is pointed correctly by checking your A records. It’s also a good idea to enable Cloudflare for both the www and non-www versions of your site.

To enable or disable Cloudflare for specific subdomains, toggle the button under the “Proxy status” column. Once you have finished reviewing your DNS records, press “Continue” to proceed to the next step.

Note: Avoid Enabling Cloudflare for cPanel, Mail, or FTP

It is important to note that you should not enable Cloudflare for cPanel, mail, or FTP, as this can cause DNS issues.

4. Updating Your Domain’s Nameservers to Point to Cloudflare

Cloudflare will ask you to update your domain’s nameservers to point to their servers. To do this, copy the two nameservers provided by Cloudflare and go to your domain name registrar.

The process of updating your nameservers may vary depending on your domain name registrar. Here is an example of how to do this with Intech Cloud Hosting:

  • Log in to your ClientArea Account and go to the “Domains” tab, and then Manage the Domain you want to update its nameserver.
  • Select the “Change the nameservers your domain points to” section to update nameservers.
  • Copy and paste Cloudflare’s nameservers into the first two fields and click “Save” to finalize the process.

After updating your domain nameservers, return to the Cloudflare website and click “Done, check nameservers.” This will allow Cloudflare to verify that the nameserver update was successful.

Note: Nameserver Propagation May Take Up to 24 Hours

It is important to note that it may take up to 24 hours for the new nameservers to propagate to your domain. You will receive a confirmation email from Cloudflare once the propagation is complete.

5. Configuring HTTPS Settings on Cloudflare

Hypertext Transfer Protocol Secure (HTTPS) is a protocol that secures data exchanged over the internet. A WordPress site with a Secure Socket Layer (SSL) certificate will display a padlock and “https://” in the URL, rather than “http://

Cloudflare’s SSL/TLS encryption mode helps determine how to validate the SSL certificate on your origin server. Follow these steps to configure Cloudflare’s HTTPS settings and protect your WordPress site against potential data breaches:

  • On your Cloudflare dashboard, go to “SSL/TLS” and select “Overview.”
  • Choose one of the SSL/TLS encryption modes:
  • Flexible – encrypts traffic between visitors’ browsers and Cloudflare. This option is suitable for WordPress sites that do not have an SSL certificate.
  • Full – provides end-to-end protection from your site to the visitor’s server. This option works best for WordPress sites with a self-signed SSL certificate.
  • Full (strict) – enforces stricter requirements for origin certificates than the Full mode. We recommend choosing this option for WordPress sites with valid SSL certificates.

Note: Use the SSL/TLS Recommender for Help Choosing an Encryption Mode

If you’re not sure which encryption mode to choose, you can use Cloudflare’s SSL/TLS Recommender tool to get a suggestion. This feature can help ensure that you select the best option for your WordPress site.

Enabling the ‘Always Use HTTPS’ Setting on Cloudflare – To direct all HTTP requests to HTTPS on your WordPress site, go to “SSL/TLS” and select “Edge Certificates.” Then, turn on the “Always Use HTTPS” setting. This feature may take some time to become active, but once it does, you will see a padlock icon next to the site’s URL.

6. Installing and Setting Up the Cloudflare WordPress Plugin

To make it easy to change Cloudflare settings directly from the WordPress dashboard, you can use the Cloudflare plugin. First, you’ll need to get the Application Programming Interface (API) key from your Cloudflare account:

To get your Cloudflare API key, look for the “API” link at the bottom right corner of your Cloudflare dashboard. Click “Get your API token” to continue.

To retrieve your Cloudflare API key, enter your Cloudflare account password and click “View.” Copy the Global API key and then go to your WordPress dashboard.

To install the Cloudflare WordPress plugin, follow these steps:

  • Go to “Plugins” and select “Add New.”
  • Search for the Cloudflare plugin and click “Install Now.”
  • Activate the Cloudflare plugin.

Go to Settings → Cloudflare and click on Sign in here.

To enter your Cloudflare API key in the WordPress dashboard, follow these steps:

  • Enter your Cloudflare account email and paste the previously copied Global API key.
  • Click “Save API Credentials” to continue.

Now, you can access and configure important Cloudflare settings from your WordPress dashboard.

The Cloudflare WordPress plugin offers a range of features to help improve the performance, speed, and security of your WordPress site. Some of these features include:

  • Recommended Cloudflare settings: Automatically apply recommended Cloudflare settings to boost site performance.
  • Cloudflare Automatic Platform Optimization (APO): Keeps copies of your WordPress site data to improve loading time. APO stores static and dynamic content more efficiently than a traditional CDN service.
  • Purge cache: Deletes all previously stored information and fetches the newest versions from your server. This feature allows you to cache updated content without slowing down your loading time.
  • Speed and security settings: Configure features to improve performance, such as the Development Mode, Security Level, and Automatic HTTPS Rewrites.
  • Analytics: Provides rich data powered by GraphQL, with the ability to filter data across multiple dimensions.

Exploring Additional Cloudflare Features

There are many other Cloudflare features that you can use to improve the performance, security, and functionality of your WordPress site. Here are ten key Cloudflare configurations to consider:

1. Auto Minify: Improving Page Load Times

Auto Minify feature can help improve your WordPress site’s page load times by minifying JavaScript, CSS, and HTML files. This process removes unnecessary characters from these files, making them smaller and faster to load.

Cloudflare will remove comments and empty lines from HTML files and minify cached JavaScript and CSS files. To see the changes on your WordPress site, you may need to purge the cache.

Auto Minify is available on all Cloudflare plans. To enable it, go to the Speed section of your Cloudflare dashboard and select Optimization. From there, you can choose the type of file you want to minify.

2. Brotli Compression for Faster Data Transfers

Brotli is a compression feature offered by Cloudflare that helps speed up data transfers between servers and browsers. It uses a dictionary to send keys rather than full keywords, which allows it to compress images, texts, and fonts to improve page load times. On average, it has a faster transfer time than GZIP compression.

Cloudflare uses Brotli compression as the default content-encoding method for all plans. If your server does not support this feature, Cloudflare will automatically use GZIP compression instead.

Brotli compression is available on all Cloudflare plans. To enable it, go to the Speed section of your Cloudflare dashboard and select Optimization. From there, you can turn on the Brotli feature.

3. Improving Performance with Rocket Loader

Cloudflare’s Rocket Loader feature can help improve the loading times for your WordPress site by deferring the loading of JavaScript code until after other content, such as texts, images, and fonts, have been rendered. This can lead to faster Time to First Contentful Paint (TTFCP) and Time to First Meaningful Paint (TTFMP) metrics, which measure the time it takes for a user to see something on the screen and the time it takes to display the page’s primary content, respectively.

Rocket Loader is available for all Cloudflare users. To enable it, go to the Speed section of your Cloudflare dashboard and select Optimization. From there, you can turn on the Rocket Loader feature.

4. Protect with Cloudflare’s Web Application Firewall

Cloudflare’s Web Application Firewall (WAF) is a security feature that helps block potential online attacks and provides DDoS protection. Using machine learning, the WAF protects your WordPress site by preventing account takeover, stopping data leaks, and blocking logins with stolen credentials.

With the WAF, WordPress users can create custom rules to control incoming traffic, such as filtering requests based on location and IP address. To access these settings, go to the Security section of your Cloudflare dashboard and select WAF. From there, you will see four tabs: Firewall rules, Rate limiting rules, Manage rules, and Tools. These tabs allow you to create custom rules, protect your site from malicious traffic, identify and remove suspicious activity, and create IP access rules and block specific users.

5. Network

Cloudflare’s network settings help manage where to direct visitors and what they can do on your site. The proper configuration can improve your performance significantly. Here are some of the primary network features to consider:

  • HTTP/2 – improves how Cloudflare sends HTTP requests and responses for faster page load times.
  • HTTP/3 – uses QUIC, a new transport protocol that offers better security and reliability for your WordPress site.
  • IPv6 compatibility – enables IPv6 on all subdomains. If your origin server has IPv6 records, enable Cloudflare for your AAAA records on the DNS settings.
  • WebSockets – speeds up data exchanges within the open connection. Useful for real-time applications like live chats and online games.
  • IP geolocation – includes your visitors’ country codes and maps IP addresses to countries. This feature is great for global websites with different localized content.
  • Maximum upload size – sets the maximum data visitors can upload to your Cloudflare website in a single request. The free plan gets a 100 MB limit for each visitor, but you can get more with the Business plan or above.
  • Response buffering – enables buffering responses from the origin server. Cloudflare will wait until the entire file is ready before forwarding it to the visitors.

Most Network features are free except for Response buffering and True-Client-IP-Header, which are available only for Enterprise plan users.

6. WordPress Page Rules Configuration

The page rules feature enables specific Cloudflare settings on your WordPress site. Cloudflare offers around 37 page rules – some are not available with the free plan.

Here are the steps to set up Cloudflare page rules:

  1. Head to Rules → Page Rules and click on the Create Page Rule button.
Cloudflare create page rules
  1. Insert the URL for your page rule. If you want to add more than one rule for a specific page, click the Add a Setting button. Then, you can either Save as Draft to leave the rule disabled or Save and Deploy to enable it immediately.
Cloudflare page rules, highlighting the Add a setting button
  1. Under Page Rules, you can reorder the Position and use the Settings icon to change the rule. If you choose to remove the rule, click the X button.
Cloudflare page rules page

You can create up to three page rules with a free Cloudflare account. Upgrade to the Pro version to get 20 rules. If you need more, the Business and Enterprise plans offer 50 and 125 rules, respectively.

Here are some tips to take advantage of this feature for your WordPress sites:

Always Use HTTPS

Use this rule to secure visitors’ connections by redirecting all variations of your website to the https:// version. Enter your WordPress site’s domain name in between two asterisks:

http://*example.com/*
Cloudflare's rules, adding the Always Use HTTPS setting

WordPress Admin Security and Cache Levels

Protect and speed up your WordPress admin by setting the Security Level to High and Cache Level to Bypass.

In addition, disabling Cloudflare Apps and Performance helps fix errors, as these features only speed up your site’s front-end.

Enter your WordPress login URL with an additional asterisk:

example.com/wp-admin*
Cloudflare's page rules for WordPress admin

Bandwidth Control for WordPress Uploads

If you rarely change the files you upload to WordPress, save bandwidth by setting Edge Cache TTL to a month.

Then, change the Cache Level to Cache Everything to optimize the speed and the Browser Cache TTL to a day to show the most recent content of your site.

Here is what to use for the URL:

example.com/wp-content/uploads*
Cloudflare's bandwidth page rules

Always Online

This feature keeps your pages online if your server is experiencing downtime. Enable the Always Online feature for your most important URLs.

Cloudflare's Always Online page rules

Email Obfuscation

Use the Email Obfuscation rule on your contact page or any page with contact information to hide your email address and prevent spam.

Cloudflare's Email Obfuscation page rule

7. Image Resizing

The image resizing feature caches image files and minimizes their dimensions to boost your WordPress site’s performance.

This feature also automatically adjusts your images for mobile optimization. By enabling this Cloudflare feature, you can maintain a consistent website appearance.

To take advantage of this image optimization feature, subscribe to the Business plan. It comes with up to 100,000 image requests per month.

8. Mirage

Mirage helps websites load images based on the network connection and device type without altering the original resolution. For example, devices with smaller screens will show smaller images.

This Cloudflare feature speeds up loading time using the following methods:

  • Image virtualizing – replaces images with low-resolution placeholders to render pages faster, allowing visitors to see content immediately.
  • Request streamlining – combines multiple individual network requests for images into a single request.

To use this feature, you must at least have the Pro plan. Note that this feature might cause issues when displaying images with specific JavaScript code, such as for carousels and photo viewers.

9. Polish

This feature is only available with the Pro plan and above. The Polish feature improves your image load time by decreasing your file size using the following options:

  • Lossless – reduces the size of image files without impacting their visual quality. This option removes unnecessary metadata from PNG and GIF files, such as their date, time, and camera manufacturer information.
  • Lossy – compresses the file size of JPEG images by reducing their visual quality.
  • Serve WebP images – shows the WebP version of the image, providing better performance over the original image format.

Make sure to purge your cache when changing the polish settings to see the changes.

10. Caching

Caching stores copies of your static content in a temporary storage location so browsers can access them quicker.

Cloudflare can help cache web browsers to load sites faster. It also caches DNS servers to look for records more quickly.

To access this Cloudflare feature, head to Caching -> Configuration. Some of the main features include:

  • Purge cache – clears cached files to get the newest version of your files from the server:
    • Custom purge – clears cache from a specific URL.
    • Purge everything – caches all the files on your website. We recommend purging individual pages to keep the site speed optimized.
  • Caching level – determines the amount of static HTML content you want Cloudflare to cache. You can set Cloudflare CDN to cache static content according to these levels:
    • No query string – delivers files from the cache when there is no query string, which is a part of a URL that assigns values to specific parameters.
    • Ignore query string – delivers the same resource to all URLs, no matter the query string.
    • Standard – delivers a different resource when the query string changes.
  • Browser cache TTL – specifies how long cached files remain in your visitor’s browser. Having a longer expiration time means faster load times for returning visitors.
  • CSAM scanning tool – allows website owners to identify and take action on any potential Child Sexual Abuse Material (CSAM).
  • Crawler hints – provides high-quality data to search engines after making any changes. This feature prevents wasteful crawls.
  • Always Online – shows limited copies of your web pages instead of errors whenever your server is unreachable.
  • Development mode – temporarily bypasses Cloudflare cache to see real-time changes to your origin server.
Cloudflare's Caching page

In addition, Cloudflare has a settings page for Cache AnalyticsTiered Cache, and Cache Reserve. Some of these settings are only available with the premium version.

Cloudflare’s Most Common Errors

Sometimes, improper Cloudflare setup or incompatible features can cause errors to your WordPress site. Here are some of the most common Cloudflare errors:

Error 520

Cloudflare error 520 happens when a server receives an invalid request. As a result, the web browser will show a “Web server is returning an unknown error” message.

An issue with the origin server is the main reason behind this error. For example, the origin server might crash or not allow connections with Cloudflare IP addresses.

Some methods to fix this issue are:

  • Ensure that Cloudflare DNS records are correct.
  • Disable your .htaccess file.
  • Investigate your error logs.
Example of an error 520

Error 521

Cloudflare error 521 shows the message “Web server is down”. This error often happens due to incorrect Cloudflare configuration, such as the wrong encryption mode with the SSL certificate.

If your WordPress site is showing this Cloudflare error, here are some methods to fix it:

  • Check whether the origin server is running.
  • Test your connection to the server.
  • Check your Cloudflare encryption settings.
Example of an error 521

Error 522

Lastly, Cloudflare error 522, or “Connection timed out” happens when the server fails to respond to requests within a specified time.

This issue also means that the Transmission Control Protocol (TCP) handshake between the server and Cloudflare has failed.

Here are some ways to fix error 522:

  • Check if the server is working.
  • Review your Cloudflare DNS settings.
  • Enable the Keep-Alive header.
Example of an error 522

Conclusion

In this tutorial, we have demonstrated how to set up Cloudflare on your WordPress site. The process is relatively straightforward and involves the following steps:

  1. Create a Cloudflare account and verify your email address.
  2. Add your WordPress domain name to Cloudflare.
  3. Check your domain’s DNS records in Cloudflare.
  4. Point your domain name to Cloudflare’s nameservers.
  5. Configure the HTTPS settings to secure your site.
  6. Install the Cloudflare plugin for easy configuration.

We have also discussed the benefits of using Cloudflare for your WordPress site, such as image resizing and caching. In addition, we have provided information on common Cloudflare errors and how to fix them.

After setting up Cloudflare on your WordPress site, we recommend running a speed test to check your loading time.

We hope that this tutorial has helped you install and manage Cloudflare on your WordPress site. If you have any questions or suggestions, please feel free to leave us a comment.

Total
0
Shares
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Previous Article
the-bloggers-stories-an-open-discussion-with-mabinuori-abiola-peter

The Bloggers Stories: An Open Discussion With Mabinuori Abiola Peter

Next Article

We Are NiRA Accredited - What does it mean

Related Posts
Total
0
Share
0
Would love your thoughts, please comment.x
()
x