travis.media

Speed Up Loading of Embedded Videos (not Lazy Loading)

With "lite" embeds you can load your YouTube or Vimeo embedded videos up to 224x faster. This not only increases page speed, but makes your website much more enjoyable.

Embedded videos hurt your page speed and ranking. This is a fact.

And most search results tell you to lazy load your videos which is, of course, a great idea. Lazy loading assures that your resources only load when needed, which is usually when they scroll into view. They do not load on initial page load thus not harming your page speed and score.

But what if your video is at the top of the page? (like on my homepage)?

Or what if you still do not want your site visitors to wait while resources load as they scroll down the page.

Well, I came across a couple of packages the other day that render custom elements that look just like your embedded video, but much, much faster.

Then when the video is clicked on, voila, the video plays.

Check out my video on the homepage for an example.

It’s YouTube “lite,” Vimeo “lite”, etc.

Let’s see how to implement this:

Note: If you are a developer or website savvy, this should be a breeze to set up. If you are not, get your “computer guy” or developer to set it up for you.

YouTube

There is a package that I use called Lite YouTube Embed.

As stated above, it renders custom elements to look like your YouTube embed, and when clicked on it plays normally. But it’s very light and loads instantly.

To set this up on your own site, there are 3 steps involved:

  1. Include the stylesheet within your application. You can use the npm package or just download the source from the repo and include it in your css.
  2. Same as the above, but include the script within your application.
  3. Finally, use the element for your YouTube video embed like so:
    <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

It’s all documented on the Github page.

You can also use any custom parameters that you would use in a YouTube embed as well like so:

<lite-youtube videoid="ogfYd705cRs" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>

Results

Here are the results using the Lite YouTube Embed on my homepage. And do note that my site is already blazing fast because it’s a “static site”.

BEFORE: Regular YouTube Embedded Video

AFTER: Lite YouTube Embedded Video

An increase in load times of over 50% and a 4 point pagespeed increase on Google.

Vimeo

The directions for using the Vimeo package is very similar.

  1. Include the script within your application.
  2. Use the element like so:
    <lite-vimeo videoid="357274789"></lite-vimeo>

Intercom / Help Scout / Drift / Facebook Messenger

A bit more advanced, but use this package and instructions.

Conclusion

Yes, lazy loading is important. But also using a “lite” version of these embedded iframes can make a significant difference!

Have you tried these packages? How do you speed up the loading of embedded videos?

Let’s discuss below.

----------

** This article may contain affiliate links. Please read the affiliate disclaimer for more details.

About Me Author

Travis of

Travis Media

From agency work with WordPress and PHP, to freelancing full-time, to jumping into the corporate space and working on large, mission-critical projects as a DevOps engineer, I create content to share what I’m learning along the way and to help you, the developer, succeed in the industry. Read More
Explore

You May Also Like