Technote

Performance optimization Practical

Series Images that do not slow the site down Part 7 of 8

The hidden cost of an embedded video

The player loads whether or not anyone presses play. A poster-first approach charges that cost only to the people who actually click.

Putting a video on a page is a natural design decision. The difficulty is that a single embed brings along a great deal that never appears on screen. A substantial amount is already loaded before anyone touches the play button.

What loads before anyone presses play

An embed typically drops an entire third-party player interface into your page. That player fetches script and styles to draw itself and prepares suggestions, captions and playback settings. Connections to external domains open along with it.

Relative initial load for the same slot on the page (conceptual)

If the video sits far down the page and most visitors never scroll that far, the cost is paid for nothing at all. Put three embeds on one page and it multiplies accordingly.

The facade — show a poster first

The remedy is one widely used pattern. Initially show only a poster image and a play button, then swap that slot for the real player the moment someone clicks. It looks identical to an embed, and the cost is paid only by people who actually want to watch.

The facade pattern — defer the heavy part until after the click

For a designer this is an improvement rather than a compromise, because you get to choose or create the poster. The thumbnail a video service picks automatically is usually an arbitrary frame, and it frequently ends up being the largest image on the page. Specifying a poster that suits the brand improves both the look and the load.

Self-hosting and background video

You can also host the file yourself. There are no third-party connections, which is tidy, but you carry the bandwidth and storage and have to produce the variants different devices need. It suits short looping clips; longer material is better on a service built for it.

Background video deserves particular scrutiny. A silent, uncontrollable clip regularly turns out to be the heaviest element in the first screen. It is worth asking whether a still image or a short animation would give the same impression — and preparing an alternative for visitors who have asked for reduced motion.

How third-party resources affect a page is covered further in the performance archive, and converting embeds to a facade is part of our optimization program.

Next part

The final part is about tidying up. Even with every rule above observed, files nobody references accumulate in the media library over time — and the closing article covers how to find and remove them safely.

More on this topic

All technotes

Performance optimization Practical

Who pays for the milliseconds a tag adds?

A tracking script does not stop at downloading. While it is parsed and executed the main thread is busy, and a busy page ignores fingers. That cost is…

Marketers 5 min read

Performance optimization Practical

The object cache: what Redis actually removes

Repeated identical lookups disappear. One slow query does not. Miss that distinction and you will wire up Redis and then ask why nothing got faster.

Developers 7 min read

Performance optimization Practical

This is how a landing page gets heavy

Nobody decides to make a landing page heavy. It accumulates: one addition per campaign, and nothing ever removed when the campaign ends.

Marketers 6 min read

₩270,000 · Join the program