Cache and CDN: the real hit rate, measured

Of 60 requests to the site, 40 were served from the edge cache, 66.7%: all 40 static assets hit, all 20 HTML requests came back DYNAMIC. Median TTFB goes from 26-34 ms for assets to 256-276 ms for HTML.

What the edge answers

The gap between 30 and 276 ms is the cost of the origin: HTML is generated on every request, assets come from the edge. That is not a CDN defect, it is a decision: HTML changes often and has no stable cache key.

Measuring it from a terminal

for u in / /blog/core-web-vitals-ttfb /css/components-ui.css \
         /fonts/inter-400-latin.woff2; do
  printf '%s ' "$u"
  curl -sI "https://ui.eneawork.it$u" |
    grep -i -E '^(cf-cache-status|age|cache-control):' | tr '\n' ' '
  echo
done

The command prints cache status, object age and cache policy for each URL. Age says how many seconds the edge has held that copy: 83,580 s for the CSS, almost a day.

The query string is part of the key

With a new URL (?probe=...) the first answer is MISS and the second is HIT: the parameter is part of the key. A campaign identifier that differs per user empties the cache on every visit, and so does an ordering parameter in internal links.

What to change

• Assets with a hash in the name: a one-year cache and immutable, like the font answering with max-age=31536000. Source: web.dev, CC BY 4.0.
• HTML: when you cannot cache it, cut the origin TTFB. In the local test the home page answers in 205 ms. Source: web.dev, CC BY 4.0.
• Query strings: normalise the parameters that do not change the content, otherwise every variant is a new object. Source: MDN, CC BY-SA 2.5.
• stale-while-revalidate=604800 serves the old copy at once and refreshes it afterwards: the site CSS already uses it.

The limitation to name

The measurement comes from one client and one point of presence (Milan, from the CF-RAY), with ten requests per URL. Real hit rate depends on traffic, geography and TTLs: a site with many HTML pages and few assets shows a much lower figure, because the 66.7% here mixes two different populations.

Where to continue

The EneUI catalogue indexes 111,985 components, for instance card-stack, and the grid of 1,556 blocks: every record is an HTML page that never reaches the edge cache. Read how to measure TTFB, caching with a service worker and how to set a performance budget.