You added a short “about us” video to the home page. It is hosted on YouTube, so you assumed it costs your site nothing. Then the speed report starts listing youtube.com under third-party code, complains about unused JavaScript you never wrote, and the page feels heavier on a phone even for visitors who never press play.
This is the most common way YouTube embeds slow down your website: not the video itself, but everything the player loads in advance. The good news is that you can keep the video and remove almost all of that cost.
What a YouTube embed loads before anyone presses play
When you paste a YouTube link into WordPress, it becomes an iframe, a small web page from YouTube placed inside yours. As soon as the browser reaches it, that little page loads like any other: its own HTML, the player’s JavaScript and styles, the preview thumbnail, and connections to several YouTube and Google domains, such as youtube.com and ytimg.com.
None of that waits for a click. The video stream only starts when someone presses play, but the player machinery is downloaded and run for everyone who opens the page. On a desktop with fast broadband it is easy to miss. On a mid-range phone, the player’s scripts compete for the same processor that is trying to make your page respond to taps.
The cost multiplies with every embed. Three videos on a services page means three iframes, each setting up its own player.
Do YouTube embeds slow down your website? How to check
Before blaming the video, confirm that the embed really is the problem and not something else on the same page. Three quick checks answer that.
- Run the page through PageSpeed Insights on mobile and look at the sections on third-party code, unused JavaScript and main-thread work. If YouTube domains appear there, the embed is part of the problem.
- With Chrome’s developer tools open on the Network panel and caching switched off, refresh. Type youtube into the filter box, then ytimg. Add up the requests and the data, and remember that nobody has pressed play yet.
- If you have a staging copy, remove the embed there and test again under the same conditions. The difference is what the video is really costing you.
YouTube is only one source of outside code. If the report also lists analytics, pixels or widgets, our post on third-party scripts that slow a page covers auditing them as a group.
The main fix: a click-to-load facade
A facade is a stand-in. Instead of the real player, the page shows the video’s thumbnail with a play button drawn on top. It looks almost identical. Only when the visitor clicks does the real YouTube player load and start playing.
Everyone who does not watch the video downloads one image instead of a player. Everyone who does watch waits a moment longer after clicking, which most people do not notice because they expect a video to take a second to start. Google’s Lighthouse tool has recommended this approach in an audit about lazy loading third-party resources with facades, with YouTube embeds among the cases it looks for.
Ways to add a facade in WordPress
- A speed plugin option. Several speed plugins, including WP Rocket and Perfmatters, have a setting that replaces YouTube iframes with a preview image automatically. If you already use one, check its media or lazy load settings first.
- A dedicated lightweight embed plugin. There are plugins built only for this, many based on the open-source lite-youtube-embed component. They suit sites that do not run a larger speed plugin.
- A theme or builder option. Some page builders’ video widgets have an “image overlay” or similar setting that shows a picture until the visitor clicks. Check that it really delays loading the player rather than just hiding it under an image.
Check the facade after setting it up
- Reload the page with the Network tab open and confirm no YouTube player requests happen until you click.
- Click the facade on a phone as well as a desktop and confirm the video plays.
- Make sure the play button can be reached with the keyboard and has a sensible label, so the facade is not worse for accessibility than the original player.
- Look at the thumbnail quality. Some videos do not have a high-resolution thumbnail on YouTube, and the facade may fall back to a smaller, softer image. Uploading your own poster image is often better for a prominent video.
Other options, and what they really do
Lazy loading the iframe
Adding loading=”lazy” to an iframe tells the browser to wait until it is near the screen. WordPress already does this for iframes in post content. It helps when the video is well down the page. It does nothing for a video near the top, and once the visitor scrolls down, the full player still loads whether or not they watch. A facade is more effective; lazy loading is a reasonable minimum.
Privacy-enhanced mode
YouTube offers a privacy-enhanced embed that uses the youtube-nocookie.com address. YouTube describes it as limiting the information collected about visitors who do not play the video. That is useful if you have privacy obligations, but it is not a speed fix: the player and its scripts still load. You can combine it with a facade, and many facade plugins offer it as a setting.
A thumbnail that links to YouTube
For a video that is a nice extra rather than central, an image that links to the video on YouTube costs the least. The visitor leaves your page to watch, which may or may not matter. It suits blog posts that reference a video more than a landing page where you want people to stay.
Opening the video in a lightbox
Some sites show a thumbnail and open the player in a pop-up overlay on click. This behaves like a facade as long as the lightbox loads the player only when opened. Check in the Network tab; some lightbox plugins load every player in advance.
Pages with many videos
A testimonials page or video gallery with ten embeds is where this really hurts. Ten players set up on load can make a page sluggish even on a decent laptop. On these pages:
- Use facades for every video. This is not optional on a gallery page.
- Consider showing a few videos and linking to a YouTube playlist or a second page for the rest.
- Avoid sliders of videos. The slider’s own scripts add to the player cost, and hidden slides often load their players anyway.
A video at the very top of the page
If the video sits in the hero area, it may be the largest thing on screen and therefore what Google measures for Largest Contentful Paint. With a facade, that measurement is usually the thumbnail, which is far quicker to show than a player. Make sure that thumbnail is not lazy loaded, is reasonably compressed and has its width and height set so the layout does not jump.
If what you actually have at the top is a silent video playing in the background, that is a different setup with different costs. Our post on background videos and page speed covers it.
For videos that will not play at all, which is a separate kind of problem from slowness, see WordPress video not playing.
Measuring the difference
Before you change anything, write down for the page: the number of requests to YouTube domains, the total data they transfer, the mobile lab result for Total Blocking Time and LCP, and how the page feels to scroll and tap on a real phone. Repeat after the change. With a working facade, the YouTube requests on load should drop to a thumbnail image. The scores may move a lot or a little depending on what else the page carries, but the request list will tell you clearly whether the fix is doing its job.
Embeds are one of several ways media weighs a page down. Our overview of what images and media do to page speed covers the rest, and the guide to making a website faster puts it alongside caching, scripts and hosting.
Frequently asked questions
Does a YouTube facade affect how my video ranks on YouTube?
No. A facade changes how your website loads the player, not the video on YouTube. Once the visitor clicks, they watch through the normal embedded player as before. The only realistic difference is that a visitor who never clicks the thumbnail never loads the player at all, which is the point of the facade.
Is Vimeo or self-hosted video lighter than a YouTube embed?
Every embedded player loads its own scripts, so Vimeo has a similar cost and the same facade approach applies. Self-hosting a video file avoids third-party scripts but puts the video’s weight and bandwidth on your own hosting, which usually works out worse for small business sites. A facade on any hosted player is generally the better trade.
Can I autoplay the video after the visitor clicks the facade?
Yes, that is how most facades work. The click loads the player with an instruction to start playing, so the visitor does not have to press play a second time. Behaviour can vary slightly between browsers and phones, so test on a real phone after setting it up rather than assuming.
Should I remove the video if it makes the page slow?
Not usually. A good video can help people understand your business, and a facade removes most of the cost for visitors who never watch. Remove it only if nobody watches it, which your analytics or YouTube’s own statistics for the video can show, or if it repeats what the page already says.
Embeds, widgets and third-party scripts tend to pile up together, and it is not always obvious which ones matter. Our speed optimisation service includes a third-party script audit, so you can see what each embed and widget costs before deciding what stays.
Next in this series: Is a Background Video Slowing Down Your Site? What to Do
