Lazy Load Video on WordPress

Need to Lazy Load Video on WordPress?

Media is such an impactful strategy to make your content exciting.

Things such as images and videos can really bring what you have to say on your website to life.

The only downside in this is that media files are large and take longer to load than just text.

If you have been using WordPress for a while and have put any emphasis on speed optimization and making sure that all of your web pages load as fast as possible, you probably have heard of lazy loading.

What in the world is Lazy Loading?

Lazy loading is the process of delaying the actual loading of content until it becomes visible in the visitor’s viewport. The viewport is the area in the browser that the visitor is viewing as they scroll through your web page.

There are many WordPress plugins available that allow you to Lazy load the images within every page of your website. This means that if you have images that are further down on a web page, they will not fully load until the visitor comes into contact with that area of the page.

This process is extremely powerful in speeding up the Onload time of a URL in your website.

There are two main factors when a web page is loading in relation to the actual time it takes. This is the Onload time and the fully loaded time.

Please see the explanation below of what the difference is between each.

What is Onload Time?

Onload Time calculates the speed when the processing of the page is complete and all the resources on that particular page, such as images, CSS and other functionality have finished downloading.

Once complete, the page will then trigger window.onload to complete the speed results. Onload Time is a true representation on how fast your website will correctly load.

However, one major flaw found with Onload Time is some elements of the page load may not make it in time before the trigger event is fired, such as Javascript files, images carousels, or functionality/content is set to a time delay, so it loads in a particular order.

These variables will cause inconsistent page load times and may even falsely report your website to be faster/slower than it actually is.

What is Fully Loaded Time?

Taking what we have learnt about ‘Onload Time, ‘Fully Loaded Time’ adopts the exact same process to record page speed but will add an additional two seconds after the ‘Onload’ trigger has fired to make sure there is no further network activity. The reasoning behind this is to ensure more consistently with tests.

One possible issue with Fully Loaded Time testing is this event fires only when a page completely stops loading content, including ads and other functionality.

So, if your website has loaded before the cut-off point and still use-able, the testing tool will still wait for the entire site to stop loading data, which again could lead to inconsistent speed testing results.

Are You In Full Control Of Your Load Time?

Below is a nice simple graphic to illustrate the things that you need to account for when a website is visited and all the pieces that come together to decide how quickly it loads.

As you can see from this image above there are some things that are out of your control. For example the internet service provider speed of the person visiting your website is completely out of your control.

If you are looking to squeeze as much speed as possible out of your WordPress website you need to focus on the things that you do have control over.

WordPress Speed Optimization Things You Have Control Over

1. Hosting Environment
2. Software Updates
3. Active Theme
4. Active Plugins
5. Optimization of Content

Lets Get Back to Lazy Load Video on WordPress

So in the list above on the WordPress speed optimization things that you do have control over the last item in the list is the optimization of content.

This means ensuring that all of the content that is on your website has been optimized to load as fast as possible without changing any of the functionality or display of the content.

Let’s look at this in detail and allow us to show you the difference in speed from a video that has been traditionally embedded as most people do on their website and a video that has been set up to lazy load.

The Experiment Starts Here

We went ahead and created a default WordPress installation and within it to separate pages.

One page has an embedded YouTube video which was embedded using the native WordPress core embed option by simply placing the link to the YouTube video in the Gutenberg editor. This generates the embedded YouTube video on the page.

The second page is the same video but set up too lazy load which means that the actual video code will not kick in and start running until the visitor presses the play button.

Take a look below at the staggering differences between the two processes of displaying a video in your WordPress content.

Embedded Video Page Example

The below image is the speed visualization test taken at GTmetrix of the page that had the traditional YouTube video embed.

Please pay close attention to the onload time and The fully loaded time below.

The image below is the a list of processes that happened during the load of this page. Please take notice of the total amount of requests.

Lazy Load Video Page Example

The below image is the speed visualization test taken at GTmetrix of the page that had the lazy load embedded video.

Please pay close attention to the onload time and The fully loaded time below. This is less than 1 second for the onload time and comparison to the over one 1 for the traditionally embedded video.

The fully loaded time is also less than 1 second in comparison to the over 3 second fully loaded time of the traditionally embedded video.

You can see in the speed test waterfall below that there are 21 less request being called on when the page is loading because we lazy loaded the video embed.

One of the best things that you can do to speed up any webpage is by lowering the request. The more requests a page needs in order to load means that it will take longer.

The scripts and the styles needed to load the video player will still take place but not until the visitor hits the play button on the video.

This is extremely powerful because imagine if a visitor comes to your page and never even plays the video, it means you are loading resources that will never be used by the visitor.

Now You Know Lazy Load Video on WordPress is Good… WHAT NEXT?

We’ve already explained earlier that there are many WordPress plugins that allow you to lazy load the images on your website but there are not many plugins that allow you to do this for videos.

The only actual FREE plugins focused on lazy loading videos on your WordPress website is the Lazy Load for Videos plugin and a3 Lazy Load which you can learn more about by clicking on the images below.

There are some additional speed optimization plugins that do include this functionality which will allow you to lazy load YouTube videos or iFrames. See the names of these plugins below.

1. Swift Performance Pro
2. WP Rocket

Plugins Make Not Lazy Load Video on WordPress

In most cases you will be able to use one of these mentioned plugins above to lazy load video on WordPress. There are however situations where what you are trying to lazy load is not compatible with the functions of what these plugins offer.

These lazy load WordPress plugins for videos often only integrate with YouTube and Vimeo. There are many other video hosting solutions out there that you might be using.

This is where we have an alternative solution that will allow you to take any iFrame code snippet and turn it into a lazy loading masterpiece on your website.

SUPER COOL FREE Tool to Lazy Load Video on WordPress

There is a super cool easy and free to use online tool where you can take any iFrame enabled URL and set up a code snippet that will lazy load.

This toll is called IFRAMELY and the can be used for free at https://iframely.com/embed

The image below is a screenshot of the embed tool a IFRAMELY which will help you generate the embed code needed to place on your website and lazy load video on WordPress.

Just Wrapping Up

We hope that this post was useful and helping you understand the speed increase that can be achieved on your WordPress website when you decide to lazy load any videos that you are using in your content.

If you have any questions about what was discussed here please feel free to comment below.