Lazy Loading Video Player: Live & Ready to Speed Up Your Site!

We’re excited to announce that as of today, the Mediavine Video Player features automatic, built-in lazy loading for both existing and future video embeds!

What is Lazy Loading?

You’ve likely heard us talk about lazy loading — the concept of only loading objects on web pages when you need them — quite often in the past.

In the case of the Mediavine video player, this practice means that we now only load the video player and video files as they scroll into view.

This is very similar to the lazy loading we’ve utilized in our ad technology for years, and is a great complement to our Optimize Ads for Mobile PageSpeed and Optimize Ads for Desktop Pagespeed settings when it comes to Mediavine sites attaining the highest pagespeed scores on the Internet.

Haven’t We Always Used Lazy Loading For Video?

Mediavine actually has always supported lazy loading of video files, taking advantage of the built-in HTML5 video feature of preloading via the preload attribute.

However, with increasing popularity of autoplay and scroll-to-play, in which videos load on every page view, the lazy loading of video files meant less and less.

Our solution? We knew we needed to take things one step further, so now we aren’t just lazy loading the video files, but lazy loading the player itself.

Why is This Exciting? You Guessed it, Page Speed.

As we continue to add more exciting video features — the newest codecs, video themes, custom experiences like the mobile and desktop autoplay video player, Up Next, etc. — the Mediavine video player itself continues to grow in both size and complexity.

Put another way, the player was potentially slowing down sites, even when not serving videos, a problem that became clear with the new Page Speed Insights move to Lighthouse.

Now, thanks to lazy loading, if you place your video below the fold, or the first screen view, it won’t load any files or the player until a user scrolls the video into view.

The takeaway: Videos below the fold, which weren’t previously benefiting from lazy loading, should have little or NO impact on Google PageSpeed Insights and similar page speed tests!

How Do I Take Advantage of Lazy Loading?

The easiest way: If your video appears after the first screen view, or below the fold, then you’re automatically taking advantage of this new feature!

For new videos, or existing ones that aren’t below the fold: If you’re manually placing either embed code or inserting video in your post via the Mediavine Control Panel, just insert them after enough paragraphs or images so the video renders below the fold on most devices.

Site layouts, screens and devices differ, so be sure and browse your site to verify.

Again, you’ll want to verify this on a few posts using this feature.

One thing to note: We don’t recommend lazy loading iFrames or video via your own lazy loading plugins. This can have a big impact on performance.

Good luck!