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

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:

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.

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.