This post is to test the lazy loading of iFrames, as noted in this blog post from David Walsh.
I’m first going to just embed a video without the lazy loading:
To make this work, I’m using a HTML block in the WordPress editor so that I can put in the exact iframe copied from YouTube.
Next I’m going to run a couple of speed tests on this published post.
Then, I’ll come back and add ‘loading=”lazy”‘ into the iFrame code and repeat the tests. Let’s see what we learn!
Conclusion
My first lesson was that an IFRAME from YouTube really doesn’t load much in by default. Just a very small web player, image, etc. This makes sense. The larger video is only loaded when the user hits this play icon.
So, in this instance, the lazy loading doesn’t really save that much at all. This would be far more effective with an IFRAME that loaded in a large object of some form.
That said, I did see a very small difference in the before and after tests.
Using WebPageTest.org, the before (i.e. non-lazy-loading) test had a Largest Contentful Paint (LCP) of 1.279 seconds and a total time of 3.034 s.
The test after the change had a LCP of 1.212 s and total time of 3.003 s.
That change is TOO tiny to really be sure it was a result of the lazy loading. It could, quite honestly, be related to latency or the speed of the test platform.
BUT… I also did tests with Firefox’s Developer Tools (the network inspector) on my local system and similarly saw a very small difference between the results before and after.
So it’s something I’ll try to remember when I’m using iframes to embed content from other sites. In other instances, it may make more of a difference.