The best CloudFlare configuration for passing the Core Web Vitals

Optimizing Core Web Vitals with Cloudflare: What to Enable and What to Avoid

I Cloudflare offers a wide range of settings that can impact Core Web Vitals, both positively and negatively. While some settings improve performance, others introduce delays or interfere with page rendering. Let’s break down the most common Cloudflare options and under what conditions you should enable them!

Common CloudFlare Setup Questions: I often review CloudFlare setups for clients. While I could write books about setting up a CDN like CloudFlare most questions revolve around a simple 'should I enable this setting?'. This article answers those questions with the appropriate considerations for the most common CloudFlare settings related to the Core Web Vitals.

Free vs. Pro: Is an Upgrade Worth It?

Speed > Optimization

Polish 

Polish optimizes images hosted on your CloudFlare domain by compressing them and stripping the images of their meta data and optionally converting  them to WebP images. 

Smaller image sizes usually will improve the Largest Contenful Paint by improving the image resource load duration. However, since LCP is influenced by multiple factors other then the resource load duration of images, don't expect drastic improvements.!

Recommendation: Enable and choose 'Lossy Webp' for best results.

Mirage

Mirage optimizes images based on network conditions. While this idea is noble the implementation is 'slow by design'. In order to optimize the images for all network conditions the images on the page need to be blocked until the network connection speed has been measured.  This blocking of images can Layout Shifts and ironically a lower Largest Contentful Paint score.

Recommendation: Avoid enabling under any circumstance!

Speed Brain

Speed brain uses the Speculation Rules API to speed up the Time to First Byte by prefetching future navigations. While Speculation rules are extremely effective in improving all the Core Web Vitals including the Largest Contenful Paint I do not recommend enabling this CloudFlare feature because 'self-configuring' the speculation rules is super easy and far more effective then CloudFlare's 'one size fit's all solution', even with their RUM integration! 

Recommendation: Disable and configure speculation rules manually

CloudFlare Fonts

CloudFlare fonts automates font self-hosting. This is a great idea because self hosting important resources eliminates, new external connections which are by default slower then re-using the already open connection to your CloudFlare proxied site.

It is more effective to take 15 minutes and manually configure self-hosting font files. Unfortunately plenty of CMS systems that do not allow this. In that case enabling CloudFlare fonts is a perfectly valid option.

Recommendation: Disable by default; enable only if manual self-hosting is not an option.

Early Hints

Early hints speed up critical resource delivery (like styles, fonts or images) by hinting at them before the actual html content is send to the browser. To send a resource hint through CloudFlare, CloudFlare will ready your response header and extract resource hints from there. If you are comfortable sending resource hints in html response headers I highly suggest enabling this feature. However be aware that there resource hints might be much more hidden to you dev team then resource hints in the head of the page and sending the wrong resource hints will slow down your page. So be careful!

Advise: enable provided you are sending resource hint headers

Rocket Loader™

Rocket loader 'defers' all JavaScripts on a webpage by withholding them temporarily and then injecting them into the page again a few moments later.  This is a nasty (or neat, depending on your view) trick that needs lots of checks and hacks to ensure it will work properly on all  browsers. Also this trick hides the scripts form the preload scanner (a mechanism to quickly load important resources).

For the above reasons, obviously, I am not a fan of mindlessly enabling Rocket loader. In my book Scripts need to be scheduled in accordance to their priority/importance. Critical scripts need to download en execute early while nice-to-have scripts can be delayed until the borwser is idle.

CloudFlare's Rocket Loader does nothing like that. It withholds the scripts and at a certain point in time and injects them. This prioritized other resources like the LCP element, fonts and styles over scrripts. Sometimes this works really well. Especially when you CMS does not allow for fine-grained Script timing.

Advise:  Disable and schedule scripts manually. Enable if no other options are available to defer and or schedule scripts

Automatic Platform Optimization for WordPress

CloudFlare's APO cached entire pages on the CloudFlare edge servers. This is called full page edge caching and if implemented right it will improve the Time to Fist Byte (and subsequently the LCP and FCP) for a certain type of visitor! 

There are a few side node to make. Full Page edge caching will probably need to be bypassed for you most valuable visitors that actually buy your products because once items are in a shopping cart of the user is logged in APO will get bypassed (because the page is probably personalized with the users name or cart information and cannot be send from generic cache anymore).

Advise: enable or better yet: configure your own full page edge caching rules

HTTP/2 and HTTP/2 to Origin

Enabling HTTP/2 and HTTP/2 to Origin is a no-brainer.  Http/2 is a huge improvement over the older HTTP/1.1 protocol and get's rid of the old staircase effect by allowing mutliple files to be send over the same connection in parallel. 

Advise: enable

Enhanced HTTP/2 Prioritization

HTTP/3 (with QUIC)

HTTP/3 with QUIC is even faster then HTTP/2  because of improvements in connection setup and latency. Basically HTTP/3 allows multiple streams to be send independently even if one is delayed. QUIC combines transport and encryption handshakes which reduced connection time. This results in up top 10% faster TTFB times!

Advise: enable

0-RTT Connection Resumption

0-RTT Connection Resumption speeds up secure connections by skipping the initial handshake when a user revisits a site. It uses previously stored encryption keys, allowing data to be sent immediately, reducing latency and improving page load times. 

Advise: enable

Automatic Signed Exchanges (SXGs)

Signed exchanges (SXG) allow Google Search to prefetch your content while preserving the user's privacy. At the moment this setting does not see to do too much with speculation rules being eneabled for search results.

Advise: do not bother

Scrape Shield

Scrape Shield protects the content on your website. While this might seem like a good idea I am fervently agains enabling any Scrape sheeld options. Scrape sheeld works by injecting JavaScripts into your page to decode the previously oibfuscated content. This trade-off in speed versus hiding contente makes no sense to me. Real spammers are not fooled while real users get extra scripts that slow down the page.

Advise: disable Email Address Obfuscation and disable Hotlink Protection

Caching > Configuration

Purge Cache

Purging the cache will invalidate all files cached by CloudFlare including stylesheets, JavaScript, images and even full page caches. And while purge cache is technically not a setting I must warn about clearing the cache. Clearing the cache will make your site slower until the cache has been rebuilt!

Caching Level

Cache level determines how CloudFlare handles query strings (I know: 'whats in a name!'). You will want to take a good look at this setting. 

The 'fastest' option is 'ignore query string'. This served the same resource regardless of the query string. This is only a sage option if you are 100% that query strings are not used on your site. In that case, query strings added by others are ignored.

'Standard' serves a different cached file for every different query string. This is the default setting for CloudFlare but in combination with full page edge caching and tracking paramaters like utm parameters this setting can cause cache mismatch and a lower cache hit ratio!

Browser Cache TTL

The browser cache TTL tells the browser how lang it can cache static resources. Cached resources can be served directly from the browser and are much faster then remote network resources. That means a short browser cache TTL would invalidate the browser cache frequently, lowering the cache-hit-ratio. So, unless your static files change frequently, set this setting to max. 

Advise: set to 1 year if possible

Development Mode

Development mode will bypass all ClouidFlare caching while enabled. Please do not enable development mode. Instead set up a development domain where you can develop

Advise: do not enable!

Caching > Tiered Cache

Tiered cache reduced the number of requests to your orogin server and increases the cache hit ratio by instructing CloudFlare to look for uncached files t it's own servers first. 

Advise: enable smart cache topology