Some people know Cloudflare as a free web hosting platform and for some, it is a free CDN network. However, in reality, Cloudflare serves as a bridge between your Web host and domain. It is not really like a traditional CDN network but more like a Cache CDN network. It creates multiple copies of your website’s cached web pages and hosts them from different locations around the globe, also known as Content Delivery Network.
So, what Cloudflare basically does is, it creates a whole cache of your entire website (including Images, CSS, Javascript Files) and serves them directly to your website visitors from the closest location. Currently, Cloudflare has 165 data centers around the world which are powering billions of web pages.
Table of Contents
Why Would You Need Cloudflare CDN in the First Place?
Cloudflare serves cached file on Nginx Web Server which is much more faster than Apache webserver (as I have mentioned in this article). So even if your WordPress site is using the Apache web server, you still can use the advantages of the Nginx web server (you can check your current webserver from this link). It also automatically boosts your website speed by taking most of the server load from your main hosting to its own Cache CDN network. Cloudflare not only drastically improves your WordPress performance but also its security and uptime reliability. So today, I have shown the best way to use the Cloudflare Cache CDN setting that will help you to increase your WordPress site’s speed and security.
I will breakdown Cloudflare settings in four sections as
- SSL (Encryption)
- Speed (Compression)
- Cache (CDN)
- Custom Page Rules (for Aggressive Speed and Security)
I have been using Cloudflare for the last three years and I know what’s up with Cloudflare and how it can really protect your website from hackers and boost its performance. So follow these settings step by step.
Before we proceed further, I am assuming that you have successfully added your website on Cloudflare. If not, please read this easy to understand tutorial to add your website on Cloudflare.
1. Cloudflare SSL Setting
To make our website encrypted, you must enable the free SSL certificate issued by Cloudflare. You may use a custom SSL certificate provided by another issuer but honestly, it doesn’t make a much difference in a WordPress blog. You can choose Cloudflare Public SSL for your WordPress blog.
1 (a) Download SSL Plugin for WordPress
Before performing the following settings, I want you to download the SSL Insecure Content Fixer plugin that will resolve all the HTTPS redirect loop problem that you may face later.
Now, go to the plugin’s setting and enable the plugin by selecting “Fix insecure content” as “Content” and “HTTPS detection” as “HTTP_CF_VISITOR” as you can see above in the screenshot. Finally, save the settings and you are ready to do changes in Cloudflare.
1 (b). Select Flexible SSL
For WordPress, SSL flexible setting is always good as it does not create any HTTPS redirect loop problem. Also, it provides SSL when it is requested by the client.
1 (c). Always Use HTTPS
This feature of Cloudflare is important to turn on because it redirects your all non-https pages to secure HTTPS.
1 (d). Enable HTTP Strict Transport Security (HSTS)
Very enhance web security protocol for proper end-to-end encryption. Go to the installation process and finally attempt all settings as I’ve mentioned.
- Status: On
- Max-age: 1 month
- Include subdomain: On
- Preload: On
1 (e). Enable Authenticated Origin Pulls
1 (f). Enable More Crypto Settings
- Enable Opportunistic Encryption
- Enable Onion Routing
- Enable Automatic HTTPS Rewrites (to transmit all files via secure HTTPS)
Finally, within 24 hours you will be able to see a green locked secure icon in your browser which is right next to your website name. It simply means that your website is fully encrypted with Cloudflare SSL. Also, do check if your all content is serving via HTTPS and no mixed non-https content is there. If everything is fine, the Chrome browser will show that “All resources on this page are served securely.” To confirm this, press F12 on your WordPress page and check it on the Security tab.
Let us move further and find out how we can increase our WordPress blog speed.
2. Cloudflare Speed Setting
Speed is another advanced feature of Cloudflare. To make this effective, you need to follow these settings. I am telling you, you will see a great improvement in your web speed after you implement these settings.
2 (a). Enable Auto Minify
Tick all minification of JavaScript, CSS, and HTML to turn on overall minification.
Well, Minification is important for any website. Even, Google recommends the minification of a webpage. What minification does is that it decrease overall webpage weight by reducing the size of your CSS, JS and overall HTML file. Basically, the minify process includes removing spaces and unnecessary codes from a page file. As a result, the webpage loads faster for your visitors.
2 (b). Enable Brotli Compression
Brotli is a compressed data format that compresses your webpage files 14% to 21% as compared to conventional Gzip compression. Developed by Google back in 2013, Brotli is an advanced compression technique used by today’s modern websites.
2 (c). Enable Rocket Loader
Rocker Loader is a technology by Cloudflare which optimized paint time so that the above the folder section of your webpage loads faster. If your webpage has a lot of Javascript files, this feature is really important for your WordPress blog.
You may leave all the other settings as it is in the Speed tab.
3. Cloudflare Cache Setting
Cache is a great way to improve your website speed. I have already explained how proper W3 Total Cache settings can improve WordPress reliability drastically. Cloudflare is no exception.
However, the Cloudflare serve your Cache files via its CDN network around the globe to reduce latency. As you know by far that Cloudflare has 165 datacenters worldwide that serve cache files of different websites from the closest location to the internet users. This makes your WordPress site’s response time fast.
3 (a). Define Caching Level
Make your Cache Level as the “standard” for almost all WordPress or Woocommerce blog.
3 (b). Define Browser Cache Expiration
Browser Cache Expiration defines how long a web browser should keep the files in its cache database. As per my experience, you should keep it to the maximum for static as well as for some dynamic WordPress sites.
3 (c). Enable Always Online Mode
I absolutely love this mode. It helps you to keep your website up even if your web host is down for some reason. Cloudflare will keep serving your website’s static pages from its cache CDN.
4. Cloudflare Page Rules Settings
Page rules define how a set of pages should respond when it is requested by an internet user. Custom page rule is one of the great tools of Cloudflare to enhance web security and performance as per custom page rule. So here is how you can set a page rule of your website to the optimal level.
Note: Please replace yourdomain.com with your own domain name. Cloudflare gives only three-page rules for a free account and we have to make use of all of them.
4 (a). First Page Rule to Avoid Security Attack on WordPress
We can improve security by adding above setting in page rule. This page rule is important to avoid an invalid login attempt on WordPress. Here is the setting you need to apply on the below link.
*.yourdomain.com/wp-login.php*
- Security Level: I’m Under Attack
4 (b). Second Page Rule to Cache Images, CSS and JS
Here in this second-page rule, We are building aggressive cache so that our static files serve faster. You need to apply these settings on the below link.
*.yourdomain.com/wp-content/uploads*
- Browser Cache TTL: a year
- Always Online: On
- Cache Level: Cache Everything
- Edge Cache TTL: a month
4 (c). Third Page Rule for Reliability and Speed
This one is also important as it defines how your overall WordPress blog should perform. You need to apply these settings to the below link.
*.yourdomain.com/*
Here are some of the main settings.
- Auto Minify: Select all
- Rocket Loader: On
- Cache Deception Armor: On
- Origin Cache-Control: On
- Security Level: Medium
So overall, you have three-page rules and you should sort them as per priority order as I have shown below.
So, guys, that is it. Now all you need to do is to wait for 24 hours and thereafter change your WordPress site address from “HTTP” to”HTTPS”. Just log in to your WordPress and go to Settings – General – Apply these settings. Change your website name accordingly.
https://yourdomain.com or https://www.yourdomain.com
These Cloudflare settings are very helpful for WordPress and you can use these settings with W3 Total Cache to make your webpages load faster than your competitors.