You know that site speed is a crucial factor for your blog.
Your visitors won’t wait for more than a couple of seconds for your web pages to load before they leave. Google has made it clear that response time is a significant factor in search ranking. So yes, speed matters today for your site.
It is relatively easy to get reasonable page load speeds for desktop with WordPress. But mobile speed is not quite so simple.
However, there is a way to fix the problem with Cloudflare page rules.
Are you using Cloudflare?
The first step to improving your server-side response times is to have your site running on a CDN (Content Delivery Network).
The most popular is service Cloudflare for most bloggers. It is highly effective, reliable, and free.
If you need to add your site to Cloudflare, this tutorial by WP Beginner is a good place to start.
But if you are already using it, you can dramatically improve the performance of your time to first byte (TTFB). It is one of the most critical factors for site loading speed.
In an earlier article, I wrote about improving speed for WordPress admin pages with three page rules.
But for this fix, you will need to use the Cloudflare cache everything function.
If you are using a free Cloudflare account, you only get three page rules. So it will require changes to your existing page rules.
Here are some examples of how much difference these changes can make to your TTFB speed.
The two images below using Chrome Deleveopers Tools show you how much difference you can make to your mobile speed. The first is not optimized and has a TTFB of 1.55 seconds.
You can see the improvement here after adding the new Cloudflare rule. TTFB is now only 33.25 milliseconds.
From my Freshping account, you can see the overall response times for the three sites that I have optimized. They are 90% faster than the four sites that are not yet fully cached.
How to apply Cloudflare cache everything
Before you jump into making these changes, a word of warning.
This method is only suitable for a reasonably static site that doesn’t change very often. If you have dynamic content such as changing widgets, Twitter feeds, sliders, or regular updates of information, it is not a good idea.
When you add cache everything to Cloudflare, it really does what it says.
Here is how you can add this site speed improvement from your Cloudflare dashboard.
To start, you will need to add your new rule. Click on the page rules app button in the top menu.
If you already have three rules, you will need to delete one. In my case, I deleted the *preview=true* rule.
Now add your new page rule for your website URL with a wildcard star either end.
Then add these rule settings.
Browser Cache TTL – 1 hour
Cache Level – Cache Everything
Edge Cache TTL – 7 days
Click save, and everything is now set for your cache control headers.
One important note is to check and make sure that you order your rules as in the image above. Your site cache rule must come after your wp-login and wp-admin rules to protect the origin cache-control of your admin pages.
You should also check your Cloudflare browser cache settings to make sure that you have selected Respect Existing Headers.
You might also want to check if you are using Cloudflare’s Rocket Loader.
When it works, it works extremely well, but it can also break your site. I have it running on two sites, and it is fine. But on one other site, it causes problems, so I have it turned off.
Once you have checked that all the settings are correct, go to your site to see if everything is working as expected. It should be loading almost instantly now.
Then check your site speed with Google Page Speed Insights, GTMetrix, or Pingdom to see the improvement. You aim should be under 200 ms for TTFB and under 2 seconds for fully loaded.
Here is a screenshot of the load timing for one of my sites on GTMetrix. You can see that it is fully loaded in only 0.6 seconds.
One drawback and the solution
Because everything on your site is now cached, any changes you make will not take effect until the cache cycle clears. This can take a long time to happen.
Therefore, when you add a new post or edit an existing post, you won’t see the changes. It also applies to new comments on your site.
The only way around this is to install the Cloudflare plugin. I don’t like adding more plugins, but this one is absolutely necessary for this speed fix.
Once you add it, change the Automatic Cache Management to on. It will now purge individual files you create or edit and then cache the new files from your origin web server.
From the plugin, you can also purge your whole site. But this action will increase your load time.
It is better to pause your website on Cloudflare if you want to bypass cache issues to investigate any problems.
The button you really shouldn’t click is the Optimize Cloudflare for WordPress.
Cache everything works very well and will speed up your site enormously. It is especially effective for improving mobile site speed.
But it is not for every site, and there can be drawbacks depending on your theme, functionality, and site design. This caching method is very aggressive, so double-check everything.
Ideally, you should try it first on a staging or sandbox site to ensure that your site works without any major problems.
However, if you have to implement it on your live site and you run into problems, you can remove always the page rule and then fully purge your site on Cloudflare. You will then be back to where you started.
If you need help, there are a lot of entries on Cloudflare Support regarding cache static content and cache everything.