😴

How to Test Lazy-Loading of Images

When you load a website, by default everything that's referenced in the site's HTML is immediately requested, unless you explicitly state otherwise.

This means that if you have an image in your markup, it doesn't matter where it is on the page, it will immediately be loaded. That big JPG at the bottom of the page showing your entire company at the yearly retreat? It's going to load as soon as the page is requested, and the page won't be "Finished" and fully interactive until it's done.

From a performance standpoint, this isn't ideal. You want the page to be super fast, and so you don't really want to load images that the user can't see yet.

Lazy Loading is a solution for this problem. Images get requested shortly before they appear on-screen. Essentially, you set a tolerance level, and the site requests the image when the user scrolls close enough.

Testing to see whether Lazy Loading of images is working or not CAN be tough, depending on the tolerances. If your tolerance is HIGH (which means you load EARLIER, or at a GREATER distance from the image), images will load in before you notice, do the act of scrolling down doesn't help.

The video above demonstrates how to use Chrome's Network Panel in Developer Tools in order to test whether the images are being requested after the page finishes loading.