How to Speed Up WordPress Pages with YouTube Videos and Google Maps

Nobody thinks twice about pasting a YouTube link into a page. It works, it looks good, done.

Then you run PageSpeed Insights and wonder why a simple contact page scores worse than your homepage. Often, the culprit is that little map at the bottom, or the video you embedded halfway down.

Embeds aren’t the enemy. Loading them too early is.

What an embed really costs

Under the hood, an embed is an iframe: a window into someone else’s website. Your browser connects to their server and downloads whatever it sends back. You can’t compress that, and you can’t cache it on your side.

YouTube typically sends scripts, styles, fonts and tracking requests. Maps sends tiles, icons and an interactive script. If the iframe loads with the page, all of that starts downloading while your visitor is still reading the first line.

Depending on how the embed is set up, that can affect all three Core Web Vitals:

• LCP can get slower when your main content waits behind embed files.
• INP can suffer when third-party JavaScript keeps the browser busy.
• CLS can jump when an iframe appears without reserved space and pushes the text down.

Is your iframe already lazy loaded?

Lazy loading means “wait until it’s needed.” Browsers support it natively with one attribute:

html

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>

Since WordPress 5.7, core supports it for iframes. Sounds like problem solved, right? Not always. Page builders, custom HTML blocks and pasted widget code can skip that default, so it’s worth checking. View the page source, search for <iframe, and see which ones are missing the attribute.

This is also where a performance plugin saves you time. FastPixel lazy loads iframes automatically, YouTube and Google Maps included, so you don’t have to hunt down every embed by hand. We’ll come back to that below.

Native lazy loading has one limit, though. When the visitor scrolls close to the embed, the full player loads, whether they press play or not.

Facades: going one step further for YouTube

A facade is a thumbnail with a play button on top. It’s an image pretending to be a video, and the real player only loads on click. It’s a separate technique from lazy loading, and you usually set it up with a dedicated script or plugin.

	Standard embed	Native lazy load	Facade
Loads with the page	Yes	No	No
Loads on scroll	n/a	Yes	No
Loads on click only	No	No	Yes

If you want to reduce tracking cookies, you can switch to youtube-nocookie.com. That’s a privacy setting, not a speed fix, and it doesn’t replace proper consent handling for GDPR.

Google Maps needs the same treatment

Show a static image of the location and load the real map after a click. Or at the very least, lazy load the iframe so it stays out of the way until the visitor scrolls close.

For a contact page, most people want the address and maybe a quick look at where you are. A link to “Open in Google Maps” is often enough.

The CLS trap

Here’s where people get burned. You lazy load the iframe, it appears late, and the page jumps because nobody reserved space for it.

css

.video-wrapper {

  aspect-ratio: 16 / 9;

}

Do the same for maps. If you use a facade, make it the exact same size as the real player.

What to leave alone

If it’s visible without scrolling, think twice before lazy loading it. A hero video or a map at the very top of the page may be your LCP element, and delaying it can make things worse. For a hero video, a facade is the better option.

Testing it

Open DevTools, go to the Network tab, reload without scrolling, and filter for youtube and google. If requests for the player or the map show up, that embed may be loading earlier than it should. Scroll slowly: they should appear only when you get close to the embed.

Then re-run PageSpeed Insights and compare the results with your earlier scores.

Let FastPixel handle it

You can do all of this by hand. But then someone adds a new video next month and forgets the attribute, and you’re back to square one.

FastPixel lazy loads iframes automatically, including YouTube and Google Maps. There’s nothing to configure and no code to edit. Embeds below the fold load when visitors get close to them, so they stay out of the way of your main content.

If you also want click-to-load behavior for videos, you can add a facade on top. Lazy loading handles the baseline for every iframe on your site, and a facade is an optional extra for pages with heavy video.

FAQs

Do YouTube embeds hurt SEO?
Not directly. But they can slow a page down, and that may hurt your Core Web Vitals.

Is lazy loading enough, or do I need a facade?
For embeds far down the page, lazy loading is a solid improvement. A facade goes further, since nothing loads until the click.

Should I lazy load every iframe?
Not the ones in the first screen. Those should load normally, or use a facade for video.

Does youtube-nocookie.com make my site GDPR compliant?
No. It limits some cookies, but compliance also depends on your consent setup and how you handle visitor data.

Should I self-host my videos?
Usually not. Self-hosting video is heavy on storage and bandwidth.

Does this work for other embeds?
Yes. Vimeo, social posts and chat widgets can benefit in the same way.