DEV Community

Cover image for Faster Vue App page load by lazy loading youtube and Vimeo embed
Seerat Awan
Seerat Awan

Posted on

2 1 1 1 1

Faster Vue App page load by lazy loading youtube and Vimeo embed

The goal is to embed YouTube/Vimeo videos on your Vue web page in a fast, lightweight manner that cuts 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.

Solution: Vue-Lazytube

With Vue-Lazytube you can embed a YouTube or Vimeo player easily and lazy load the video to save resources and reduces initial load size. Useful when performance and page size is important or for sites with many embedded videos.

For a simple example page with 10 videos, vue-lazytube will reduce loadtime by 7x and memory usage by 2-3x.

Features

  • 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

Check out the demo below:

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

Thanks…

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay