Hivium - Managed Hosting | Blog
How to Configure Cloudflare Settings for your WordPress website?

How to Configure Cloudflare Settings for your WordPress website?

By acting as a reverse proxy in front of your site, Cloudflare is an all-in-one security and performance product. Cloudflare is used by a lot of websites around the world.  As a WordPress user, adding Cloudflare to your site can help boost site performance and reduce the impact of malicious bots and hackers on your website.

So How would you use Cloudflare for your WordPress website?

Once Cloudflare has been configured, all requests to your site will hit a Cloudflare server first. Cloudflare will then determine whether the request should be forwarded to the origin server, served from cache, blocked, or processed with custom rules.

In this guide, we’ll dig deeper into the optimal Cloudflare settings for WordPress. We will also highlight the difference between any normal DNS and Cloudflare DNS, talk about caching and security setups, and show you how to configure Cloudflare for WordPress Multisite installations.

Normal DNS vs Cloudflare DNS

Before we dive into Cloudflare settings and how to tweak them properly for your WordPress site, let’s go over the differences between a normal DNS and Cloudflare DNS. A DNS is a setup which helps the browser understand, where the website resides and help it fetch the website from the particular IP.

In terms of performance and uptime, Cloudflare DNS, and a DNS solution are not comparable. The main difference between the two services is Cloudflare’s additional security and performance features. A normal DNS is purely a DNS solution, while Cloudflare offers DNS as well an optional proxy layer that acts as a firewall, CDN, and more.

If you are a Hivium customer who is looking for a DNS-only service, a normal DNS is a perfect option. On the other hand, if you’re looking for an all-in-one proxy-based product, Cloudflare is a good choice.

How to Configure Cloudflare Settings for your WordPress website?

Cloudflare offers a variety of security and performance benefits, but not all of them are fully compatible with WordPress. Let’s take an in-depth look at Cloudflare’s settings to identify the best features for your WordPress site.

 

1. SSL

Cloudflare supports four modes of SSL/TLS encryption – Off, Flexible, Full, and Full (Strict).

  • Off – No encryption.
  • Flexible – Only encrypts the connection between the browser and Cloudflare.
  • Full – End-to-end encryption, but allows for a self-signed certificate on the origin server.
  • Ful (Strict) – End-to-end encryption, and requires a free origin certificate from Cloudflare or a certificate from a trusted CA (certificate authority). We recommend using the Full (Strict) SSL mode for maximum security.

For Hivium Managed customers who would like to use Cloudflare on their WordPress sites, we recommend generating an SSL certificate using Let’s Encrypt and using the Full or Full (Strict) option at Cloudflare.

Alternatively, you can also generate a Cloudflare origin certificate to install on your origin server. If your host does not offer free SSL certificates, installing a Cloudflare origin certificate on your server will allow you to use the Full (Strict) SSL mode.

If you are using Hivium to host a site on a subdomain, while the root domain is utilizing Cloudflare’s Flexible SSL, you can use a Cloudflare page rule to force the Hivium-hosted subdomain to use Full or Full (Strict) SSL.

This option lets you use Cloudflare’s Flexible SSL while ensuring Cloudflare Full (Strict) SSL for a subdomain hosted on Kinsta.

Always Use HTTPS

We recommend enabling this option to automatically forward all HTTP requests to HTTPS.

HSTS

HSTS stands for “HTTP Strict Transport Security” and is used to force a web browser to use secure HTTPS connections. Enabling HSTS on Cloudflare ensures that HTTP requests will never hit your origin server. If your site is already set up to use HTTPS, we recommend configuring HSTS on your origin server as well.

Minimum TLS Version

TLS (Transport Layer Security) is a cryptographic protocol that allows for the secure transmission of data over a network. By default, Cloudflare sets TLS 1.0 for the protocol version. Some security standards such as PCI DSS 3.2 require more recent versions of the TLS protocol for compliance purposes. If your site requires a certain TLS version, you can change the setting by going to SSL/TLS > Edge Certificates > Minimum TLS Version.

