13 · Static assets and frontend loading optimization

Optimize build output, compression, Early Hints, images, and browser waterfalls instead of attributing every performance problem to cache.

CDN · PHASE 5INTERMEDIATEAbout 30 minutesCompression · Early Hints · Images

Outcome

JS, CSS, and fonts use content hashes and correct cache headers; compressible text follows client capabilities; the LCP image has a suitable size and format; and only genuinely critical resources enter preload or Early Hints. The browser waterfall explains where each gain came from.

Optimization order matters more than the number of toggles

Layer	Fix first	What Cloudflare can add
Build	Remove unused dependencies, split code, content-hash files	A long CDN TTL cannot shrink an oversized bundle
HTML discovery	Prioritize critical CSS, fonts, and LCP image	Early Hints sends preload/preconnect in a `103`
Transfer	Compress text and reuse connections	Gzip/Brotli/Zstandard plus HTTP/2/3
Images	Correct dimensions, `srcset`/`sizes`, modern formats	Polish or Images transformations
Runtime	Reduce main-thread blocking and third-party scripts	Network optimization cannot fix expensive JavaScript execution

Establish releasable asset structure

/assets/app.9f1a.js       New URL when content changes; long cache
/assets/site.6b2c.css     New URL when content changes; long cache
/images/hero-1280.avif    Generated for its real display size
/                        Mutable HTML; conservative Browser TTL

Fingerprinted files fit public, max-age=31536000, immutable. HTML still needs a short Browser TTL and targeted invalidation on release. Do not cache a multi-megabyte, unsplit JavaScript bundle forever and call the frontend optimized.

Verify content compression

Cloudflare can currently deliver Gzip, Brotli, or Zstandard to visitors. The result depends on client Accept-Encoding, the zone plan's default, and matching Compression Rules. Never infer the algorithm from a dashboard toggle alone.

curl -sS -D - -o /dev/null \
  -H 'Accept-Encoding: zstd, br, gzip' \
  https://www.example.com/assets/app.9f1a.js

Inspect Content-Encoding, Content-Type, Vary, and transferred bytes. Compare requests with and without compression. Very small responses, unsupported content types, and status codes outside the supported set may remain uncompressed.

no-transform is an integrity control, not a free optimization

Origin Cache-Control: no-transform prevents Cloudflare from changing compression and can preserve origin Content-Length, but it also blocks optimizations that need to modify response bytes. Use it only for signatures, Range semantics, strict byte identity, or an actual length requirement.

Use Early Hints selectively

While the origin prepares a main response, Early Hints can send a 103 with Link so an HTTP/2 or HTTP/3 browser starts preload/preconnect work. It is currently available on every plan, but the page must provide useful Link headers.

Link: </assets/site.6b2c.css>; rel=preload; as=style
Link: </images/hero-1280.avif>; rel=preload; as=image

Select two or three critical resources from the waterfall

Choose only render-blocking CSS, a stable font, or the actual LCP image. Preloading every image and chunk competes for bandwidth and can make the page worse.

Emit correct Link headers at the origin

Make URL, as, cross-origin attributes, and the final response agree. Verify the Link on a normal 200 first, then enable Early Hints under Speed → Settings → Content Optimization.

Inspect 103 and the final page

Use a compatible browser or WebPageTest to inspect Early Hints and resource start time. Cloudflare generates hints only for qualifying HTML URIs and 200/301/302 responses. If the main headers arrive first, there may be no reason to send a 103.

Audit authenticated pages

The Early Hints cache key ignores query strings, and a cached Link can be emitted before a final 403. Never reveal private filenames, one-time downloads, or user resources in the Link. Disable the optimization on authentication paths when uncertain.

Choose one image-optimization path

Path	Good fit	Plan and cost boundary
Build-time AVIF/WebP + `srcset`	Static sites with known image sets	Most controllable; no runtime-variant fee
Polish	Optimize origin images without changing URLs	Currently Pro / Business / Enterprise
Cloudflare Images transformations	URL-driven crop, resize, and `format=auto`	Free currently includes 5,000 unique transformations/month; new variants return 9422 beyond it; paid usage is metered

Do not stack lossy CMS compression, Polish Lossy, and Images transformations on the same image. Do not lazy-load the LCP image. Other images can lazy-load, and every image needs dimensions or a stable aspect ratio to prevent CLS.

Before-and-after checklist

Fix URL, region, device, and network conditions; take at least three cold and warm samples.
Save transfer size, start time, protocol, and cache status for HTML, JS, CSS, fonts, and the LCP image.
Inspect LCP, INP, and CLS instead of only a Lighthouse score.
Enable one Compression Rule, Early Hints change, or image path at a time.
Roll back the changed item if benefit is absent or errors rise; do not simultaneously disable HTTP/3, cache, and TLS.

AI workbenchHuman reviewed

Ask AI to prioritize a waterfall

I will provide the page HAR/waterfall, build artifact sizes, hash policy, LCP element, Content-Encoding, Cache-Control, Early Hints Link headers, image dimensions/formats, LCP/INP/CLS, and Cloudflare plan. Rank bottlenecks across build, discovery, transfer, images, and runtime. Propose one-change experiments with expected metrics and rollback. Do not preload every resource, recommend repeated lossy image compression, or infer Brotli/Zstandard from a toggle rather than headers.

If the slow path is primarily uncacheable, continue with dynamic content and Argo Smart Routing.