Embed YouTube Videos the FAST Way

People spend 2.6x as much time on pages with video as they do on pages without. In other words, if you aren’t using video in your blog, you’re missing a golden opportunity to deepen your connection with your readers while increasing your revenue. If a Picture is worth a thousand words, than a Video is worth a Million!

Why Should I Care about YouTube Video Optimization?

It’s now more important than ever to speed up your website’s loading time since Google gives preferential treatment to sites that load faster. You should be aiming for near 2 seconds, total. Optimizing your YouTube videos on your blog will both increase your page speed and your Google Search ranking.

Myth & Truth: Videos Slow Down Sites

It’s no secret that youtube iframe embeds slow down your page load. Truth, embedding videos the standard method with YouTube urls or iframe code will bloat your page size and negatively impact your site speed. But, it doesn’t have to be this way. It is possible to embed multiple videos per blog page without slowing down your site and turning you into a Slogger!

How to Add YouTube Videos to your Blog:

There are 4 different methods for embedding YouTube Videos onto your Blog page. I’m going to cover the Slow and Fast methods, so you’ll know why my chosen Fast Method is worth the effort. For both fast and slow, I’ll also share speed test data for each to measure it’s impact on your overall site speed.

Method 1 & 2: Standard Method or How to Slow Down Your Site

Go to your YouTube video of choice and click on ‘Share’ underneath the video.

Embed YouTube Videos the FAST Way

Next you can choose between two different options for embedding the video onto your page. I’ve included examples of each method’s code. These are included purely for your reference, I DO not advocate using these methods.

YouTube Share URL

https://youtu.be/C0DPdy98e4c

Copy/Paste this code into your WordPress blog post in the Gutenberg YouTube Embed block.

The Iframe code can be copied/pasted into a Gutenberg HTML block on the page.

YouTube Embed Iframe Code

<iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Site Speed Impact of the Standard Methods:

Testing Conditions – Blog post with the same 4 paragraphs of text, same 3 images, 1 video, built with Gutenberg blocks, using GeneratePress theme, Hosted with NameHero, with Cloudflare CDN integrated, and with WP Rocket caching plugin configured.

Blog Post with NO Videos:
PageSpeed Insights Score for page with NO YouTube Videos embedded. Score: 100/100 Mobile

Page Size: 118KB / Page Requests: 13

PageSpeed Insights: 100 Mobile / 100 Desktop

Google Core Web Vitals: LCP: 1.0s / TTI: 1.0s / TBT: 0ms / CLS: 0.001

1 YouTube Video embedded the Standard Method:
PageSpeed Insights Score for page with 1 YouTube Video embedded by the Standard Method. Score: 57/100 Mobile

Page Size: 808 KB / Page Requests: 26

PageSpeed Insights: 57 Mobile / 68 Desktop

Google Core Web Vitals: LCP: 2.0s / TTI: 13.0s / TBT: 7.5s / CLS: 0.001

Speed Test Score Analysis: Now I do have a blazing-fast well optimized website, so pretty much all of my blog posts will start with 100/100 scores. Your blog posts will most likely start off lower in the scoring. Be sure to run your page through Google PageSpeed Insights to get your benchmark score.

After adding just 1 YouTube video via the Standard Method that 99.9% of Bloggers use for adding videos, the Total Page size increased by 690 KB and the Requests increased by 13. With just 1 video we enlarged the page drastically! Most non-optimized blog posts are 1+MB in size to begin with, adding videos will just balloon it in size even more. Heavier weighted pages with more files that make up the page take longer to load. Looking at the Core Web Vitals…

LCP got slower by 1.0s – Largest Content Paint is how long it takes to load the largest element on your page

TBT increased by 7.5s – Total Blocking Time is time wasted in the loading of your site due to heavy javascript requests

TTI got slower by 12.0s – Time to Interactive measures how long till the page is considered done and ready to interact with, or ready to play the video in this case.

CLS was unchanged – Cumulative Layout Shift measures how much elements are moving around on the page while it’s loading. Goal is to be less than 0.1

FAST Methods for Loading YouTube Videos

You’ve read how NOT to do it, so let’s now focus on the RIGHT way to do it. Let me explain what this method is actually doing to the videos on your page.

Method 3: Lazy-Loading Video iframes

Lazy-Loading is the 3rd method and definitely faster than the Standard method, but why settle for sorta-fast when you can just as easily get blazing-fast! Lazy loading videos still loads the 690KB of YouTube scripts, but just moves it to the back of the line at the end of the page load. Lazy-Loading Videos is not Video Ad-friendly. If you monetize your blog with Ads such as Mediavine, Ezoic or Adsense, you can’t lazy-load videos for your site because you won’t be able to separate the Ad videos from your own uploaded videos.

Method 4: Loading Video Thumbnails only on Page Load

How It Works:

Instead of loading the entire video with the extra 690KB of YouTube Javascript files, we will only be loading the Video’s thumbnail file only onto our page that only after it’s clicked, will it load the video to watch. This way you’re not loading videos unless your visitor wants to watch it, keeping your overall page and website lean, mean, and fast!

Site Speed Impact of the Fastest Method #4

1 YouTube Video with only Video Thumbnails initially loaded – the FAST way:
PageSpeed Insights Score for page with one YouTube Video embedded the FAST way. Score: 100/100 Mobile

Page Size: 125KB / Page Requests: 15

PageSpeed Insights: 100 Mobile / 100 Desktop

Google Core Web Vitals: LCP: 1.0s / TTI: 1.0s / TBT: 0ms / CLS: 0.001

After adding 1 YouTube video via the FAST Method the Page size increased by only 7 KB and the Requests increased by only 2. We’ve successfully added our video with hardly any effect.

Looking at the Core Web Vitals… LCP, TBT, TTI and CLS was unchanged from the page version test without the video.

WP YouTube Lyte Plugin

WP YouTube Lyte Plugin in the WP Plugin Directory

General Installation Steps:

  1. Install and Activate WP YouTube Lyte Plugin (Free)
  2. Configure plugin settings per my WP YouTube Lyte Settings Guide
  3. Use shortcodes or YouTube Share URL to insert the video into posts/pages
WP YouTube Lyte video Shortcode used on blog post in Shortcode Gutenberg block
WP YouTube Lyte video Shortcode used on blog post in Shortcode Gutenberg block

So using WP YouTube Lyte instead of the standard normal YouTube embeds results in less files to download, less data to transport, the page being ready for interaction quicker and having everything loaded a whole lot faster. These figures are for a single YouTube Video on a page, but the impact is all the more important if you have multiple videos on one page.

Real Results from following this Tutorial:

Have you followed this Speed Tutorial and achieved incredible results you are proud of? I want to hear from you… let me know, I’d love to share your results here with other Bloggers so they’ll be that much more confident to try it themselves too.

YouTube Video Optimization Before/After results
YouTube Video Optimization Before/After results
YouTube Video Optimization Before/After results
Embed YouTube Videos the FAST Way