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
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 speed 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.
Results were unexpected, and I will admit, disappointing. My hope had been that I would see little difference between the YALL and Sitesell Lazy Loading methods. I would then 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. But it seems the Sitesell Lazy Loading IS working. Or at least, the
class="ss-lazy" is being applied correctly to the tags, and the script tag is present in the footer. At the moment, I'm unable to explain why it offers no improvement over the baseline speed. I have a theory, but at the moment, that's all it is (possibly the speed testing tool running too early for the LL script to be accounted for).