Lazy Loading

Images and <iframe> elements consume significant bandwidth and processing power. Deferring the loading of these off-screen elements (lazy loading) frees up bandwidth for critical assets, improving performance metrics like Largest Contentful Paint (LCP) for images and Interaction to Next Paint (INP) for iframes.

1. Native Lazy Loading with the loading Attribute

Modern browsers natively support lazy loading using the loading attribute on <img> and <iframe> elements. It accepts two primary values:

• eager: Loads the resource immediately (the default browser behavior).
• lazy: Defers loading until the resource reaches a specific, browser-calculated distance from the visible viewport.

Note for <picture> elements: The loading="lazy" attribute must be placed on the child <img> tag, not the <picture> container.

2. When NOT to Lazy Load

You should never lazy load elements that are likely to appear in the initial viewport (above the fold), such as hero images or top-of-page elements.

• The LCP Cost: Lazy-loaded images must wait for the browser to finish downloading and parsing all CSS to compute the page layout and determine if the image is in the viewport.
  Applying loading="lazy" to a visible image delays its fetch, harming LCP performance.

3. Lazy Loading <iframe> Elements

Iframes are full HTML documents that pull in their own heavy subresources (especially JavaScript), which can bottleneck the main page thread and hurt interaction responsiveness.

• Common Use Cases: Third-party embeds like social media plugins or embedded video players.
• Impact: Lazy loading a YouTube embed saves over 500 KiB of initial data; a Facebook Like button saves over 200 KiB.

4. Using Facades for Heavy Embeds

For interactive elements like video players (YouTube, Vimeo) or chat widgets, a facade is highly effective.

• Instead of loading the iframe instantly, you display a lightweight static image or a fake button that mimics the widget.
• The actual heavy iframe is only requested and swapped in once the user intentionally interacts with it (e.g., clicks "Play" or hovers over the chat icon).
• Popular open-source tools for this include "lite-youtube-embed" and "React Live Chat Loader".

5. JavaScript-Based Lazy Loading Libraries

Because native browser lazy loading is restricted to <img> and <iframe>, you must use JavaScript libraries (like lazysizes or yall.js) to lazy load unsupported elements:

• Use Cases: CSS background images, <video> elements, and video poster images.
• How They Work: These libraries leverage the Intersection Observer API to detect when an element approaches the viewport, then swap a temporary data attribute (like data-src) into the standard src attribute to trigger the network request.
  This is particularly useful for replacing large animated GIFs with lazy-loaded, muted autoplaying videos.