Cloudflare Edge Page Caching

Cloudflare does not cache web pages by default, but by applying a page-rule, you can also serve pages at blazing speeds from the Cloudflare CDN.

Web Page Performance Bottleneck

Have you ever visited a web page, and noticed it may take several seconds until it starts loading? This is normally related to the processing time required by the server to create- and output the requested page. Before any other process can initiate from the visitors browser, the page document must be served. If the server is slow to serve this critical document, the entire website loading process will be blocked. Once the page document is partially- or fully loaded, the visitors browser can start loading necessary javascripts, css, images, and ultimately render the page.

Why is this process sometimes slow?

A page-request to server often involves processing- and creating the page before it can be served to the visitor. This process can be excessively slow, especially on shared-webhosting environments. The server that creates the page will often have to make database requests, compile templates and process backend scripts (php, asp etc) before serving the page.

Blazing-fast CDN-based page caching

CDN services are normally reserved for static assets (images, js, css etc.), but what if we could also serve pages from a CDN service like Cloudflare? Great idea! Not only is the Cloudflare CDN network extremely fast, but it will serve page documents as static assets, meaning there is no processing required to output the page. If your website is of a static nature, without frequent updates and dynamic modules, you can add blazing fast page-caching. This is achieved by caching page outputs from your server on the Cloudflare CDN Network.

What is Cloudflare?

Cloudflare is essentially a service that adds a layer of security, optimizes website performance, and adds a CDN for static assets. Cloudflare does not by default speed up delivery of the actual page documents, as this is always requested from the origin-server. Why? If Cloudflare was to cache pages on it's edge-servers by default, it could conflict with page updates or any dynamic content displaying in your pages.

Demonstration

To demonstrate the capabilities of Cloudflare page-caching, I would like to showcase results from a website of ours: demo.imagevuex.com. The below screenshot is taken from a pingdom test. Once the page gets cached on the appropriate edge-server location, it can load as fast as 0.1 seconds.

In the above screenshot, notice the response headers content-encoding: gzip, cf-cache-status: HIT and server: cloudflare-nginx, which basically confirm that the page document is cached and served compressed (gzip) to the visitor from a Cloudflare edge-server.

NB! In the demonstration, it is important to note that emphasis is on the initial page document loading speed. You can see in the waterfall tab that initial page document loads in approximately 0.1 seconds. Additional javascript-, css- and images should also load as fast as possible, but that process is not specific to this tutorial.

Benefits

 Page-documents are cached- and served swiftly from Cloudflare's CDN Network.
 Pages are often served from an edge server in close geographical proximity to the visitor.
 Bypass slow page-processing on origin server.
 Entirely negate the effects of slow shared servers.
 Visitors may experience initial page-load as near-instant.
 It is common knowledge that fast-loading pages will benefit SEO.
 Protect your origin-server from heavy tasks.
 Extremely fast-loading pages!
 Cloudflare is free for basic usage.
  You will need to empty Cloudflare cache when updating the website.

Who is it for?

CDN-based page-caching is only appropriate for websites where page output is persistent across all requests. If your pages display dynamic content, or use some login-scheme, expected behavior may break. Remember, CDN-based page-caching basically stores a snapshot of a requested page, which will be served to all visitors.

 You have a website with static pages.
 You don't update too frequently.
 You are using Disqus comments (Javascript :)
  You are using wordpress comments.
  Your pages include some login scheme.
  Page output differs through requests.

Instructions

I will not go into detail about how to setup Cloudflare for your website, as there are already articles available for that. If you have already setup Cloudflare for your website, you can proceed with the following instructions. Basically, you will need to create a page-rule that tells Cloudflare to cache everything, including pages.

  • Login to your Cloudflare Panel.
  • Navigate to Page Rules.
  • Under Add new rule, add your website domain *domain.com*.
  • Under Custom caching, set Cache everything.
  • Under Edge cache expire TTL, set 1 month.
  • Under Browser cache expire TTL, set 30 minutes.
  • Click Add rule at bottom, to save the rule

NB! The asterisk-characters are wildcards, and make sure the rule applies for all requests.

Testing

To make sure Cloudflare is now caching your pages, you should check the response headers of a page. Below are three different ways of checking your page response headers. NB! Cloudflare requires two requests before it caches a request on a specific edge-server, because first request will need to load the page from origin-server.

1. Browser Developer Tools › Network
You can use your browser developer tools.

2. Pingdom
Go to pingdom tools, enter your web url, and click "test now". After the test is complete, click the dropdown arrow for the initial page document in the waterfall tab to review response headers.

3. Curl
Run a -curl -I command from Terminal (mac) or command line (win). The following command will return the response headers from any page.

curl -I https://demo.imagevuex.com

Response Headers
With all three testing methods, you should be looking for Cloudflare-related response headers:


Server: cloudflare-nginx
CF-RAY: 249e2fda999e306c-SIN
CF-Cache-Status: HIT

server: cloudflare-nginx basically confirms that the page is served from Cloudflare. CF-RAY: 249e2fda999e306c-SIN returns an ID representing the Cloudflare edge server where the file is served from. CF-Cache-Status: HIT, will return "hit" or "miss", depending on the cache status for the file on the specific Cloudflare edge server.

Cache Maintenance

It is important to understand that your pages are now cached on the Cloudflare CDN. If you are updating pages on your website, you will need to clear the Cloudflare cache, so that Cloudflare requests fresh pages from the origin-server. Although it is possible to purge individual pages, it is often easier to simply purge the entire cache:

Cloudflare › Caching › Purge Cache › Purge Everything.

Notes

  • As noted earlier, a page is only cached on a Cloudflare edge location once it is requested twice. First request will pull the page from the origin-server.
  • If you have an admin-panel (or similar) under your domain, it will likely break from the page-caching mechanism. To avoid this, you can create an additional page-rule in Cloudflare, disabling page-caching for your specific admin section. This could also be used to disable page-caching for other specific pages or subsections of your website.
  • At time to time, Cloudflare may automatically flush page-cache from an edge-server, depending on the rate of requests your page gets from the specific location. It is not guaranteed that your pages remain cached on all edge servers persistently, but they will likely remain cached on locations where your pages get frequent requests.