Related: Images, Fonts, and Third-Party Scripts: LCP and CLS Killers covers the full image performance picture including format selection and preloading strategies.

If you have ever added loading="lazy" to an image tag without knowing exactly what it does, you are not alone. Most developers copy it from tutorials and move on. But there is a specific reason Google added it to the HTML spec, there is a specific mechanism that makes it work, and there are two situations where using it will actively hurt your performance scores instead of helping them.

What this covers: Where the browser's default image loading behavior falls short, what Google found in their 2019 profiling study, how the browser calculates when to start fetching a lazy image, and the two cases where loading="lazy" should never appear.

Why this attribute exists at all

Before loading="lazy" was part of the HTML spec, developers who wanted to defer offscreen image loads had to write JavaScript.…