How to Speed up Your Site via Cloudflare Page Rules for HTML
HTML is one of the most important aspects with regard to the speed of your webpages. If we cache HTML it will reduce the usage of resources and improve the performance of the site. Caching HTML is very useful in a site performance perspective. You know that Cloudflare usually caches all static resources which has also a great impact on site performance. Like CSS, Javascript, images, and all. But what about HTML?, so in this article, we are going to explain how to make HTML caching work with WordPress and Cloudflare Page Rules
HTML caching is called full page cache it is not a default cached code from the Cloudflare we have to create rules for this. So what we need to do so let see.
Required Features for HTML full page caching
Page Rules
As I already stated above that by default, Cloudflare is not caching HTML. to do so we need to use page rules and have to enable the cache everything setting. This means you enable the caching of HTML by making a rule that cache everything. But to do this there is a problem and you have to take care of these two factors while making page rule for HTML.
- The HTML content for which you are creating the rules has to be static. In simple words, it does not change over time. Like a dynamic front page.
- The second thing the content is anonymous. This means that it is the same piece of content that is intended for any visitor to this resource.
These all thing shows that Caching everything is not engough for the setup.
Cache Everything
Cache Everything means you cached everything even the content not needed to cache. When you cache everything this will be a risk. Maybe you cache those content that is not intended for the next visitor. Let me explain with an example if you are login as an admin in WordPress dashboard and visit your front page and you cached everything, literally everything. Then the next visitor who is a normal visitor who accesses the site will see the admin edit bar that only was intended for you. So to not get stuck in this type of stuff you need to do and other things and that is to Bypass Cache on the Cookie setting.
Bypass Cache on Cookie
A cookie is a small piece of data stored on the user’s computer by the web browser while browsing a website. To login to a website, cookies are needed to maintain a link between your local computer and server. A cookie from your local computer, it is sent with every request you make to the server. This means that you can tell the server to pass the request through to the origin server, given the user has a certain cookie. With this enabled, you can deliver cached responses to Anonymous visitors, while you as an Administrator, or a logged-in customer in your WooCommerce, are getting served a tailored HTML page that will not be cached. In this way you have to do so you will not face the everything cache problem.
Always chose a best and correct plan to do this.
Configure Cloudflare for HTML caching for WordPress
Caching HTML is one of the important and critical issues. Keep in mind that when you are going to leverage Cloudflare for the HTML caching, always reduce the number of plugins you are using for caching, Optimization, aggregation, and all that. The use of more plugins makes it complex and complicated. Made the thing harder to resolve and understand. maybe they also cause a conflict. And I honestly tell you that caching with Cloudflare is more efficient and worthy. There’s nothing more annoying than trying to debug cache issues on a CDN. A visitor would report some error, and when you test this hitting another CDN node the results could be entirely different.
Now its time to setup page rules for html. To do so follow the steps.
Setting up the Cloudflare Page Rules
In order to process the different requests from Cloudflare, you need to set up different rules for it. The first-page rule that matches the incoming request is the one that will be applied.
To add Page rule go to Page Rule
Here is some configuration, These are some basic configurations for a WordPress site.
Explanation for these Cloudflare Page Rules:
Now let’s explain these rules we provided above. These three rules are different and have there own importance according to there values.
1: Enable Cache for all requests going to anything in the folder wp-content. And this rule includes all the themes and plugins all.
2: Now I think you got it for which contains the second rule is. Yes, it is for all requests from the wp-. This rule bypass the cookie. This makes it possible for you to log in wp-login.php, and work in the admin wp-admin/* without running into caching issues. When you log in to the Control Panel, you will get the no-cache cookie
3: This third rule is for the whole website. All the rest requests. I didn’t set the bypass cache on it you can set for this.
This is for a stranded WordPress site but for a woocomerce site you need some other rules as well.
Additional required Cloudflare Page Rules for WooCommerce:
As you know the woocomerce site is very different from the normal site and there is a huge difference between the caching of woocomerce and a normal blog site. Although the basic rules for woocomerce are the same it need some additional rules for this purpose. These rules are specified for specific paths of sites. Like checkout, cart, etc. I will show you some rules.
With the rule mentioned above, you can also use these two rules for your woocomerce site. The checkout often involves multiple steps, therefore the checkout wildcard rule is used to bypass the cache. and also the cart.
In this article, we will go for some other details but first, we have to know how we can purge cache in cloudflare.
Purge cache in Cloudflare
Purge meaning clearing cache in Cloudflare. Sometimes you need to clear the cache in order to visible changes and getting some new content. Purging cache is different in Free and Enterprise plans. I will discuss here the method. For the free version, we have Purge by single-file (by URL).
Purge by single-file (by URL):
- Login to Cloudflare
- Select the site you need to purge
- Go to the Caching from the top menu.
- In the Purge Cache pane, click Custom Purge.
- Select URL in the Purge by field.
- Enter the appropriate value(s) in the text box
- Perform any additional instructions to complete the form.
- Review your entries.
- Click Purge.
The purging for Enterprized is different from the free plan. Follow the guide to do so.
You can do more customization of Cloudflare Page Rules
Different sites need a different type of setup because they have a different type of requests. All sites are different, and there are usually certain paths and requests you’d like to exclude from caching. Both plugins and themes sometimes require customization. Also, API requests are generally not something you’d like to cache.
Including and excluding the content is specific for every site and you have to do it according to that specific site. there are some extra settings like Edge cache TTL, Browser cache TTL, Origin cache TTL you have to take care of these for caching.
Edge Cache TTL:
Edge Cache TTL is used to tell the Cloudflare how long to keep the asset in the cache. We can say that this is an edge of time to keep the data in the cache. Let say we want to keep the cache for a month or more then we set that limit for the cache. Usually, it depends upon you I mean the user. How long you are using the same content and when you want to change it. Read more about this here.
Browser Cache TTL:
Browser cache is special. You can set these using page rules. Unless specifically set in a Page rule, Cloudflare does not override or insert Cache-Control headers if you set Browser Cache TTL to Respect Existing Headers. It cannot be cleared by clicking a button. The only way to bypass the browser cache is to force-reload a page (which will make the browser reload the page from the server) or let it expire. The upside of the browser cache is that it is the cache closest to the users – so it will make HTML load in just fractions of a second because it doesn’t require any network traffic.
If you want to know more about it and want to know how to set up click here.
Origin Cache Control:
These are used for CND. These Cache-Control headers are one way for web administrators to tell Cloudflare how to handle content from the origin. This is a very nice feature for advanced users, that know how to manipulate headers and instruct the Edge cache using headers.
Read more about Origin Cache Control here.
