The Stained Glass Cartoon: On the Painted Promise of a Critical Image

High in the cathedral’s apse, before a single piece of coloured glass was cut or a strip of lead shaped, the master glazier would create a full-scale drawing. This ‘cartoon’ was the blueprint, a detailed charcoal and paint rendering on a vast whitewashed table. Every saint’s expression, every fold of their robe, every sliver of light was meticulously planned here, on this flat, temporary surface. The final, luminous vision was first made manifest in this rough, preparatory sketch. It was a promise, pinned down in pigment, of the glory to come.

On the web, our Largest Contentful Paint (LCP) element is our stained glass window. It’s the main event, the hero image or block of text that tells the user the page has arrived. But the experience of that arrival depends heavily on what we paint on our own ‘cartoon’—the initial, unstyled viewport before our resources have loaded. This is the ‘critical’ view, and how we handle its composition is a subtle craft in itself. Do we leave it as a blank, whitewashed wall, or do we sketch in the outlines of what is to come?

Leaving it blank is like presenting the cathedral with empty stone frames. The user stares into a void, a white screen that offers no hint of the structure being assembled. Their patience is tested not by slowness, but by ambiguity. Has the page broken? Is anything happening? The wait feels longer because there is no narrative, no indication of progress. It’s a passive, anxious state for the visitor.

Conversely, a thoughtfully prepared cartoon provides context. It’s the art of the placeholder. Using modern CSS, we can reserve the precise space the LCP image will occupy. We can sketch its dimensions, its aspect ratio, perhaps a subtle, low-quality blur of the final image or a dominant colour swatch. The text, even if the custom font file hasn’t loaded, can be rendered in a fallback typeface with the same size and weight to prevent a jarring layout shift. This preparatory work doesn’t make the resources load any faster, but it fundamentally changes the user’s perception of time. They are no longer waiting for something unknown; they are watching a promised image develop. The bones of the page are already there, stable and reassuring.

The master glazier knew the cartoon was ephemeral. It would be scraped away and replaced once the window was complete. Its value was purely in its utility as a guide and a promise. In our work, the critical view is just as transient, flashing on screen for perhaps a second or two. Yet, the impression it leaves is lasting. A well-considered placeholder demonstrates a respect for the user’s attention. It says, ‘I know you are waiting, and here is what you can expect.’ It turns a period of potential frustration into one of anticipation, where the final rendering of the LCP element feels less like a technical delivery and more like the final, brilliant application of colour to a carefully prepared canvas. It is the quiet dignity of a page that knows how to wait gracefully.

Notes & further reading

A few pages I came back to while writing this: