Adding YouTube Videos Without Slowing Down Your Website

YouTube video embeds are a very easy way to add event videos to your webpage. However, in their standard embed format, they can slow down the page because they load external scripts, player files, and third party resources.

With a few simple changes, you can reduce the impact of embedded YouTube videos and help your page load faster.

Why Optimise YouTube Embeds?

Embedding a YouTube video directly on your page can increase page weight and load additional scripts before a visitor has even played the video.

The recommended simple option is to use YouTube’s privacy enhanced embed, combined with lazy loading. This helps reduce the speed impact compared with a standard YouTube embed.

For maximum performance, a click to load video thumbnail is best. This shows a lightweight image first, and only loads the full YouTube player after the visitor clicks play.

Guide to Optimise YouTube Embeds

Step 1: Find the YouTube Video ID

Every YouTube video has a unique VIDEO ID , which can be found in its URL, see:

Step 2: Modify the Embed Code

Instead of using the standard YouTube embed code, use the code below.

Replace VIDEO_ID with your own YouTube video ID.

Step 3: Add the Code to Your Webpage

If you are using ShowOff, follow these steps:

Go to the page in ShowOff where you want the video to appear.
Add a widget by selecting the appropriate section.
Choose 3rd Party Code as the widget type.
Paste the optimised YouTube embed code into the code editor.
Replace VIDEO_ID with the ID from your YouTube video.
Save and test the page.

Example

If your YouTube embed URL is:

https://www.youtube.com/embed/GR6Wd1gnIY4?si=o9G6ZC69vXuEzBtZ

Use this code:

Why YouTube Embeds Impact Page Speed

A standard YouTube embed can load several external resources, including:

YouTube player scripts
Video player files
Google and YouTube tracking resources
Recommendation and engagement features
Additional third party requests

This can increase page weight and affect how quickly the page becomes usable, especially if several videos are embedded on the same page.

Why This Works

This improved embed helps because it:

Uses YouTube’s privacy enhanced domain, youtube-nocookie.com
Uses lazy loading, so the iframe is not loaded immediately when it is off screen
Keeps the video responsive on mobile
Reduces unnecessary layout issues by keeping the video in a fixed responsive container
Helps reduce the speed impact compared with a standard YouTube embed

Please note, youtube-nocookie.com reduces tracking before a visitor interacts with the video, but it does not make YouTube completely tracking free. Once a visitor plays the video, YouTube may still load additional resources.

Best Practice

For most pages, use the optimised embed code above.

For pages with several videos, or for important landing pages where speed is critical, consider using a click to load video thumbnail. This means the page loads a lightweight image first, and the full YouTube player only loads when the visitor clicks play.

Avoid placing a standard YouTube embed in the top section of a key landing page unless the video is essential.

How to Check the Impact

After adding a video, test the page using:

Google PageSpeed Insights
Lighthouse in Chrome DevTools
The Network tab in Chrome DevTools

Look for increases in page weight, third party scripts, and loading time.

Conclusion

Using an optimised YouTube embed is a simple way to reduce the speed impact of videos on your website.

The recommended simple approach is to use YouTube’s privacy enhanced domain, lazy loading, and a responsive centred container.

For maximum performance, use a click to load video thumbnail so the full YouTube player only loads when the visitor chooses to play the video.

Need help? If you require assistance implementing this on your website, please contact our support team.