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
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.
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.
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 wordpress comments.
Your pages include some login scheme.
Page output differs through requests.
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
- 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.
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.
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.
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
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.
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.
- 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.