Lazy loading for videos increases the performance of your website. Normally when a user visits a page, all content is loaded in the background. Sometimes there are elements that take longer time to load and that causes the page loading to slow down. If the user does no read the whole page, a lot of content is loaded unnecessarily. With lazy loading, the content is loaded when needed, for example when the user scrolls down the page. This way the pages requires less initial loading time, the initial data transfered is lower and therefore your page speed increases.

So if you use lazy loading for your videos you speed up your website as it loads faster, you save bandwidth and increase user experience. The user can start using the web page faster.

Embedded Videos

There are different methods to load videos deferred as there are several ways to embed a video on a web page.

One way is to natively include it with the HTML video element. In this case you can use attributes directly within your code to prevent the browser from loading the video (with preload=none) and show a placeholder (with poster=small-image.jpg) instead.

If you host your videos on a video platform like YouTube or Vimeo, you use an iframe for embedding. The method is similar that you provide a placeholder (with src=) for loading and link to the original source (with data-src=) only.

Test your performance

If you consider to use lazy loading for your videos, have a look at your performance before and afterwards. For example with Pingdom or GTmetrix.

Video Lazy Loading Plugin for Joomla!

If you have a Joomla! website, you can enable lazy loading for your videos embedded from Vimeo or YouTube with just one click with the plugin Aimy Video Embedder (in the PRO version).

Enable Lazy Loading for Videos

This way all videos embedded with the plugin are loaded on demand only.

Hint on the combination of lazy loading and GDPR-friendly embedding: if you use the GDPR-friendly embedding, lazy loading is not necessary as the video is loaded on user interaction only. Previously a placeholder image or text is loaded.