Many web developers over the past few years have utilized Lazy Load JavaScripts to make pages load faster. This delays the loading of images until they appear in the viewport of the browser — and it's a great way to improve the performance of any web page that uses images.

When used correctly, it works great!

By "correctly" we mean, use it for images that appear below the fold! ...that's the area of a page that you don't see until you start scrolling down.

While it's true that the area below the fold can vary depending on the viewport size (i.e., Desktop/Tablet/Mobile), that's the general guideline for whether to use it or not.

When Lazy Load is used correctly – either by manual selection or specific designated classes of images that will be used below the fold — it typically accounts for a big improvement in page-load times. And, as we all know, the speedier the site, the better.

Lazy Loading is most impactful when there are multiple images below the fold. The more images there are, the bigger your improvements in page speed.

When Lazy Loading Goes Wrong

While working on several different WordPress WooCommerce sites to optimize their product page Core Web Vitals (CWV) scores, we started noticing a problem. PageSpeed Insights was giving us a poor score on LCP (Largest Contentful Paint), with the following report.