Lazy Loading Rich Media by Removing It Until Intent

Lazy loading of rich media can still occur even when configured to preload metadata rather than the complete file. This can lead to the browser receiving a live media source as soon as a component renders, pushing important content below the fold. To avoid this, it is recommended to choose a boundary controlled by the component itself, only creating the expensive media element when the reader expresses intent.

When a user interacts with the media component, an idle state should render an accessible poster button instead of the actual video player. After an explicit click, the teaser should be replaced with the real player, allowing loading to begin. This approach ensures that the DOM truthfully reflects the component's state: no player before interaction and a real player after interaction.

Implementing this model can be simplified using Blazor, a .NET web framework. A small Blazor component can express this boundary directly by checking if media is present and whether playback is currently in progress. If media is present and playback is not active, a button with a play video label is displayed, along with an image representing the poster. The source for the video is also provided for when playback begins.

It is important to generalize this Blazor component for production use, adding format alternatives, error handling, focus management, analytics, and a custom player if needed. The key property remains that the source is absent from the idle branch, allowing the poster to be treated as presentation inside a labelled button or given meaningful alternative text if it conveys information.

When no source is configured for the content, the component should render no player and no dead teaser. This empty state is preferable to a control that cannot succeed. Testing the boundary that readers experience can be done using rendered-component tests. These tests verify the rendered component without delving into private fields. For the initial render, there should be no video element and a poster button present. Triggering the button should result in the teaser disappearing and a video source appearing.

Document order should be preserved, and a structural test can confirm that the heading, media card, and guide body remain in the intended sequence. While performance claims are not established in this example, the written guide will regain visual priority, people who never choose playback will avoid eager video work, and the load boundary becomes easy to inspect.

Whether the trade-off is worth it depends on the specific page, with video-first experiences potentially prioritizing immediate player availability and text-first guides benefiting from the gate.