How to Speed Up YouTube/Vimeo Embeds in WordPress

youtube home

Recently I was working on a site (compare.parts) with a heavy video (hosted on Vimeo) in the above fold, hero section. It needs to be loaded fast and autoplay.

With proper optimizations, I was able to achieve 100/100 on Google PageSpeed Insights.

compare parts report

If YouTube or Vimeo embeds are slowing down your site, this guide is for you.

Why YouTube/Vimeo Video Embeds are Slow?

When you embed a YouTube or Vimeo video, it creates an iframe and loads several resources.

  • Downloads an HTML file, one CSS, two/three (heavy) JS files which are more than 500KB
  • Extra DNS lookups to www.youtube.com, i.ytimg.com etc
  • Render blocking JavaScript

To better understand here are some data from Pingdom and GTmetrix after analyzing a page with YouTube (results are almost the same if you use Vimeo).

youtube gtmetrix error
Render blocking scripts in YouTube embeds
youtube size pingdom
500+KB downloaded by YouTube
youtube requests pingdom
Requests made by YouTube

I hope that made clear these embeds are slow. Let’s see some solutions that can speed up YouTube or Vimeo video embeds in WordPress.

Solution #1: Remove Videos

Just kidding 😉

Solution #2: Lazy Load and Show Preview Image

Just like lazy load images, you can also lazy load videos. By doing so, only a placeholder image will be loaded. All the necessary scripts, iframe, video player etc will be loaded only after the user clicks on the play button.

Demo

Pros:

  • Keep your videos on YouTube/Vimeo itself
  • Save server bandwidth and storage costs
  • Switch quality and resolution based on device and network speed

Cons:

  • No autoplay
  • YouTube/Vimeo branding
  • Adds JavaScript for lazy loading (~10KB)

How to Lazy Load Youtube/Vimeo Videos in WordPress

If you're using WP Rocket, go to 'Media' settings and turn on "Enable for iframe and videos" and "Replace YouTube iframe with preview image" under lazy load section.

lazy load video

But if you're not using WP Rocket, there is a standalone plugin made by them just for this:

Solution #3: Self Host Videos

Uploading videos to YouTube is ideal if you've many videos in a post/page and you already have a YouTube channel and you want to grow that together.

However, if you're using videos just for the hero section or above the fold content, then the above solution might not be the best. Directly embedding YouTube/Vimeo will make it slow too. In such a case, you can self-host video and embed them.

By self-hosting, you can also remove the fear of "will YouTube/Vimeo delete my video in future?".

Demo

Pros:

  • Autoplay
  • No single line of JavaScript or CSS needed
  • Full control over video, fully customizable
  • Ideal for background videos
  • No branding

Cons:

  • Need a CDN
  • Storage space for videos, either in server or CDN storage (push zone)
  • Same video file delivered for mobile and desktop, fast and slow networks

How to "Properly" Self Host Videos in WordPress

You've may have already heard that self-hosting videos is a bad idea and you should never do it. But I would say, if you "properly" do it, there is nothing wrong it.

Step 1: Compress Video

There are many online and offline compressors available that can compress videos. But what I would suggest is to upload the video to YouTube and download it back. You'll get the best-compressed video!

upload video youtube
download video youtube

Step 2: Upload Video & Serve from CDN

You can upload the video files directly to 'Media' and enable CDN. But what I would suggest is to upload videos to a CDN that have push zone (storage). Thus you save server disk usage, save server bandwidth and will be easy in future to migrate the site to another host/server.

There are many CDN providers which provide a push zone. My favourite one is BunnyCDN. It has storage and edge servers designed for video delivery. It's very reliable and cheap.

Goto BunnyCDN and create an account. Add a new storage zone and upload your videos.

bunnycdn storage zone

Once uploading is complete, grab the URL of the video (you'll need to connect it to a pull zone).

video url bunnycdn

Step 3: Embed Video in WordPress

Embedding the video is pretty easy. Add a 'Custom HTML' block and add the following snippet.

<video width="100%" controls>
  <source src="VIDEO_URL" type="video/mp4">
</video>

Replace VIDEO_URL with yours and you're good to go.

By default, the placeholder image will be the first frame in the video. If you want you can place a custom image.

<video width="100%" placeholder="IMAGE_URL" controls>
  <source src="VIDEO_URL" type="video/mp4">
</video>

This is the native video player in the browser. No external JavaScript or CSS is downloaded for this. The video tag is highly customizable. You can find more options in it here.

Bonus Tip

If none of the solutions works for you, at least preconnect to the YouTube or Vimeo domains. By doing this you tell the browser: "hey, I'll need to make TCP connection and SSL handshake to these domains very soon, so do them now". You could save 200-300ms which browsers spend for connecting to domains.

Paste the following code the head tag:

For YouTube:

<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://i.ytimg.com">
<link rel="preconnect" href="https://i9.ytimg.com">
<link rel="preconnect" href="https://s.ytimg.com">

For Vimeo:

<link rel="preconnect" href="https://player.vimeo.com">
<link rel="preconnect" href="https://i.vimeocdn.com">
<link rel="preconnect" href="https://f.vimeocdn.com">

Conclusion

One solution won't fit for all. Each has its own pros and cons. Go with the one that works for you. If you're self-hosting, make sure you enable a CDN especially if you upload videos directly to 'Media', it's a must!

Comment below if you’ve any queries or feedback. I read and reply back to each of them within 12 hours!

You May Also Like