Best Practices: Speed up your Site with Custom Caching via Cloudflare Page Rules

Boost site performance by fine-tuning your caching configuration through Cloudflare Page Rules.

• Overview
• Before getting started
• Best Practice 1: Cache static, anonymous HTML (all domains)
• Best Practice 2 - Cache HTML selectively (Business and Enterprise domains)

---

Overview

Edge caching is a fundamental feature of the Cloudflare Content Delivery Network (CDN). As such, our edge network automatically caches a lot of content around the world. When visitors request a cached resource, it is served from the data center closest to them and therefore, the content loads faster.

You can speed up your site’s performance even further thanks to the multiple caching settings available in Cloudflare Page Rules. Beyond the automatic caching Cloudflare offers by default, these additional best practices help you achieve even greater performance.

---

Before getting started

Cloudflare does not cache HTML resources automatically. This prevents us from unintentionally caching pages that often contain dynamic elements. For example, the content on certain HTML pages may change based on specific visitor characteristics, such as authentication, personalization, and shopping cart information.

However, you can configure HTML caching through specific Cloudflare Page Rules settings. The degree of HTML caching flexibility varies based on your domain plan as described in the best practice sections below.

When configuring caching settings in the Page Rules app, you’re essentially manipulating certain options of the Caching app. The difference lies in that through Page Rules, you apply the caching settings at the URL level (not the entire site), after matching a specific pattern defined in a custom page rule. That way, you have fine-grained control over which specific resources to cache.

For background information on Cloudflare’s caching tools and options, consult:

• Which file extensions does Cloudflare cache for static content?
• Getting started with Cloudflare caching
• Understanding and Configuring Cloudflare Page Rules
• What are Cloudflare's caching levels?
• How can I tell if Cloudflare is caching my site or a specific file?

---

Best Practice 1: Cache static, anonymous HTML (all domains)

All domain plans can use the Cache Everything setting in the Page Rules app.

However, this option caches all HTML regardless of the presence of dynamic content. If you use this approach to cache pages that contain dynamic content, it is quite likely that visitors will see information that is not intended for them.

To add a Cache Everything page rule:

1. Within an application, go to Rules > Page Rules.
2. Click either Create Page Rule, or the wrench icon next to an existing page rule.
3. Fill in the appropriate URL pattern.
4. Click Add a Setting, then select the Cache Level setting name.
5. Select the Cache Everything setting value.
6. Save and deploy the rule.

In conclusion, this recommendation is only appropriate for HTML pages that are static and anonymous. To learn more, see How do I use Cache Everything with Cloudflare?

---

Best Practice 2 - Cache HTML selectively (Business and Enterprise domains)

Customers with Business and Enterprise domains have additional Page Rules settings that can be combined to selectively cache HTML content based on whether the page contains dynamic information.

Below, we provide links to articles with specific instructions on implementing this recommendation. However, we can summarize the process as follows:

1. Create a new page rule for the desired URL pattern.

2. Add the following three settings:

• Cache Everything - to act as catch all for static, anonymous content
• Bypass Cache on Cookie (available to Business and Enterprise domains only) - to bypass caching everything if the request has a matching cookie
• Edge Cache TTL - to specify how long Cloudflare should keep the cached resource in our edge network before asking the origin for it again

3. Save and deploy your new rule

As an alternative to Edge Cache TTL (third bullet point in item 2 above), you could use the* Origin Cache Control* setting if you believe the cache-control headers set in your origin server are appropriate. Learn more about Origin Cache Control.

To learn more about the technique described, consult:

• Caching Anonymous Page Views
• Caching Anonymous Page Views with WordPress or WooCommerce
• Caching Anonymous Page Views with Magento 1 and Magento 2
• How do I cache static HTML?

Note that the Cloudflare Caching app allows you to purge the cache so that new requests are sent to the origin for re-fetching. To learn more, see How do I purge my cache?