Automatic HTTPS Rewrites

This feature checks HTTP resource URLs in your HTML code to see if they are accessible over HTTPS. If so, they will automatically be rewritten with an HTTPS variation. Automatic HTTPS rewrites are useful for ensuring a secure browsing experience without mixed content errors.

Speed

The majority of Cloudflare settings related to performance, like asset minification and image optimization, can be found in the “Speed” tab.

Image Resizing (Business Only)

Cloudflare’s image resizing feature is only available for Business plan users. When implemented correctly in your WordPress theme, this feature can be used to offload image thumbnail generation to Cloudflare. This has several benefits over the built-in thumbnail generation feature in WordPress.

For sites that dynamically generate image sizes on the fly, using Cloudflare’s image resizing feature can reduce CPU usage – this allows your site to serve more concurrent users without boosting CPU resources. Cloudflare image resizing also helps reduce disk space usage because thumbnails won’t have to be stored on the server.

Cloudflare image resizing works by prepending an endpoint to your images. Take a look at the example below, which shows how the feature works.

Original Image URL

https://yourdomain.com/wp-content/uploads/2020/01/picture.jpg

Resized Image URL

https://yourdomain.com/cdn-cgi/image/fit=contain,format=auto,metadata=none,onerror=redirect,quality=70,width=720/https://yourdomain.com/wp-content/uploads/2020/01/picture.jpg

The “width” parameter can be adjusted to generate different thumbnail sizes dynamically without any additional resource load on your origin server. If you are looking for a standalone service that is similar to Cloudflare’s image resizing feature, Imgix and Cloudinary are great options.

Polish (Pro Only)

Cloudflare Polish is an image optimization service that automatically compresses JPG, PNG, GIF, and other image files. Images are processed at Cloudflare’s edge, which means there is no performance burden on the server hosting your WordPress site. Polish also supports Google’s WEBP format – this means optimized WEBP images will automatically be served to Chrome, Brave, and other browsers that support the format.

Polish is a useful feature for WordPress sites for a few reasons. If you are using an image optimization plugin like ShortPixel or Imagify, Polish can reduce your server’s CPU usage dramatically – this can result in a more stable browsing experience for visitors. Since Polish-optimized images are stored and cached off-server, you won’t have to worry about using up disk space to store WEBP versions of your images.

Auto Minify

Cloudflare’s auto minify feature automatically minifies cached CSS, JSS, and HTML assets. If you do not minify assets with a WordPress plugin like Autoptimize or WP-Rocket, we recommend enabling the auto minify feature in Cloudflare.

Brotli

Brotli is an alternative to GZIP, a compression algorithm that reduces the size of web requests before they are served to visitors. Compared to GZIP, Brotli offers a higher compression ratio, which translates to faster page loads for users. The catch is that not all web browsers support Brotli compression. Regardless, we recommend enabling Cloudflare’s Brotli feature, as requests from unsupported browsers will simply fall back to GZIP compression.

Enhanced HTTP/2 Prioritization (Pro Only)

The introduction of HTTP/2 brought about significant performance increases for websites through parallelization and multiplexing. Cloudflare’s enhanced HTTP/2 prioritization feature takes it one step further by intelligently parsing your website’s HTML to determine what order to load assets for the best possible performance. According to Cloudflare, enhanced HTTP/2 prioritization can decrease page load time by up to 50%.

Mirage (Pro Only)

Mirage is an image optimization feature that targets mobile and low-bandwidth connections. When Mirage is enabled, images are replaced with low-resolution placeholders during the initial page load. After the page has loaded, full-resolution images are lazy-loaded.

Mirage is also able to combine multiple image requests into a single request, which reduces the number of roundtrips required to fully load a page. If your site uses a lot of images and targets a mobile-heavy demographic, Cloudflare Mirage can have a positive impact on performance.

Rocket Loader

Rocket Loader is a feature that speeds up loading times for JavaScript assets by loading them asynchronously. This effectively reduces a page’s render-blocking content, which allows for a faster page load time. We recommend testing your site with Rocket Loader enabled to see if it improves your page speed. If your WordPress site depends on JavaScript assets loading in a specific order, you can bypass Rocket Loader by adding a data-cfasync="false" attribute to the script tag.

Caching

By default, Cloudflare caches static assets like CSS, JS, and image files. Please note that Cloudflare does not cache the generated HTML of your site by default.

Caching Level

We recommend leaving the caching level at “Standard”, which allows for updated versions of assets to be accessed with a unique query string.

Browser Cache Expiration

For sites hosted at Hivium, we recommend setting the browser cache expiration setting to “Respect Existing Headers”. This will keep static assets in the browser cache for one year. If you’d like to override this with a shorter expiration time, feel free to change this setting.

Firewall

On Hivium, we use Enterprise-Level firewalls to protect your WordPress sites from malicious traffic. Hivium customers can block specific IP addresses, while more complex firewall rules (like country-level blocks) can be added by our support team or easily via Cloudflare.

If your host does not offer a customizable firewall, Cloudflare’s free plan includes a basic firewall that allows for five custom rules. Firewall rules can be configured to block specific IP addresses, user agents, request methods, HTTP referrers, and even countries.

For example, if you notice your WooCommerce store receiving a lot of fake orders from a country outside your target market, you can use Cloudflare’s free firewall to block traffic from the entire country.

Cloudflare’s Pro plan features a more robust web application firewall (WAF). The WAF offers specialized managed rulesets that help protect your site even further. For example, there are rulesets that target WordPress and PHP sites.

For the majority of WordPress sites, the level of security offered by Cloudflare’s free plan is sufficient. However, if you’re running a mission-critical business site that requires more protection, Cloudflare’s Pro-level WAF and managed rulesets can help secure your site further.

Network

In Cloudflare’s “Network” settings, we recommend enabling HTTP/2, HTTP/3 (with QUIC), and 0-RTT Connection Resumption.

As we mentioned earlier, HTTP/2 brings several improvements to HTTP/1.1 via parallelization and multiplexing. Similarly, HTTP/3 extends HTTP/2’s performance even further by using a new UDP-based protocol called QUIC instead of the traditional TCP.

Secure HTTP/3 connections also benefit from an optimized handshake routine, which results in faster connection times. When HTTP/3 is enabled in your Cloudflare dashboard, supported clients will be able to use HTTP/3 to connect to Cloudflare servers.

Lastly, Cloudflare’s 0-RTT Connection Resumption feature improves load times for visitors who previously connected to your website.

Page Rules

Cloudflare’s page rules feature allows you to customize settings for specific URLs. Page rules are useful for disabling caching for certain assets, changing the security level for a select page, etc. One of the most popular use cases for page rules is configuring Cloudflare to “cache everything”.

Cache HTML with a Cloudflare Page Rule

Cloudflare only caches static assets like CSS, JS, and image files. As a security precaution, Cloudflare does not cache HTML by default. WordPress and other CMS-based sites are dynamic in the sense that they require administration in a secure backend environment. With HTML caching enabled, those secure backend pages would be cached and visible to any user – logged in or logged out.

