How to correctly configure Cloudflare illustrations for WordPress websites

By acting as a reverse proxy in front of your site, Cloudflare is an integrated security and performance product that is used by more than 12% of websites worldwide. As a WordPress user, adding Cloudflare to your site can help improve site performance and reduce the impact of malicious robots and hackers. When

is properly configured, all requests for your site will first arrive at the Cloudflare server, which will then determine whether the request should be forwarded to the source server, serviced from the cache, blocked, or processed using custom rules.

in this guide, we will delve into the best Cloudflare settings for WordPress, discuss caching and security settings, and show you how to configure Cloudflare for a WordPress multi-site installation. How do

  1. configure Cloudflare
  2. Cloudflare WordPress plug-in
  3. WordPress Cloudflare automatic platform Optimization
  4. Cloudflare Argo and Railgun
  5. how to configure Cloudflare

how to configure Cloudflare

Cloudflare for WordPress provides a variety of security and performance advantages But not all of these advantages are fully compatible with WordPress. Let’s take a closer look at the settings of Cloudflare to determine the best features for your WordPress site.

  1. SSL
  2. Speed
  3. Cache
  4. Firewall

SSL

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

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

for users who want to use Cloudflare on their WordPress website, we recommend that you generate a free Let’s Encrypt SSL certificate in the pagoda panel and use the Full or Full (Strict) option in Cloudflare.

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

if you use Flexible SSL that hosts the site on the subdomain and the root domain uses Cloudflare’s Flexible SSL, you can use Cloudflare page rules to force the subdomain to use Full or Full (Strict) SSL.

How to correctly configure Cloudflare illustrations for WordPress websites1

enables Full (Strict) SSL

for subdomains with Cloudflare page rules this option allows you to use the Flexible SSL of Cloudflare while ensuring the Cloudflare Full (Strict) SSL of the subdomain.

Always use HTTPS

We recommend that you enable this option to automatically forward all HTTP requests to HTTPS.

HSTS

HSTS stands for “HTTP Strict Transport Security” and is used to force Web browsers to use secure HTTPS connections. Enabling HSTS on Cloudflare ensures that HTTP requests never reach your source server. If your site is set up to use HTTPS, we recommend that you also configure HSTS on the source server.

Minimum TLS version

TLS (Transport layer Security) is an encryption protocol that allows data to be transmitted securely over the network. By default, Cloudflare sets TLS 1.0 for the protocol version. Some security standards, such as PCI DSS 3.2, require a newer version of the TLS protocol for compliance. If your site needs a version of TLS, you can change the settings by going to SSL/TLS & gt; Edge Certificates & gt; Minimum TLS Version.

Automatic HTTPS rewriting

this feature checks the URL of HTTP resources in HTML code to see if they are accessible through HTTPS. If so, they will be automatically rewritten with HTTPS variants. Automatic HTTPS rewriting is useful for ensuring a secure browsing experience without mixed content errors.

Speed

most performance-related Cloudflare settings, such as asset reduction and image optimization, can be found on the Speed tab.

Image resizing (business plan only)
The image resizing feature of

Cloudflare is available only to business plan users. When implemented correctly in your WordPress theme, this feature can be used to generate image thumbnails from offload to Cloudflare. This has several advantages over the built-in thumbnail generation capabilities in WordPress.

for sites that generate image sizes dynamically, use Cloudflare’s image resizing feature to reduce CPU usage– which allows your site to serve more concurrent users without adding CPU resources. Cloudflare image resizing also helps reduce disk space usage because thumbnails do not have to be stored on the server.

Cloudflare image resizing works by adding endpoints in front of the image. Take a look at the following example, which shows how this 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

can adjust the width parameter to dynamically generate different thumbnail sizes without any additional resource load on the source server. If you are looking for a stand-alone service similar to Cloudflare’s image resizing feature, Imgix and Cloudinary are good choices.

, don’t forget to check out our in-depth guide to optimizing web images.

Polish (Professional version only)

Cloudflare Polish is an image optimization service that automatically compresses JPG, PNG, GIF, and other image files. The image is processed at the Cloudflare edge, which means that the server hosting the WordPress site has no performance burden. Polish also supports Google’s WEBP format-which means that optimized WEBP images are automatically provided to Chrome, Brave, and other browsers that support this format.

Polish is a useful feature of the WordPress website for several reasons. If you are using image optimization plug-ins such as ShortPixel or Imagify, Polish can significantly reduce server CPU usage-which can lead to a more stable browsing experience for visitors. Because Polish images are stored and cached outside the server, you don’t have to worry about running out of disk space to store the WEBP version of the image. The Auto Minify feature of

Auto Minify

Cloudflare automatically shrinks cached CSS, JSS, and HTML assets. If you do not use WordPress plug-ins such as Autoptimize or WP-Rocket to shrink assets, we recommend that you enable auto-shrink in Cloudflare.

Brotli

Brotli is an alternative to GZIP, and GZIP is a compression algorithm that reduces the size of Web requests before they are presented to visitors. Brotli provides a higher compression ratio than GZIP, which means that users’ pages load faster. The problem is that not all web browsers support Brotli compression. In any case, we recommend that you enable the Brotli feature of Cloudflare, because requests from unsupported browsers will only be returned to GZIP compression.

Enhanced HTTP/2 priority (Professional version only)
The introduction of

HTTP/2 brings significant performance improvement to the website through parallelization and multiplexing. Cloudflare’s enhanced HTTP/2 priority feature goes a step further by intelligently parsing your site’s HTML to determine the order in which assets are loaded for best performance. According to Cloudflare, the enhanced HTTP/2 priority can reduce page load time by up to 50%.

Mirage (Professional version only)

Mirage is an image optimization feature for mobile and low-bandwidth connections. When Mirage is enabled, the image is replaced with a low-resolution placeholder during the initial page load. After the page is loaded, the full-resolution image is delayed.

Mirage can also combine multiple image requests into a single request, reducing the number of round trips required to fully load the page. If your site uses a lot of pictures and targets people with more mobile devices, Cloudflare Mirage can have a positive impact on performance.

Rocket Loader

Rocket Loader is a feature that speeds up load time by loading JavaScript resources asynchronously. This effectively reduces the rendering blocking content of the page, thus speeding up the page loading time. We recommend that you test your website with Rocket Loader enabled to see if it can improve your page speed. If your WordPress site relies on JavaScript assets loaded in a specific order, you can bypass Rocket Loader by adding the attributedata-cfasync="false"to the script tag.

cache (Caching)

by default, Cloudflare caches static assets such as CSS, JS, and image files. Note that by default, Cloudflare does not cache the HTML generated by your site.

Cache level

We recommend leaving the cache level at “Standard”, which allows newer versions of the asset to be accessed using a unique query string.

Browser cache validity period

if your server itself has set the browser cache expiration date, we recommend setting the browser cache expiration setting to “Respect Existing Headers”. If you want to override this setting with a shorter expiration time, please change this setting at any time.

Firewall (Firewall)

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

for example, if you find that your WooCommerce store receives a large number of fake orders from countries other than the target market, you can use Cloudflare’s free firewall to block traffic from the entire country.

Cloudflare’s Pro initiative has a more powerful Web Application Firewall (WAF). WAF provides a dedicated set of managed rules to help further protect your site. For example, there are some rule sets for WordPress and PHP sites.

How to correctly configure Cloudflare illustrations for WordPress websites2

Cloudflare managed rule set for WordPress

for most WordPress sites, the level of security provided by Cloudflare’s free plan is sufficient. However, if you are running a mission-critical business site that requires more protection, Cloudflare’s professional-level WAF and managed rule sets can help further protect your site.

(recommended reading: Sucuri vs Wordfence)

Network (Network)

in the “Network” setting of Cloudflare, we recommend enabling HTTP/2, HTTP/3 (using QUIC), and 0-RTT connection recovery.

as we mentioned earlier, HTTP/2 brings some improvements to HTTP/1.1 through parallelization and multiplexing. Similarly, HTTP/3 further extends the performance of HTTP/2 by using a new UDP-based protocol called QUIC instead of traditional TCP.

How to correctly configure Cloudflare illustrations for WordPress websites3

enables HTTP/2, HTTP/3, and 0-RTT connections to restore

secure HTTP/3 connections also benefit from optimized handshake routines, reducing connection time. When HTTP/3 is enabled in the Cloudflare dashboard, supported clients will be able to connect to the Cloudflare server using HTTP/3.

finally, Cloudflare’s 0-RTT connection recovery feature reduces the load time for visitors who previously connected to your site.

Page rules (Page Rules) the page rules feature of

Cloudflare allows you to customize settings for a specific URL. Page rules are useful for disabling caching for some assets, changing the security level of selected pages, and so on. Cloudflare page rules have two key components– the URL matching pattern and the actions performed on the matching URL. In the screenshot below, you can see the rules for redirecting www URL to a non-www version of the Cloudflare page.

How to correctly configure Cloudflare illustrations for WordPress websites4

Cloudflare forward URL page rule

this rule matches URL that starts withwww.brianonwp.com. Note the inclusion of asterisk characters, which allow you to create wildcard matching patterns. Think of the asterisk as “anything here”. In URL mode, you can see that the page rule is configured to redirect all matching requests tohttps://brianonwp.com/$1, where “$1” refers to the “first wildcard” in the matching pattern.

