Responsive Lazy Loaded Video

TLDR: Pageload speed is decent with no lazy loading applied, though the mobile view is slower, as expected. Using the YALL Lazy Loading script, performance increased significantly, with almost perfect PageSpeed Insights score. SiteSell Lazy Loading script scored no better than using nothing at all, due to a difference in the threshold setting. That threshold has now been adjusted, and the SiteSell Lazy Load performs every bit as good as YALL.

At the bottom of this page is an embedded Youtube video (I hope you like "The George Baker Selection") There are also 3 images on the page, along with a small amount of accompanying text, and a conclusion at the foot of the page.

The page has been tested using the Pagespeed Insights testing tool, to see how it performs with loading the video and images. The first test is done with no form of lazy loading applied. This gaves a baseline with which to compared two different lazy Loading scripts.

The first of these Lazy Loaders is YALL, and with that we also use a polyfill to get IE10 and 11 behaving properly.

The second of the Lazy Loaders is the Sitesell one, which is applied by enabling it from Site Central. Results were not what I expected.

Note that during the testing, I removed the header and main navigation include tags. The conditions were the same for all 3 tests, and each test was run multiple times to account for variations. The header and navigation have since been put back into place. This was done to avoid fluctuation in http request times to places such as google custom search.

Pagespeed Insights Results, No Lazy Loading Enabled

First test is with nothing done at all to the video or 3 images. The page is not using any form of lazy Loading. Speed is good with desktop view, and slower in mobile, as expected. Still a decent mobile score considering the video, and there is very little apparent lag to view that, both on laptop and phone.

Pagespeed Insights Results, YALL Lazy Loading Enabled

Speed significantly increased to almost a perfect score, bothe for desktop and mobile. Video appears to load faster and be watchable earlier.

Pagespeed Insights Results, SITESELL Lazy Loading Enabled

YALL was disabled, and script tags related to YALL in the head section were removed. Lazy Load for video and images was turned on, and the page retested. Video and images were checked that they had width and height attributes (required for the lazy loading to take effect).

Once I could see in the source that class="ss-lazy" was being applied to the video and images, the insights test was repeated. Multiple times. And every time, the score was little different than if no Lazy Load had been used. I found this surprising, although visiually, there appeared little difference in load time compared to YALL. Something seemed to be amiss.

Why SiteSell Lazy Load Appeared Slower: This was tracked down to a difference in the threshold settings. Put simply, the testing software didn't detect it, so think of this as throwing a false positive. The Lazy Loading was actually working fine and loading the page every bit as quickly as YALL, it just wasn't been "seen" by the testing software.

This has since been corrected, and SiteSell Lazy Loading now returns numbers every bit as good as YALL.

Video Below

The video has two classes applied to the containing section, video-wrapper and video-container. This is to make the video responsive. This will work on any video contained within an iframe. Youtube, Vimeo, etc. Try reducing your browser window (if you are viewing on a desktop sized screen) to see how the video reduces in size, and maintains the corect aspect ratio.

Conclusion

Initial results for the Sitesell Lazy Loading were unexpected. My hope had been that I would see little difference between the YALL and Sitesell Lazy Loading methods. I wanted to be able to say, "just use the Sitesell one as all you have to do is set and forget". Thankfully, that is the case, now that the threshold has been adjusted.

I repeated these tests more than once, deleted pages, started again numerous times, to see if there was something I had overlooked. I have spoken to the programmers at Sitesell, and we have done testing and found the issue.

Without being too technical, it is related to the threshhold mark at which the script begins to work. With YALL, it is a higher threshold, it kicks in earlier meaning the speed testing software sees the page load differently. In plain English, SSLL isn't "seen" by the testing tools, even though the page and videos load just as fast. I believe Sitesell have now adjusted this so that people can get a better comparison.

In other words... both Lazy Loading scripts work as they are supposed to, and improve pageload performance. Think of it as the SSL throwing up a false positive!