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.

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 are 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

speed test
Result of speed test, with no Lazy Load for this page

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 test
Result of speed test, with YALL Lazy Load

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

speed test
Result of speed test, with SITESELL Lazy Load on the page

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, I expected it to be in the ballpark of the YALL system.

Video Below

Conclusion

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".

I have 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 will be adjusting this in the future, 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!

This article was printed from the Vision:2020 template

Print Article