Tag: Delivery & Performance

Cache the right derivative without multiplying variants endlessly.

Define identity first

A cache key for transformed media needs the source version and every option that changes bytes: dimensions, crop, format, quality, and sometimes content negotiation. Normalize option order and defaults. Two equivalent requests should hit one cache entry; different outputs must never collide.

Bound the variant space

Arbitrary widths and quality values let a single asset produce thousands of expensive misses. Use named presets or round widths to a short approved list. Monitor unique variants per source and the ratio of cache hits to transformation requests.

Make invalidation explicit

Immutable versioned URLs are simpler than purging every edge when source bytes or recipes change. If mutable URLs are necessary, document purge timing and stale behavior. Test a replacement end to end on a plain URL after caches have been populated.

A concrete acceptance test

Warm a transform in the CDN, request equivalent options in a different order, then publish a new source version. Verify a shared hit for the equivalent URL and fresh bytes for the new version. Run this test with a realistic asset and record the observed state, output URL, and failure reason.

Implementation check

• Include every byte-changing option in the cache key.
• Limit allowed dimensions and quality values.
• Use source versions to avoid ambiguous purges.

Related guides

• A developer’s guide to media pipelines
• What to measure in a media pipeline

Primary reference: Official documentation.

Related field note

Continue with A migration plan for CDN cache keys.

Make the likely largest image easy to discover and quick to render.

Find the actual LCP element

First measure the page. The largest contentful paint element may be text on one viewport and an image on another. If the hero image is the LCP element, place its URL in discoverable HTML and avoid hiding it behind a late JavaScript fetch or CSS background when a normal image works.

Give it the right priority

Supply a properly sized responsive source, intrinsic dimensions, and an appropriate fetch priority where supported. Do not lazy-load an image that appears immediately in the viewport. Compressing the image helps only one part of LCP; render delay and late discovery can dominate.

Check under realistic conditions

Measure cold-cache mobile loading and inspect the network waterfall. Compare transfer size, request start, decode, and final render. A faster local Wi-Fi screenshot does not prove an improvement for a user on a slower connection.

A concrete acceptance test

Measure a cold mobile load and identify the actual LCP element. Change only the hero delivery rule, then compare request start time, transferred bytes, and render delay. Run this test with a realistic asset and record the observed state, output URL, and failure reason.

Implementation check

• Measure the real LCP element at each viewport.
• Make the hero URL discoverable in HTML.
• Compare request start and render delay after the change.

Related guides

• A developer’s guide to media pipelines
• Build a reliable queue for video transcoding

Primary reference: Official documentation.