What is lazy loading?

Lazy loading: definition and purpose

A web page with many images traditionally loads everything at once, including what visitors only see after a long scroll, or never. With lazy loading, these elements are held back and only fetched when they are about to become visible. The page becomes usable faster, and especially on smartphones the amount of data transferred drops.

The opposite is immediate loading (eager loading). For everything visible when the page opens, it remains the right choice, because every millisecond counts there. Lazy loading therefore only works for content outside the first screen or for content that appears only on demand, for example in tabs.

How lazy loading works

For images and iframes, the HTML attribute loading=lazy is enough. All common browsers support it, and no additional script is needed. The browser decides on its own when to start loading, and it begins slightly before the element becomes visible so that visitors barely notice a delay.

In addition, there are JavaScript solutions based on the IntersectionObserver that also load maps, videos, or entire components later. To prevent content from jumping, the width and height of elements must be set in advance; otherwise the content shifts during loading and the layout stability score gets worse.

• Images below the visible area, such as galleries, teasers, footers
• Embedded videos and maps (iframes)
• Long lists and product grids that load more as you scroll
• Do not defer: the hero image in the visible area and the logo

Real-world example: a tile setter's reference page

A tile setter shows eighty large-format photos on the reference page. When the page opens, the browser loads all images at once, which takes time on mobile networks and uses up data. With lazy loading, only the first images appear at first, and the rest follow as the visitor scrolls.

At first, the large hero image was deferred as well, which actually made the page feel slower. Only when it was loaded immediately and also prioritized (fetchpriority=high) did the Largest Contentful Paint, the load time of the largest visible element, improve. The exception for the hero image is therefore just as important as deferring the other images.

Benefits, limits, and common mistakes

Lazy loading reduces load time, data usage, and server load. It does not help against files that are too large, though: images should also be compressed and delivered in modern formats such as WebP or AVIF. For search engines, lazily loaded content must become visible without a click, which the native attribute and the IntersectionObserver both satisfy.

• Hero image (LCP element) loaded lazily: makes load time worse
• Missing width and height attributes: the page jumps when content loads
• Important text loaded only after a click
• Loading too late: images visibly lag while scrolling

Imple­menta­tion

Modern themes and frameworks apply lazy loading partly automatically, but the rule should be checked: visible areas immediately, everything else deferred. Nano Concepts applies it as part of page speed optimization, sets placeholder sizes, and verifies the effect using Core Web Vitals.