To reduce initial server response time on 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.
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 & reduce Initial Server Response Time on WordPress site.
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.
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.
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.
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. We are now succeeded in our target of reduce Initial Server Response Time on WordPress site.
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.
Video Tutorial
Watch the video tutorial on how to Reduce Initial Server Response Time on WordPress.
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.
