How to Easily Add Lazy Loading for Videos in WordPress
Videos are great for improving user engagement on your website. However, one downside of embedding videos is that it slows down your website. In this article, we will show you how to add lazy loading for videos in WordPress and improve your page speed.
How does Lazy Loading for Videos Work?
Wondering what exactly is lazy loading, and how does it work?
When you embed a video on your site, you add additional external scripts and files that needs to be loaded. Since there is more to load, your website loads slower.
Video lazy loading replaces the embedded Youtube and Vimeo videos with a clickable preview image. When your visitors click on the image, it loads and play the video.
Since images are a lot smaller in size than videos, the lazy loading technique significantly improve page speed.
Now that you know the advantages, let’s take a look at how to lazy load YouTube and Vimeo videos in WordPress.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
How to Add Lazy Loading for Videos in WordPress
First thing you need to do is install and activate the Lazy Load for Videos plugin.
This plugin works out of the box, and you do not need to edit any lazy loading jQuery scripts or any code for that matter.
To see that your lazy loading is working, all you need to do is view a post or page that contains a YouTube or Vimeo video. You will notice that the default players are replaced by a video thumbnail and a play button.
When you click on the image, it will load the video and play it.
There might be a slight second (negligible) delay in loading the video, so please don’t think that the lazy loading is not working.
Even though this plugin works out of the box, there are still settings which you can configure based on your needs.
On the post editor screen, you can choose the thumbnail quality for YouTube video embeds.
Aside from the thumbnail quality, there are further customization options available if you head over to Settings » Lazy Load for Videos.
On the general settings tab, you can customize the appearance of the video thumbnails. You can enable responsive mode, choose play button style, use custom CSS, and even enable schema.org markup.
This plugin supports both YouTube and Vimeo. You can find provider specific settings by clicking on the respective tabs.
On the YouTube tab, you can choose colors, thumbnail quality, disable related videos and annotations, etc. You can even disable lazy load for YouTube videos.
Similarly, on the Vimeo settings tab you can choose control colors, hide or display video title, and disable lazy load for Vimeo videos.
That’s all. We hope this article helped you add lazy load for videos in WordPress.
To further boost your website’s speed you will need to setup a WordPress CDN solution with W3 Total Cache plugin.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.