uses page rules like this, and requests thatwww.brianli.com/specific-page/be redirected tobrianli.com/specific-page/.

using Cloudflare page rules, you can apply specific settings to any matching URL. View the following list of settings that can be applied to page rules. Some settings can even be combined into one page rule!

  • Always Online-enables or disables the “Always Online” feature of Cloudflare, which provides a static HTML copy of the page if the original server is found offline.
  • Always Use HTTPS-Force the use of HTTPS for matching URL.
  • Auto Minify-enables or disables HTML, CSS, and JS reduction.
  • Automatic HTTPS Rewrites-enables rewriting of HTTP URL in HTML to the HTTPS version.
  • Browser Cache TTL-specifies to match the browsing ​​ cache TTL on the URL. For example, you can set up different browser cache TTL for different types of files.
  • Browser Integrity Check-enables or disables the “Browser Integrity Check” feature of Cloudflare, which checks HTTP headers to clear robots and malicious traffic.
  • Cache Deception Armor-enables or disables the “Cache Deception Armor” feature of Cloudflare, which prevents Web cache spoofing attacks by ensuring that the asset’s file name extension matches its “Content-Type”.
  • Cache Level-configures the cache level that matches the URL.
  • Disable Apps-disables Cloudflare application integration to match URL.
  • Disable Performance-disables the performance-related features of matching URL.
  • Disable Railgun-disable Railgun to match URL.
  • Disable Security-disables the security feature that matches the URL.
  • Edge Cache TTL-specifies the edge cache TTL (the amount of time that the asset caches on the edge network of Cloudflare).
  • Email Obfuscation-enables or disables Cloudflare’s email obfuscation script, which reduces successful robot crawling by disrupting email addresses.
  • Forwarding URL-create a 301or302redirect to another URL.
  • IP Geolocation Header-enables or disables the IP geolocation HTTP header for Cloudflare.
  • Opportunistic Encryption-allows clients to access HTTP URL through a secure TLS channel.
  • Origin Cache Control-specify how you want Cloudflare to respond to the “Cache-Control” instruction of the source server.
  • Rocket Loader-enables or disables Rocket Loader on matching URL.
  • Security Level-specifies the security level that matches the URL.
  • Server Side Excludes-enables or disables Cloudflare’s Server-side exclusion feature, which allows you to hide sensitive information in suspicious traffic by wrapping HTML in a label.
  • SSL-specifies the SSL level (disabled, flexible, full, or full strict) that matches the URL. The

Cloudflare WordPress plug-in

Cloudflare team maintains an official WordPress plug-in. Although this plug-in is not an absolute requirement, it does provide some good features, including WordPress-optimized Cloudflare settings, WordPress-specific security rule sets, automatic cache clearing, HTTP/2 server push, and so on. The

How to correctly configure Cloudflare illustrations for WordPress websites5

Cloudflare WordPress plug-in sets

WordPress’s Cloudflare automatic platform Optimization

Cloudflare’s WordPress automatic platform Optimization (APO) is a dedicated performance optimization service for WordPress sites. Cloudflare APO works by caching the HTML pages of your WordPress site directly on the Cloudflare edge network. This is a big leap forward for typical caching of static assets (CSS, JS, images, etc.) on CDN. In our benchmark, we found that enabling Cloudflare APO resulted in a 70-300% improvement in performance, depending on the test location.

Cloudflare APO for WordPress works by storing a HTML copy of the page in Workers KV, a globally distributed key-value storage service. When APO is enabled, requests to your site are served by the edge cache of Workers KV or Cloudflare rather than your source server. This is a big step forward in the field of WordPress performance, because APO,WordPress sites are no longer limited by the location of the source server. Before

How to correctly configure Cloudflare illustrations for WordPress websites6

enabled automatic platform optimization

for WordPress in the Cloudflare dashboard, using traditional CDN settings, HTML pages still had to be serviced by the source server. For example, if the source server of your site is located in the United States, visitors from London must wait for HTML documents to be sent from the United States. The use of APO,HTML and other static assets are provided by the Cloudflare data center near London.

Cloudflare APO is most compatible with traditional blogs, news sites, landing pages, and other sites that do not rely on dynamic features (WooCommerce stores, forums, etc.). APO automatically bypasses Cloudflare’s HTML cache for logged-in users and pages that contain certain cookie, such as WooCommerce. APO is available as a free service for Cloudflare Pro, Business, and Enterprise programs. For free Cloudflare users, APO is a $5 monthly add-on.

If you are interested in learning more about Cloudflare APO, please check out our in-depth guide here.

Cloudflare Argo and Railgun

Cloudflare provide additional performance products that may help to further improve the performance of your WordPress website. These features cost extra, but if you want to redouble your efforts in site optimization, they may be worth a look.

