Faster Vue App Page Load By Lazy Loading Youtube iFrame Embed

Goal is to embed YouTube videos on your Vue web page in a fast, lightweight manner that cut out load time and embedded the video on demand thus reducing the size of your web pages, increases your page speed and Google rank.

Embedding a YouTube video has become a completely easy for anyone engaged with the web; copy, paste, done. However, pulling in an external resource like a YouTube video slow down a web page’s load performance, especially if there are two or more videos embedded on the same page.

Single embedded YouTube video equates to 25 HTTP requests with a total of ~899 KB downloaded (see screenshot). These numbers will climb as we embed more videos on the page. And these files are downloaded even before the visitor has clicked the play button.

If you’re not auto-playing the video, then why are you slowing down your initial page load when you don’t need to?

The other disadvantage with the default YouTube embed code is that it delivers a video player of fixed dimensions and isn’t responsive.

“Lazy-loading” — Embed YouTube Videos without Increasing Page Size

Instead of embedding the full player upon page load, it only displays a thumbnail and video title with a play button overlaid. Resources for the YouTube player aren’t loaded unless a visitor actually clicks on a play button which 100% takes care of the problem described above.

To achieve this in Vue application, all you have to do the following:

Step 1:

Add vue-lazytube package in your vue.js application, with this you can embed a YouTube player easily and lazy load the video to save resources and reduces initial load size.

npm install --save vue-lazytube

Step 2:

Now all you have to do is importing ‘LazyYoutube’ in your project and passing the YouTube video link as a prop. (see demo)

<template>
    <LazyYoutube
        src="https://www.youtube.com/watch?v=TcMBFSGVi1c"
    />
</template>

<script>
    import { LazyYoutube } from 'vue-lazytube'
    export default {
      name: "YourAwesomeComponent",
      components: {
        LazyYoutube
      },
    };
</script>

Now it only render a thumbnail and a video title with a play button overlaid, you can customize further by using props. So when the visitor clicks on a play button then it actually loaded the resources and plays the video.

All features that vue-lazytube provides:

• reduces initial load size by ~1.1 MB per video
• fully responsive and customizable through props
• provides methods to control (play, stop, pause and reset) embedded videos
• provide options to set up custom title and preview of embedded videos
• platform supported: Youtube and Vimeo

Complete Demo

That’s all there is to it. You just cut off a second or two off your Google Page Speed Insights score.

Thanks…