Updated on July 17th, 2022
How to optimise Youtube video embeds? This was the question I asked myself recently, when I found that YouTube videos were slowing down my page speed to a crawl. On testing my site through Pingdom, I found that the YouTube video player has a plethora of heavy resources that it downloads on page load .There didn’t seem to be much information online about how to fix it. Finally, I found the perfect free solution that works perfectly.
The solution is to use an image overlay as the thumbnail for any embedded YouTube videos. Accordingly, if you’re using an optimised image as the overlay (or thumbnail), then none of Youtube’s bandwidth intensive scripts are downloaded on page load.
Embedding Youtube (or other) videos in your website or blog has many advantages. It can help to build your brand and community and make your pages much more interesting.
Your web pages will become more readable if you’ve got an interesting mix of images and videos mixed with your text.
What many people don’t realise is that when you embed videos in your blog, it will slow down your page loading time considerably. This obviously has a negative effect on the user experience and SEO. We want to avoid this slowdown effect.
There’s nothing worse than a user clicking on your site in Google search and just sitting there forever waiting for your page to load. They’re likely to back out and jump to another site.
Google automatically looks at these back-outs or page abandonments and marks down your page and site in the rankings.
Why Youtube Videos in your Blog can help with SEO
One of the key aspects of search engine optimisation (SEO that the search engines look at is “Time on Page”. There are many things that can increase your time on page such as including some interesting images. The images help to slow the rate at which your reader consumes your article.
Accordingly, video can also give your “time on page” a massive boost. You can do this by embedding a relevant and interesting video on your page. The video should be something that the reader of the page would be keen to watch. If it’s a 10 minute video, it’s going to really help with your time on page even if the reader doesn’t watch all of it.
Videos that you’ve created yourself which are super-relevant to the topic at hand are usually the best.
Furthermore, a side benefit is that your video will now appear on Google (or Bing) video search results. This provides added discoverability for your post.
Conventional Youtube Embedding Requires Heavy Processing
The conventional way to embed videos is through a drag and drop function with one of the page builders such as the Gutenberg block editor This method has its disadvantages. What happens is that a whole bunch of Javascript code is initiated from Youtube every time your page is loaded, regardless of whether anyone actually clicks on the embedded video.
From there, a greater amount of assets is brought down from Youtube to actually run the video. So we want to avoid this happening unless your reader actually clicks on the video
Should I Auto-Run or Manually Run Videos on my Blog?
It’s a personal decision but I’d recommend avoiding auto-run videos. Just as opt-in pop-ups often drive you batty, self-running video can antagonise readers and get them to click off your page in a heartbeat.
Considering how much web surfing occurs during business hours, loud self-loading videos can easily embarrass office workers.
A Better Way – How to Optimise Youtube Video Embeds
A solution to this problem is to embed the videos in such a way that only the thumbnail of the video is loaded. The advantage is that your page loads without all of the heavy extra Youtube (or Vimeo) code.
As many readers won’t actually watch the video, the page load speed won’t be slowed down for everyone.
How to Optimise Youtube Video Embeds – Tools
While it’s possible to include some extra code in your website, this task is most easily handled by plugins.
Below, I’ll describe a few of the best plugins to embed Youtube videos:
Elementor Video Widget – Our Preferred Option
This is currently our favourite option and works fine with basic Elementor (free or paid plans).
The best way to use this is with an image overlay for the Youtube thumbnail. This speeds up your site as YouTube.com assets are only downloaded as they’re needed.
Furthermore, lazy load functionality is included which means that the thumbnail for the video can also be loaded as the person scrolls down the page.
What you need to do is go to YouTube and find the video that you want to embed in your blog.
Copy the URL at the top of the post:
Now, head over to your blog post and add a video element in Elementor. Copy the Youtube URL into the link box:
Now, select the option at the bottom to overlay an image.
Add the screenshot of the thumbnail image from your image library and turn on the lazy load option.
How to Download a Youtube thumbnail in High Resolution:
- Go to the YouTube video that you want the thumbnail from.
- Underneath the video, click the option to Share
- Click Copy
- Copy the URL that you are given. It should be something like this: https://youtu.be/e37nYDjDI_Q
- You need to then need to take the equivalent of the bold code from above and paste it into this URL: https://img.youtube.com/vi/e37nYDjDI_Q/maxresdefault.jpg
- Click on the URL and you’ll have the thumbnail in high resolution. Then save the URL to your computer. Reduce the file size to suit your theme, then optimise the image.
If you’re looking to format your video further, Elementor’s Ultimate Add-Ons bundle will give you further options in the way that you format your video embed.
There’s so much functionality in adding video with Ultimate Add-Ons. You’ve got total versatility in how you display the thumbnail including such options as image shading.
Video and page speed is maximised as assets are only downloaded from Youtube as they’re needed. Lazy load functionality is included which will enable you to only load video images when they’re needed.
Here’s a video which helps to explain how the Elementor video widget works:
WP Youtube Lyte
WP Youtube Lyte is a free plugin that allows you to create light Youtube embed thumbnails for your videos
This plugin can be configured to cache the Youtube videos locally which provides superior speed performance compared to normal (heavy) loading. It has a predominantly 5 star rating on WordPress.org and is highly regarded by users.
Summary – How to Optimise Youtube Video Embeds
If you’re serious about the speed of your website (as we all should be), I’d recommend checking out one of the plugins that help with this process.
The two that I recommend are Elementor Ultimate Add-Ons (for premium functionality) and WP Youtube Lyte (which is a great free plugin).
Frequently Asked Questions – How to Optimise Youtube Video Embeds
Why should I embed YouTube videos in my blog post?
Including YouTube videos in your blog post gives Google an extra impression of your webpage’s authority. As Youtube is part of Google, this cross-posting sends important ranking factors to the algorithm. It helps to boost the page ranking of your website.
Why is it better to embed YouTube videos instead of other videos in my blog post?
As YouTube is part of the Google ecosystem, Google is thought to give preference to blog posts when they are linked to Youtube. It’s also free to make videos on YouTube which is also a huge advantage.
Your post will also appear in Google video search. So there is an added extra level of discoverability when you add video to blog posts.
