Speed Up WordPress With Lazy Load for Videos

Embedded content with external requests can really slow a site down. This is especially true when the requests cannot be cached and the content would be impossible to host on your own domain, i.e. third party videos from Youtube and Vimeo. Calling external resources in these instances is unavoidable, but it doesn’t have to drag down your PageSpeed score.

Lazy Load for Videos is a plugin created by WordPress developer Kevin Weber to speed up sites that rely heavily on video content. You’ve probably already seen lazy loading for images, where you scroll down the page and the image appears as soon as it’s needed. Weber brings this concept to video loading.

Instead of loading up all the videos on your site, the plugin replaces Youtube and Vimeo embeds with a clickable preview image. Videos are only loaded when the visitor clicks on the image to play the video. The plugin uses jQuery to lazy load the videos, so no extra JavaScript is necessary. You can check out a live demo on the plugin’s homepage.

Weber conducted a speed test using the Network Panel in Chrome DevTools, which records the time of each requested resource. This image shows files that are loaded when the plugin is not in use and one Youtube video is embedded.

The image below shows files that are loaded when the plugin is in use and one Youtube video is embedded:

A quick comparison demonstrates a 50% reduction in the size of the requested resources and the latency, with nearly two seconds shaved off the load time. This represents the improvement for just one embedded video. You can imagine the savings on a video gallery where the site has to load YouTube’s scripts for each video on the page.

“I started to develop Lazy Load for Videos to improve page speed,” Weber told the Tavern. Over time, he began to add options for customizing the player styles. “Those new features were originated by the demands of the plugin’s users,” he said. They currently include:

• Display video titles on preview images
• Add Custom CSS via plugin’s options panel
• Hide controls from Youtube player
• Support for videos in text widget (Youtube only)
• Choose thumbnail size (standard or cover)
• Choose between two colors for Youtube player (dark or light)
• Choose between two colors for Youtube player’s video progress bar to highlight the amount of the video that the viewer has already seen (red or white)
• Disable related videos at the end of videos

In the future, Weber plans to include options to customize the Vimeo player styles. He will also be adding a CSS-only play button to further improve page speed in one of the next updates. Other user suggestions for future improvements that are currently under consideration include the option to choose between several “play” buttons, upload your own “play button, and the option to add video preview images to feeds.

Not only does the plugin speed up your site, it also provides a host of customization options for fine-tuning your video display. If you have a site that relies heavily on embedded Youtube or Vimeo content, download the Lazy Load for Videos plugin from WordPress.org to see if you can boost your site’s performance.