Argo

Argo is an Cloudflare add-on service that provides “smart routing” for your website. When Argo is enabled, traffic is routed around congested areas in the Cloudflare network. In our tests, Argo reduced page load time by 20-30%. If you are a Cloudflare user and want to work harder on performance optimization, trying out Argo may produce positive results.

Railgun

Cloudflare’s Railgun is a WAN product that establishes a secure tunnel between your server and Cloudflare’s server. Railgun is designed to accelerate the delivery of uncached content by providing only the overall difference between requests. For example, if page An and page B have the same header and footer structure, but the body content is different, Railgun is aware of this and handles the difference only through a highly compressed binary data stream.

Railgun applies only to Cloudflare’s business and enterprise plans, and requires your network host to install additional software on the server at your site. For most users, using Cloudflare to maintain fast load time does not require Railgun acceleration. However, if you are running a high-traffic WooCommerce store or forum that cannot be cached, Railgun may help speed up your site. How

configures Cloudflare

for WordPress multisite if you use Cloudflare with WordPress multisite, you should consider some special considerations when setting up.

SSL setup

to demonstrate the Cloudflare SSL setup for WordPress multi-site, we created a test sub-domain multi-site, because if you use sub-directory multi-site, you should not encounter any SSL problems.

this is the structure of our test subdomain WordPress multi-site:

  • main site-brianwp.com and www.brianwp.com
  • sub-site 1-site1.brianwp.com
  • sub-site 2-site2.brianwp.com

preferred, we need to add domains for multiple sites.

similarly, the domain has been configured with the appropriate A record in Cloudflare. The Cloudflare agent is also enabled, as shown in the orange cloud icon. Cloudflare DNS Records for

How to correctly configure Cloudflare illustrations for WordPress websites7

WordPress Multi-site

to use Cloudflare in Ful (Strict) SSL mode, all associated domains must exist on the source server’s SSL certificate. There are two ways to do this.

Let’s encrypt or pay for SSL

if your host supports free Let’s Encrypt SSL, continue to generate SSL certificates that cover all multisite domains.

on the pagoda panel, you can easily generate SSL certificates covering all domains.

How to correctly configure Cloudflare illustrations for WordPress websites8

generates SSL certificate

for your multiple sites in the pagoda panel
Cloudflare Origin SSL certificate

or you can generate an Cloudflare Origin SSL certificate that covers a multi-site domain. To generate the original certificate, navigate to SSL/TLS & gt; Origin Server and click Create Certificate.

How to correctly configure Cloudflare illustrations for WordPress websites9

generates Cloudflare raw certificate

raw certificate generation menu is divided into three parts. In the first part, select “Let Cloudflare generate a private key and a CSR” unless you have a specific reason to provide your own credentials.

in the second part, enter the domains and subdomains that the SSL certificate needs to cover. You can only generate certificates for domains in your Cloudflare account.

finally, in the third part, select the validity period of the certificate. After the

setting contains the correct SSL certificate for all multisite domains, you will be able to use Cloudflare in the recommended Full (Strict) SSL mode. If you need to add additional domains or subdomains to multiple sites in the future, be sure to generate a new SSL certificate that covers the other domains.

WordPress multi-site page rules other security and performance features of

Cloudflare apply globally to all subdomains under your root domain. In other words, if CSS reduction is enabled on our main site brianwp.com, then site1.brianwp.com and site2.wpbrianli.com will also enable it. In some cases, this default behavior of

can cause problems. For example, you might not want to disable HTML, CSS, and JS optimization globally just because it is incompatible with a single subsite. To resolve this problem, you can use custom page rules to selectively disable the functionality of a specific subdomain.

in the following example, we set a rule for*site2.brianwp.com/*pages. The*character is used to specify wildcard behavior. You can think of its*as “anything here”.

for this page rule, we disabled automatic zooming of HTML, CSS, and JS, disabled Rocket Loader, bypassed the Cloudflare cache, and turned off automatic HTTPS rewriting.

How to correctly configure Cloudflare illustrations for WordPress websites10

creates selective Cloudflare page rules to locate the WordPress subsite

. If you use Cloudflare’s free plan, note that it comes with only three page rules. If you need to make selective adjustments to multiple subsites, you need to upgrade to the Pro plan or purchase additional page rules.

Summary

learn how to configure Cloudflare for your WordPress site and how to integrate properly with your managed stack can have a positive impact on your site speed and security.

Disclaimer: All articles on this website, unless otherwise specified or marked, are original and published on this website. Any individual or organization is prohibited from copying, stealing, collecting, or publishing the content of this site to any website, book, or other media platform without the consent of this site. If the content on this website infringes on the legitimate rights and interests of the original author, you can contact us for assistance.