Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

What loading=lazy Does: Browser Lazy Loading

DEV Community·Ashish Kumar·25 days ago
#mtIqBtTF
Reading 0:00
15s threshold

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.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More