Facades for embeds: video, maps and chat without the slowdown

A video embedded from an external platform looks like a simple box with a play button. Behind that box, however, there is an iframe loading an entire application: HTML, stylesheets, hundreds of kilobytes of JavaScript, fonts, images and connections to several domains. All of this happens when the page loads, even though most visitors will never press play. The same goes for interactive maps, chat widgets, social media feeds and booking forms.

The facade technique solves the problem elegantly: instead of the real component you show a static preview that looks like it, and the component is loaded only when the user interacts.

How a facade works

The principle is simple:

1. you place a lightweight element on the page, usually an image and a button, with the same dimensions as the final component;
2. on click (or on hover, if you want to get ahead) a script replaces the preview with the real iframe or widget;
3. the component starts with the requested action already under way, for example the video playing automatically, so the user does not have to click twice.

The initial cost drops from hundreds of kilobytes and several connections to a single optimized image. Lighthouse recognizes this pattern and flags embeds for which known facades exist.

Video: a practical example

For a video, a preview image and a button are enough:

<div class="video" data-id="VIDEO_ID">
  <img src="/img/video-preview.webp" alt="Preview: installing the module"
       width="1280" height="720" loading="lazy">
  <button type="button" aria-label="Play the video">▶</button>
</div>

document.querySelectorAll('.video').forEach((box) => {
  box.querySelector('button').addEventListener('click', () => {
    const iframe = document.createElement('iframe');
    iframe.src = `${EMBED_URL}/${box.dataset.id}?autoplay=1`;
    iframe.allow = 'autoplay; fullscreen';
    iframe.title = 'Video: installing the module';
    iframe.width = 1280; iframe.height = 720;
    box.replaceChildren(iframe);
  }, { once: true });
});

A few details matter:

• host the preview image on your own site and optimize it, rather than requesting it from the vendor at load time;
• width and height, or aspect-ratio in CSS, prevent layout shifts when the iframe replaces the image;
• the button must be a real button, reachable by keyboard and with a clear label;
• there are ready-made, well-tested components, such as lite-youtube-embed for YouTube videos, that already implement this pattern.

Maps

An interactive map is among the heaviest embeds. Often, though, the user just needs to see where a place is. The alternatives, from lightest to heaviest:

• a static image of the map with an "Open in maps" link to the external application;
• a static image loaded on demand: on click it is replaced by the interactive map;
• an interactive map with loading="lazy" on the iframe, if it sits at the bottom of the page and must be interactive straight away.

For the contact page of a local business, a static image with a text address and a link is almost always enough, and it is also more accessible.

Chat widgets

Support widgets are a typical case: they load a lot of code, open persistent connections and sometimes show an animation that shifts the layout. A facade here is a simple fixed button with the chat icon:

• on click, load the vendor's script and open the window;
• meanwhile the button shows a loading state, so the user understands something is happening;
• if the vendor offers an API to open the chat programmatically, call it right after loading.

The savings are most visible on mobile devices, where executing JavaScript costs more.

The waiting trade-off

A facade moves the cost from page load to the moment of interaction: whoever presses play waits a little longer than with an iframe that is already loaded. Two techniques reduce that wait:

1. preconnect on hover: when the pointer approaches the button, dynamically add preconnect hints to the vendor's domains;
2. start on pointerdown instead of click, which gains a few tens of milliseconds.

Privacy as a side effect

There is a further advantage: until the user interacts, the browser does not contact the vendor's servers. No third-party cookies, no request revealing the visit. For many sites this also simplifies consent management, because loading happens only after an explicit action.

In short

• Video, map and chat embeds load whole applications even if nobody uses them.
• A facade shows a light preview and loads the component only on interaction.
• Reserve space with dimensions or aspect-ratio and use real, accessible buttons.
• Cut the wait with preconnect on hover and starting on pointerdown.
• Loading on demand also improves users' privacy.