Instant placeholders by (mis)using the sizes attribute

A demonstration storefront illustrating a placeholder image-loading technique. On the grid page products are either labelled standard or technique. When clicking through to either, pay attention to how the first large image appears.

Image responses are artificially delayed (roughly 1 to 2 seconds, varying per image and size, the way a slow connection actually behaves), and each session uses fresh image URLs, so every session starts from a cold cache (no need to purge your browser's cache during testing). At the bottom of the page is a small floating readout that shows LCP stats.

Start the demo →

/lab is the bare, undelayed version for lab tools.