Cloudflare’s cache everything setting can be configured by adding a page rule with wildcards that cover the entire site: *domain.com/* With the “cache everything” feature enabled, Cloudflare will cache your site’s HTML pages across their network of data centers around the world.

In general, we do not recommend configuring Cloudflare to cache everything unless your site is a static site. For example, most sites generated by static site generators like Gatsby and Hugo do not have dynamic functionalities that can break with full-page caching.

Bypass Cache on Cookies

With that said, it’s definitely possible to configure Cloudflare settings to cache everything on your WordPress site. Cloudflare’s Business plan allows you to create page rules that bypass the cache for specific cookies.

By tweaking Cloudflare settings to bypass WordPress’ wordpress_logged_in cookie, logged-in requests will not be cached. Similarly, bypassing cache for cookies like woocommerce_items_in_cart and wp_woocommerce_session_ is useful for WooCommerce sites.

Specifying Cache-Control Headers

Another option for selectively bypassing Cloudflare cache is to use PHP to add cache-control response headers when a certain condition is met. For this method to work, you’ll need to enable origin cache-control in your “cache everything” page rule.

Enabling origin cache-control will force Cloudflare to respect response headers from your web server (e.g. Nginx) and server-side application (e.g. PHP and WordPress). To prevent Cloudflare from caching certain pages, the response headers below can be added to your WordPress theme template files. Alternatively, the code can also be adapted to work in your functions.php file.

<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0," false);
header("Pragma: no-cache");
?>

If this code is added to the top of your single.php file, Cloudflare will not cache your single posts and pages. This code can also be wrapped in logical statements to trigger under certain conditions. For example, using this code with the is_user_logged_in() the function will ensure that Cloudflare does not cache pages for logged-in users.

As an example, we have added the code below into our header.php file. This PHP code will add cache-control and pragma response headers to all of our pages when a user is logged in.

<?php
if ( is_user_logged_in() ) {
    	header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
	header("Cache-Control: post-check=0, pre-check=0", false);
	header("Pragma: no-cache");
}
?>

Examining the response headers for a logged-in request, we see this.

Cache-Control: no-store, no-cache, must-revalidate, max-age=0
Cache-Control: post-check=0, pre-check=0
CF-Cache-Status: BYPASS
CF-RAY: 588140b43a4f74a7-IAD
cf-request-id: 0244a6c4a0000074a7bdb0e200000001
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html; charset=UTF-8
Date: Wed, 22 Apr 2020 18:01:54 GMT
Expires: Wed, 11 Jan 1984 05:00:00 GMT
Link: <http://domain.com/wp-json/>; rel="https://api.w.org/"
Pragma: no-cache
Server: cloudflare
Transfer-Encoding: chunked
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-Kinsta-Cache: BYPASS

Viewing the same page as a logged-out user, yields these response headers.

Age: 5
CF-Cache-Status: HIT
CF-RAY: 5881420dad7d74a7-IAD
cf-request-id: 0244a79c8d000074a7bd820200000001
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html; charset=UTF-8
Date: Wed, 22 Apr 2020 18:02:49 GMT
Link: <http://domain.com/wp-json/>; rel="https://api.w.org/"
Server: cloudflare
Transfer-Encoding: chunked
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-Kinsta-Cache: BYPASS

As you can see, there is a CF-Cache-Status: HIT header, which indicates the page is being served from Cloudflare’s cache.

If you are interested in setting up the cache everything feature for your WordPress site, we recommend working with a developer who is experienced with both Cloudflare and WordPress to determine whether cookie-based bypasses or server-side cache-control header generation is a better option for your WordPress site.

In some cases, both methods may need to be implemented concurrently.

Cloudflare WordPress Plugin

The Cloudflare team maintains an official WordPress plugin. While this plugin isn’t an absolute requirement, it does provide some nice features including WordPress-optimized Cloudflare settings, WordPress-specific security rulesets, automatic cache purging, HTTP/2 server push, and more.

For advanced users, we recommend not installing the plugin and configuring settings in the Cloudflare dashboard in order to prevent conflicts with custom page rules.

Summary

Knowing how to configure Cloudflare settings for your WordPress site and how to properly integrate with your hosting stack can positively impact your site speed and security.

Whether you’re a one-man shop or full-service agency with hundreds of clients, Cloudflare is a security and performance service that offers a tremendous amount of value. When paired with WordPress the correct way and a blazingly-fast host, that’s where the fun begins!

Ankit Suryawanshi

Add comment

Leave a Reply