Why your page got slower after you added a video

The page was fine. You added a video. Now it takes a moment to appear, the text jumps around while it loads, and a speed test that used to look healthy has gone yellow. This is a real effect with a specific cause, and it has a fix that takes about a minute.

What a video costs before anyone watches it

A normal YouTube embed is not a picture of a video. It is a whole second web page, loaded inside yours, containing YouTube's player: their code, their styling, their fonts, their thumbnails and their tracking. All of it downloads when your page opens.

That is somewhere around a megabyte, across fifteen to twenty separate requests, and it happens whether or not anybody presses play. On most pages, most visitors never do. So you are paying, and they are paying, for something almost nobody uses.

Two videos on the page doubles it. Three triples it. A page with a row of testimonial videos can spend more on players nobody watched than on everything else combined.

What it actually breaks

Google measures three things about how a page feels, and a video embed can hurt all three.

How long until the main thing appears. Your header image, your headline, whatever the page is really about. The video player competes for the same connection, so your own content arrives later, even though the video was never the important part.

Whether the page responds when tapped. The player runs a lot of code while it sets itself up, and while that is happening the page can ignore taps and clicks. On a mid-range phone this is very noticeable.

Whether the page moves under you. If the video does not reserve its space in advance, everything below it jumps down the moment it loads. Anyone who was reading loses their place, and anyone about to tap a link taps something else.

These are the same measurements Google uses as a ranking signal, so this is not only about how the page feels.

The fix

Do not load the player until somebody wants it.

Instead of the whole YouTube player, the page shows the video's thumbnail and a play button. That is one image, around thirty kilobytes, instead of a megabyte. It looks like a video, because it is a picture of the video with a play button on it. When somebody clicks, the real player loads and starts playing immediately.

Nobody notices the difference. The click does the same thing it always did. What changed is that visitors who were never going to watch stop paying for it, and that is most of them.

This is what the builder produces by default. Paste a link, copy the code, and the page you paste it into behaves this way with nothing else to configure.

Reserving the space

The second half of the fix is that the box holds its shape from the moment the page opens, before the thumbnail has arrived. Nothing jumps, even on a slow connection, and even if the thumbnail fails to load entirely. This is also handled in the generated code, and it is the thing that turns a failing layout-shift score into a perfect one.

If you cannot change the embed code

Sometimes the video is inserted by a theme or a plugin and you do not control the markup. Three things still help:

• Fewer videos per page. If you have four, ask whether the page needs four. Linking to the rest costs nothing.
• Do not autoplay. Autoplay forces the download for every visitor and removes the chance to avoid it. There is more on this inmaking a video play automatically.
• Keep videos below the fold. Many themes will delay loading anything that is not on screen yet. That does nothing for a video at the top of the page, and quite a lot for one near the bottom.

Most WordPress themes and page builders also have a lazy loading or performance setting that covers embeds. It is worth looking before you replace anything.

Checking whether it worked

Run your page through PageSpeed Insights before and after. The number to watch is the total amount downloaded, which should drop by roughly a megabyte per video, and the layout shift score, which should go to zero.

Test the real published page rather than a preview or a logged-in admin view, and test it twice. First runs are often slower for reasons that have nothing to do with your page.

A side effect worth having

A standard YouTube embed contacts YouTube and sets cookies as soon as your page opens, which in the EU generally means it needs consent before it is allowed to appear at all. That is why so many sites show a grey box where a video should be until you accept cookies.

If the player only loads when somebody clicks, nothing from YouTube runs on your page until a visitor asks for it. Generated code here also uses YouTube's cookie-free domain, which holds off on setting anything until playback actually starts. Between the two, a video usually stops being part of your consent problem.

If you write code

The pattern is called a facade, and there are three details that decide whether it works properly.

The play button must be a real <button>, not a styled div, so that Enter and Space work and a screen reader announces it as a control. Give it a real name, such as "Play video: Product tour", and leave the thumbnail's alt empty so it is not read twice.

The aspect ratio belongs on the wrapper, not the image or the iframe, so the space survives a missing thumbnail and the swap from image to player.

YouTube thumbnails need a fallback chain.maxresdefault.jpg returns a 404 on older uploads;hqdefault.jpg always exists. Step down on error rather than shipping a broken image.

There is more of this inresponsive video embeds andbuilding your own controls.