Do you regularly embed videos in your blog posts? Have you ever checked the loading time of a post with an embed video and one without it?
Once you do the comparison, you will realize the fact that embedded videos increase the loading time of web pages. How can you get the normal speed no matter you embed a video or not?
Well, the answer is lazy loading. You might have implemented lazy loading for images on your blog. Here in this article, I will help you achieve the same for videos as well
Contents
How to Add Lazy Loading for Embed Videos on WordPress? (Velocity Plugin Review)
Before I get into the core of this article, I want to give you an overview of how this plugin works.
How does Lazy Loading for Videos Work?
When you directly embed a YouTube video using its complete URL on WordPress, it has to render many external requests to preview and play the video. Even the image preview is hosted on YouTube’s servers. Obviously, it will increase the page loading time.
When you install Velocity Video Lazy Loading plugin, it displays an image from your server as the preview by slightly modifying the code. So, the no negative impact happens with page loading time.
How to Add Lazy Loading for Videos using Velocity Plugin?
Now that you know how it works, let us move on to the installation and the configuration of the plugin. You can follow the step- by- step process given below to do that.
Step 1: Log into your WordPress dashboard. I hope you know the exact credentials. In case you don’t, Forgot password? link is always there for you.
Step 2: Once you log into the admin panel, go to Plugins>> Add New. Whenever you have to install a plugin from the WP repository, this is where you come. Can you see a search field there?
Just search for velocity there. You don’t have to hit the Enter key as it will initiate the search right at the moment you finish typing.
Step 3: The very first option is what we want here. Hit Install and then Activate. That’s it. The installation is finished. And, you should know how to work with the plugin.
Step 4: We are going to apply lazy loading for the first time. Whenever you want to embed a video, follow Settings>> Velocity.
Step 5: First, you have to upload an image for the video preview.
Note:- You can choose a default image by accessing the Settings tab.
There’s nothing wrong in downloading the original preview image and uploading it on your server. Make sure the image is of low-size.
After uploading the image, you can change the size of the preview.
Step 6: You can display the customized play button of Velocity instead of the default YouTube button. If you enable this option, you can customize both the arrow and background color.
Step 7: The next step is selecting the service. You can choose between YouTube, Vimeo and SoundCloud.
Below the service selection option, you need to paste the video ID. If the complete URL of the image is https://www.youtube.com/watch?v=65GNAYFsIR0, the ID is 65GNAYFsIR0.
Step 8: Finally, copy the shortcode from the Shortcode Output field. You have to paste this into the WordPress post/page editor to display the video with lazy loading effect.
There you go! Once you publish or update the post with Velocity shortcode, you can see the embed video as following.
Alternative Way
You can directly enable lazy loading for videos from the post editor. When you edit a post or a page, you can see a green Velocity icon to the rightmost part of the toolbar. Just click on the same to get the similar screen after Step 4.
Wrapping Up
You may not notice the speed boost if you don’t use multiple embed videos on your site. I strongly recommend you install this plugin in case yours is a video blog. The only con I found is it doesn’t allow bulk shorcodes generation.
Don’t forget to drop your views in the comment section below. I hope you will share this article with your blogger friends. They will thank you later for doing so.
