Lazy Loading

Sitecheck Team

A technique that defers loading of non-critical resources (images, scripts, iframes) until they are needed, typically when they scroll into view.

Lazy loading delays the download of off-screen resources until the user scrolls near them. The native HTML approach uses the loading="lazy" attribute on <img> and <iframe> elements and is supported in all modern browsers.

Why it matters: Images are typically the largest assets on a page. Loading all of them upfront wastes bandwidth for content the user may never see, directly hurting LCP and TTFB for users on slow connections.

Quick tips:

  • Never lazy-load the hero/above-the-fold image — it will delay LCP.
  • Add explicit width and height attributes to images to prevent CLS.
  • For JavaScript-heavy SPAs, also consider route-level code splitting as a complementary technique.

See also: Core Web Vitals, LCP, CLS.