Lazy Loading
In one sentence
Deferring the load of images or content until they are close to the viewport.
Analogy Mental model
Serving courses one at a time rather than putting everything on the table at once. What you are eating arrives hot.
In practice What you actually do
Native loading lazy on images below the fold, and nothing on the hero, because deferring the element that defines LCP makes the metric worse. Reserve space with an aspect ratio so the layout does not jump when the image arrives.
Where people get burned Pitfalls
Lazy-loading everything is the mistake, including the first screen. The browser then has to observe the viewport before it can begin fetching what the visitor is already looking at.
This entry was written in English from the Chinese original, not machine-translated. Read the Chinese version →