Reduce Initial Server Response Time on WordPress with Cloudflare Cache HTML

To reduce initial server response time on your WordPress site, we need to use full-page Cloudflare cache HTML. In this article, we will see how to cache HTML on WordPress Cloudflare & how to reduce Time to First Byte or TTFB.

What is Initial Server Response Time

Initial Server Response Time is also called Time to First Byte or TTFB in page speed test tools. It is the time taken by the server to respond to a request originating from the client browser i.e website user. When we host our website on a shared server, it takes more time for the response because multiple websites are hosted on the same server, & the same server is responding to them. Time to First Byte or TTFB also gets increased when the server is located too far from the user like a user is in the Asia and hosting server is in the USA.

Anything below 600 milliseconds is considered a good TTFB or initial server response.

Initial Server Response Time

In the above image, you can see the TTFB or initial server response of a website without a CDN cache. Notice here that only the Singapore location has very low TTFB because the hosting server is located in Singapore.

This Initial Server Response Time also impacts SEO as this affects page speed.

Free Cloudflare Cache CDN

Cloudflare is the best free CDN service available right now. It has servers all around the world. As soon as link your website with Cloudflare, by default, it starts caching static files like javascript, CSS, images, etc. This improves the load time of your website.

Does Cloudflare cache an HTML page?

But it does not cache full web pages i.e HTML content to keep our website dynamic. For example, if our website is showing a live score & Cloudflare is caching full website HTML content, then the score will not update as it will show the old page from the cache.

But generally, our WordPress blog website contents are static in nature. Once a post/page is published we do not update content daily on WordPress blogs. In this type of scenario, the following tutorial can be implemented.

Remember, if your website is dynamic in nature or has an E-commerce website with WooCommerce, do not cache HTML.

How to cache HTML on WordPress Cloudflare

First login to your Cloudflare panel & go to the cache rules option from Caching menu in the sidebar.

How to cache HTML on WordPress Cloudflare

Then create a new rule & set your condition for caching i.e which pages you want to cache. Here I am setting up the entire website cache, that’s why only matches the domain name. If you want to cache specific URL or pages with URL that contains a specific pattern, you can also do that.

Then in the Cache Status must select Eligible for Cache. Then select a time for edge TTL. For example, if you want to cache a page for a week, select 1 week. So that after 1-week the cache version of the page will refresh to the latest version from the web hosting server.

edge ttl cloudflare

Bypass Cache in WordPress Admin pages

WordPress website blog front pages are static in nature, but backend admin pages are dynamic in nature. Hence if those pages are also cached, then we will break our site, even if it will be a security issue, as other visitors may see admin pages even without login. To fix that issue you must bypass the cache for WordPress admin urls.

So we will create now a new rule. This time we will check url patterns & website cookies to bypass the cache for admin-specific login-protected pages.

First, we need to check “wordpress_logged_in” cookie is present or not. This cookie is created when any WordPress admin/author/subscriber login to the site. Then we will check URL patterns. Generally in WordPress sites, “/wp-admin” and “/wp-login” is present in the backend admin panel urls where we write posts & set up the website from CMS.

Bypass Cache in WordPress Admin pages

Look at the image above and do the same thing to your setting also. Must note that the domain is having “And” condition & the rest of all are in the “Or” condition.

Here we are also bypassing the sitemap URL so that search engine bots always crawl the latest updated posts & pages.

Server Response Time with Cloudflare Cache

Now it is time to see the result. After implementing the above settings Time to First Byte or TTFB is reduced to less than half. Where without Cloudflare HTML cache it was 800 ms, now it is almost 250 ms from all the locations in the world.

Server Response Time with Cloudflare Cache

When you are serving WordPress Blog pages as static pages from Cloudflare CDN servers, you will notice most of the requests are served from CDN Cache in the Web traffic analytics dashboard of the Cloudflare panel.

WordPress Blog pages as static pages from Cloudflare CDN

Video Tutorial

In this way, you can boost your website performance & reduce the load on the origin server to avoid bandwidth usage quotas in shared servers and save money without moving to VPS.

Share with Friends
0 0 votes
Inline Feedbacks
View all comments