How do I cache static HTML?

  1. Log into your Cloudflare account.
  2. From the dropdown menu on the top left, select your domain.
  3.  Click the Page Rules app in the top menu.
  4. The first step is creating a pattern and then applying 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 be 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]

    You'll want to design the pattern to only describe pages you know are static.
  5. Click Cache everything in the Custom caching dropdown menu.
  6. Click Add rule

If you see the HTML is not being cached, despite the cache everything rule, it means you need to override the origin cache directive with an "Edge Cache TTL" setting.

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, then Cloudflare will not cache the resource, unless a Page Rule is set to cache everything and an Edge Cache TTL is set.

When using Bypass Cache on Cookie 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.

Screen_Shot_2017-03-09_at_16.54.36.png

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".

 

Still not finding what you need?

The CloudFlare team is here to help. 95% of questions can be answered using the search tool, but if you can’t find what you need, submit a support request.

Powered by Zendesk