How to Embed Videos Without Slowing Down Your Website

Short answer: Embedded videos slow websites because each player loads its own scripts, styles and connections before anyone presses play. To keep pages fast, show a lightweight facade (a thumbnail image with a play button) and load the real player only on click, lazy-load video iframes below the fold, reserve their space to avoid layout shift, use an optimised poster image, and avoid autoplaying background videos on mobile. For self-hosted video, compress files, use preload="none" or metadata, and serve a smaller version to phones.

Video is one of the most effective ways to explain a product or service, and many small-business sites embed several: a hero video on the home page, testimonials on the about page, tutorials in blog posts. Each embed looks like a simple thumbnail, but behind it is a complete video player application. A page with three embedded players can load more JavaScript than the rest of the website combined, and most visitors never press play.

Why video embeds are heavy

When you paste a standard embed code from a video platform, the page loads an iframe containing the platform’s player. Before the visitor does anything, that iframe typically:

• connects to several domains belonging to the platform and its advertising or analytics services;
• downloads the player’s JavaScript and CSS, often hundreds of kilobytes;
• executes that JavaScript on the main thread, competing with your own page;
• downloads a thumbnail image and sometimes the first segments of the video itself.

Multiply that by the number of embeds on the page. The effect shows in several Core Web Vitals: the extra downloads compete with the main image for bandwidth (LCP), the scripts keep the main thread busy (INP and Total Blocking Time), and iframes without reserved space push content around (CLS).

Technique 1: Use a facade

A facade is a static preview that looks like the video player: a thumbnail image with a play button. Only when the visitor clicks does the page replace it with the real embedded player, which then starts playing.

• Cost before click: one optimised image and a few lines of code.
• Cost after click: the same as a normal embed, but only for visitors who actually want to watch.
• Implementation: lightweight open-source embed components exist for the most popular video platforms, and many WordPress performance plugins offer a “replace video iframes with preview images” option.

Lighthouse explicitly recommends facades for heavy third-party embeds. For most business sites, this is the single most effective video optimisation.

One trade-off: on some mobile browsers, a click that loads the player may require a second tap to start playback, because autoplay with sound is restricted. Most visitors accept this, but test it on the devices your audience uses.

Technique 2: Lazy-load video iframes

If you keep standard embeds, add the native loading="lazy" attribute to iframes that are below the fold. The browser then waits to load the player until the visitor scrolls near it. This does not help embeds at the top of the page, and the player still loads fully when it comes into view, but it keeps below-the-fold videos out of the initial load. Many platforms’ embed codes and WordPress’s default embeds already support lazy loading.

Technique 3: Reserve space to prevent layout shift

Iframes and facades should occupy their final size from the start. Wrap them in a container with the CSS aspect-ratio: 16 / 9 (or the video’s actual ratio) and a width of 100%. The browser reserves the correct space immediately, and nothing below the video jumps when it loads.

Technique 4: Handle self-hosted video carefully

Hosting video files yourself avoids third-party players but brings its own considerations:

• Compression: encode at a sensible bitrate and resolution for web viewing; a file straight from a camera is far larger than needed.
• Formats: MP4 with H.264 is universally supported; WebM or newer codecs can be smaller, offered as additional sources.
• Preload attribute: preload="none" downloads nothing until play; preload="metadata" fetches only basic information. Avoid preload="auto" for videos most visitors will not watch.
• Poster image: always set a poster, optimised like any other image. It is shown before playback and may be the LCP element.
• Delivery: large video files benefit from a CDN or a dedicated video hosting service that streams adaptively. Plain file hosting on shared servers can be slow and eat into bandwidth limits.

Technique 5: Rethink background and hero videos

Autoplaying background videos in the hero area are popular with designers and costly for visitors. They download megabytes on arrival, compete with everything else on the page and often replace a simple, fast hero image.

• Ask whether the video communicates something an image cannot. Often it is decorative.
• If you keep it, make it short, silent, heavily compressed and low resolution, since it usually sits behind text.
• Show a static poster image on mobile and load the video only on larger screens, or not at all when the visitor has asked for reduced data or reduced motion.
• Optimise the poster image as the LCP candidate and load it eagerly.

Choosing the right approach

Video on WordPress sites

WordPress makes embedding easy: paste a video link into the editor and it becomes an embed block automatically. That convenience is exactly why many WordPress sites end up with several full players on one page. Page builders add their own video widgets, some with background-video options that autoplay on every device. A few practical steps help. Check whether your performance or caching plugin offers an option to replace video iframes with preview images; many do, and it covers every existing embed at once. If you use a page builder’s video widget, look for an “image overlay” or “lazy load” setting. For hero sections with background video, look for a setting to disable the video on mobile and use the fallback image instead. Finally, search your content for pages with more than one embed, such as testimonial pages, and prioritise those, because they gain the most from facades. After any change, clear the page cache and open the page on a phone to confirm the videos still play.

Privacy and consent

Standard embeds from large video platforms can set cookies and send visitor data to the platform as soon as the page loads, which may require consent in some jurisdictions. A facade has a useful side effect here: nothing is loaded from the platform until the visitor chooses to play. Some platforms also offer privacy-enhanced embed modes. Check with whoever manages your consent setup.

How to measure the impact

1. Run PageSpeed Insights on a page with embedded videos and note LCP, Total Blocking Time and page weight.
2. Check the third-party summary for the video platform’s share of transfer size and main-thread time.
3. Replace embeds with facades and test again.
4. Check that each video still plays on desktop and mobile, with one or two taps at most.

How Site AI Audit helps

Site AI Audit runs Google PageSpeed for mobile and measures page weight on your site, so the cost of heavy video embeds and background videos appears in the speed findings, together with their effect on LCP and INP. Each finding comes with a plain-language fix and is ranked by impact among your SEO, security and e-mail findings. Run a free check on a page with video to see the difference.

Related reading

• How Third-Party Scripts Slow Down Your Website (and Fixes)
• Lazy Loading Images: When It Helps and When It Hurts
• Page Weight: How Heavy Is Too Heavy and How to Trim It
• How to Fix Cumulative Layout Shift (CLS) on Your Website

The bottom line

Every embedded player is a small application that loads whether anyone watches or not. Use facades so the player loads only on click, lazy-load and size iframes properly, treat self-hosted video like any other heavy asset, and question background videos, especially on mobile. Your visitors keep the video; the page loses the weight.

FAQ

Do embedded videos slow down a website?

Yes. Each embedded player loads its own scripts, styles and connections when the page loads, even if nobody presses play. Several embeds on one page can significantly increase load time and main-thread work.

What is a video facade?

A facade is a lightweight preview, usually a thumbnail with a play button, that looks like the player. The real player loads only when the visitor clicks. It removes almost all of the video’s cost for visitors who do not watch.

Is it better to self-host videos or use a video platform?

Video platforms handle streaming, formats and bandwidth, which is convenient, but their players are heavy. Self-hosting gives more control and no third-party scripts, but needs proper compression and delivery. For most business sites, a platform plus facades works well.

Are background videos bad for page speed?

They usually add megabytes to the initial load and can delay the main content, especially on mobile. If you keep one, make it short, silent and heavily compressed, and consider showing a static image on phones.

Does lazy loading work for YouTube embeds?

Yes, the native loading=”lazy” attribute works on iframes, including video embeds, and delays loading until the embed approaches the viewport. For embeds near the top of the page, a facade is more effective.