Caching Static HTML

Learn how to cache static HTML using Cloudflare Page Rules.


To cache static HTML,

1. Log in to your Cloudflare account.

2. Choose the appropriate domain.

3. Click Page Rules.

4. Create a pattern and then apply a rule to that pattern. You'll need to find or create a way to differentiate static versus dynamic content by the URL. Some possibilities could include

  • creating a directory for static content,
  • appending a unique file extension to static pages, or
  • adding a query parameter to mark content as static.

Here are three examples of patterns you could create for each of those options:

*example.com/static/*
[/static/ subdirectory for static HTML pages]

*example.com/*.shtml
[.shtml file extension to signify HTML that is static]

*example.com/*?*static=true*
[adding static=true query parameter]


5. Next, design a pattern to describe pages you know are static, by choosing Cache everything in the Custom caching dropdown menu.

6. Click Add rule.


Troubleshooting the Page Rules cache settings

If you notice that the HTML is not being cached, despite the cache everything rule, you must override the origin cache directive with an Edge Cache TTL setting.

The Cache Everything setting must be enabled even if your origin server is sending the correct cache TTL headers because Cloudflare doesn't cache HTML by default.

If the Cache-Control header is set to private, no-store, no-cache, or max-age=0, or if there is a cookie in the response, Cloudflare will not cache the resource unless a Page Rule is set to Cache Everything with an Edge Cache TTL setting.


Bypass Cache on Cookie (Business and Enterprise plans)

When using Bypass Cache on Cookie (a Business and Enterprise plan feature) in conjunction with "Cache Everything" it is possible to bypass the cache when a certain cookie is set. Additionally, the Edge Cache TTL allows you to specify the max time Cloudflare should cache a given resource for.

In the Bypass Cache on Cookie option, you are able to use a .* (dot-star) operator for wildcards and a | (pipe) operator for OR statements.

Additional Page Rule options such as "Cache on Cookie", "Cache By Device Type" and Custom Cache Keys are available to our Enterprise customers.

By default, Cloudflare overrides the Cache-Control headers on cached content. However, you can set Cloudflare to "Respect Existing Headers" on cached content. When this setting is used, Cloudflare will not override Cache-Control headers from your origin.

Users on all plans can access this feature in the Caching tab in the dashboard by scrolling down to Browser Cache Expiration.

browser_cache_expiration_respect_existing_headers.png

Not finding what you need?

95% of questions can be answered using the search tool. This is the quickest way to get a response.

Powered by Zendesk