CF GarageWhy Core Web Vitals suffer at the edge
Core Web Vitals measure what real users experience: LCP (when the main content appears), INP (how fast the page reacts to input) and CLS (how stable the layout is). A large part of the first metric is decided before your application runs, at the delivery layer where Cloudflare sits:
- Uncached hero assets: when your LCP image or main stylesheet is served with a short TTL or missed by the cache, every visitor pays a full origin round trip.
- No early resource hints: without Early Hints, the browser waits for your HTML before discovering the CSS and fonts it needs, burning hundreds of milliseconds.
- Suboptimal protocol and TLS setup: HTTP/1.1 connections and long TLS handshakes delay every request; HTTP/2 or HTTP/3 with connection reuse removes entire sequences of waiting.
- HTML revalidated every time: without a cache policy for cacheable pages, repeat visits re-download everything.
Improving the metrics step by step
Step 1: measure field data first. Open PageSpeed Insights and read the origin field values (Chrome User Experience Report), not only the lab score. Lab numbers on a clean profile flatter your site; your grade comes from real visitors, mostly on mobile.
Step 2: cache the heavy static assets properly. In Caching > Cache Rules, extend the browser and edge TTL of images, fonts, CSS and JavaScript. A rule matching the file extensions with a long edge TTL moves LCP immediately for returning visitors. Our guide on cache not working and low hit ratios covers the full diagnostic when the cache seems ignored.
Step 3: enable Early Hints. In Speed > Optimization, turn Early Hints on and declare your critical stylesheet and hero image in Link headers from your origin, so the browser starts fetching them while the HTML response is still being prepared.
Step 4: fix CLS sources. Give images and iframes explicit width and height attributes, reserve space for banners and consent notices, and avoid injecting late-loading bars at the top of the page. Most CLS damage is markup, and no edge rule will hide it.
Step 5: re-measure after a full 28-day field cycle. Core Web Vitals grades are rolling 28-day field assessments. A change today shows up progressively; plan validation accordingly instead of reloading the lab tool ten times.
Common mistakes that keep scores low
- Optimizing only the lab score. A throttled Lighthouse run in a clean profile hides the caching behavior real visitors get with their cookies and extensions. Field data is the judge.
- Caching personalized HTML. Caching pages that render user-specific content serves one visitor's session to another. Cache HTML only for truly anonymous pages, and bypass elsewhere.
- Chasing LCP with lazy loading. Lazy-loading your hero image postpones exactly the element LCP watches. Lazy-load below the fold, never the LCP element.
- Ignoring third-party scripts. INP is dominated by main-thread work; analytics, chat widgets and tag managers often cost more than the whole page. An edge config cannot compensate a heavy script.
- Testing only from a laptop on fiber. Median mobile devices on 4G decide your grade.
Frequently asked questions
Can Cloudflare alone fix a slow site?
It removes delivery bottlenecks: caching, protocol efficiency and early hints. If the page itself ships megabytes of JavaScript or waits seconds on a database query, edge tuning improves part of the score, and the application work remains yours. The honest sequence is edge first, application second.
Which Cloudflare features help Core Web Vitals on a Free plan?
Cache Rules, Early Hints, HTTP/2 and HTTP/3, 0-RTT connection resumption and Tiered Caching basics are available without a paid plan. Most sites see the bulk of the gain from correct caching of static assets alone.
Should I enable Cloudflare's image optimization features?
If images drive your LCP, resizing to actual display dimensions and serving modern formats are among the strongest levers. Check which features are included in your plan, then measure: resizing a 3000px hero to 1200px frequently saves more than every other optimization combined.
How long before an improvement shows in Search Console?
Core Web Vitals reports in Search Console refresh on the same rolling 28-day window. Expect the first visible movement one to two weeks after deployment, and the full effect after a complete cycle.