A fast website is a must to engage more users, reduce bounce rates, better SEO results and to improve the overall user experience. We all know, nobody likes a slow website, even search engine or a human hates it.
As of today, WordPress is the most used CMS around the world. But it doesn’t mean that it is very fast enough without further optimizations. One way to speed up and optimize WordPress page speed is using a CloudFlare CDN+Page Rules.
In this guide, I will give you an extra boost to your WordPress page speed without needing an extra cost!
PLEASE NOTE THAT THIS GUIDE IS ONLY APPLICABLE TO WORDPRESS WEBSITES!
Table of Contents
Introducing CloudFlare Page Rules
Page rule is a specific Cloudflare configuration that bypasses the default configuration for a specific page.
On CloudFlare’s global configuration, it only caches the CSS, JavaScript, images files of our website and not HTML files. By using CloudFlare page rules, you can make the Cloudflare servers as a powerful caching machine. It will cache your whole page on their servers and will serve it very fast on your visitors using their global network!
Setting up CloudFlare Page Rules for WordPress
CloudFlare only provided 3 page rules on their free plan. It is enough to deploy the needed configuration for a normal WordPress blog. Setting up this rules are easy if you have a base configuration. Below, I will provide the best WordPress page rules that every WordPress site needs!
Page Rule 1: Bypass Cache for WordPress Admin Page and Log-In Page
Configuration:
*yourdomain.com/wp-admin*
Cache Level: Bypass cache
This page rule must be prioritized first as it is the most critical page of our WordPress site. By setting this page rule, you can ensure that this page will not be cached by CloudFlare. If it is cached, it may display sensitive information when your users directly type the admin URL.
You may observe that our page rule only bypasses the cache for /wp-admin* URL. To include the wp-login page with only one page rule, you must rename your login page to wp-admin[randomstring]. Example: yourdomain.com/wp-admin-login. You can use some security plugin like All In One WP Security to rename login page with ease. Alternatively, if you want a simple plugin to rename your login page, try to use WPS Hide Login Plugin.
Page Rule 2: Bypass Cache for Post/Page Previews
Configuration:
*yourdomain.com/*preview=true*
Cache Level: Bypass Caches
This will bypass caching on preview pages. This will be helpful to you when editing and previewing your post.
Page Rule 3: Cache all visible page for visitors
Configuration:
*yourdomain.com/*
Cache Level: Cache Everything
Edge Cache TTL: Set this depend on your needs.
This third page rule will cache all your WordPress post/pages/images etc. on CloudFlare server.
You can adjust the Edge Cache TTL depending on your needs. Edge Cache TTL is how long does the CloudFlare should store your content. Once it has expired, it will grab the new copy of your site, cache it again, and serves the fresh cache to your visitors. If you are updating your posts regularly, you can set it to 3-7 days, otherwise, if you rarely update your posts, you can set it to 14 days to one month.
The Result? You will get a faster page delivery everywhere in the world! Additionally, your WordPress page speed score will be boosted up to 3x faster!
If you are not contented, you can also add some recipe on these 3 fundamental page rules, like adding Rocket loader, Always Online and etc. Feel free to experiment and make some twist to get the best result!
Speed comparison:
For the comparison, here are the screenshots before and after using CloudFlare Page Rules.
Before:
An illustration showing our website speed without CloudFlare Page Rule
After:
An image showing our WordPress Load Time with CloudFlare
The downside:
Like a very fast racing car, your website may get some scratches and minor damages! Don’t worry, this is little, sometimes it’s not obvious and you can solve this at your own! Here are some bugs you may experience:
issue #1
You need a manual cache purge whenever you publish articles and edit the style of your blog. Although it’s not a big issue, you may get a little inconvenience when you are updating your website. You can install the Official CloudFlare Plugin or WP-Rocket CloudFlare Addon to easily manage CloudFlare cache.
issue #2
You need to purge cache to see the approved comments.
issue #3
Weird loading of the style of your site (on some cases). When your website is loading on mobile devices, the style of your blog becomes a mess. By the way, it will be automatically fixed after the full loading of your website.
issue #4
Admin Top bar is visible to your visitors if you visit your site while you are log in.
My solution: After purging my CloudFlare cache, I visit my pages in incognito mode so CloudFlare will cache the normal page for log out users. Otherwise, you can search on Google “how to hide admin bar WordPress”.
Final words:
I hope that this guide helps you a lot in speeding up your WordPress site! Enjoy! Please leave a comment about your experience in using this configuration. Thank you!
