The Composer's First Unresolved Chord: On the Lingering Tension of a Perfectly Played, Yet Unresolved, Note

A composer knows that a note left hanging is not a mistake, but a promise. A dominant seventh chord, held just a moment too long, creates an exquisite tension in the listener. It’s a deliberate suspension, a question posed to the air, an anticipation that something must follow to feel complete. This principle of tension and resolution is the very engine of musical narrative, and it holds a profound, if unexpected, lesson for the way we build for the web.

In our world, the equivalent of that unresolved chord is Cumulative Layout Shift (CLS). It is the visual tension of a page that refuses to settle, the jarring promise of content that is broken by its own arrival. A hero image loads and shoves a headline downward; an advertisement injects itself and pushes a ‘submit’ button out from under a user’s cursor; a web font finally swaps in and reflows a paragraph mid-read. These are not mere performance metrics; they are user experience discords. They are the sour notes in a composition meant to feel fluid and intentional.

The composer’s craft teaches us that resolution is not an afterthought—it is the point. You do not write a dramatic chord and then forget to resolve it. Similarly, we cannot simply dump content into the viewport and hope the browser figures it out. We must compose our layouts with the same intentionality. This means defining dimensions for images and embeds, reserving space for dynamic content, and leveraging modern CSS to create a stable grid before a single asset is fetched. It is the front-end equivalent of writing the resolution alongside the tension.

This approach transforms our relationship with the loading sequence. Instead of a chaotic cacophony of elements fighting for space, the page load becomes a deliberate reveal. Text appears in its final form, styled by a system font until the chosen typeface is ready to perform its swap without a reflow. Images occupy their rightful place from the start, perhaps first as a muted, low-quality placeholder that sharpens into focus. The user is presented with a stable, if not yet fully realized, composition from the very first moment. The tension of loading is resolved into the harmony of a stable experience.

Mastery in any craft, from music to masonry to our own, lies in understanding the invisible forces at play. The composer hears the silent expectation that follows a struck chord. We must learn to see the invisible reflow that follows an un-sized image. By borrowing this ear for resolution, we can build pages that don’t just load quickly, but that feel complete and trustworthy from their very first, quiet note.

Notes & further reading

A few pages I came back to while writing this: