Lazy loading

How native lazy loading works

The loading attribute takes eager, the default, or lazy. With lazy, the browser decides how close to the viewport an element must be before fetching it, and that distance varies between browsers. Major browsers support it on iframes as well as images. Before the attribute existed, sites did the same job with JavaScript that watched the scroll position.

Lazy loading changes when something downloads, not how much. Once a visitor scrolls down, the full embed still loads, so showing fewer items is what reduces the total.

When not to lazy load

• Images or frames visible as soon as the page opens. web.dev advises against lazy loading anything likely to be in the first viewport, especially the largest image, because it can arrive later than it would have.
• Tiny elements where the saving doesn't matter.
• Images without width and height, unless you add them; otherwise late arrivals push content around.

Lazy loading and embeds

Third-party embeds below the fold are the best candidates. web.dev's examples include video and social embeds that each pull in roughly 100 to 500 kilobytes, none of which a visitor needs until they scroll that far.

Both LinkedInEmbed snippets load the widget lazily: the iframe snippet includes loading="lazy", and the script sets it on the frame it creates. A widget placed at the very top of a page loads straight away anyway, since it's already in view. Wherever it sits, give the area a sensible height so the page doesn't jump when it fills in; see Cumulative Layout Shift. On a page with several embeds, lazy loading also stops them all competing for bandwidth at once.