Newnessimworks.com
Glossary · Performance

Lazy loading

Deferring the load of resources until they're needed — typically images and iframes below the fold.

Definition

In long form.

Native lazy loading is built into modern browsers via the `loading="lazy"` attribute on `<img>` and `<iframe>` elements. The browser delays loading until the element is near the viewport. For above-the-fold images (especially the LCP image), use `loading="eager"` and consider preloading. Lazy loading components (not just media) is handled at the framework level — React.lazy, Vue's defineAsyncComponent. Over-aggressive lazy loading on critical images hurts LCP.

In context

Default `loading="lazy"` on every image except the hero / above-the-fold ones. The hero image gets `priority` (Next.js Image component) which both eager-loads and adds a `<link rel="preload">` for fastest LCP.

Discovery first

Talk to us about your engagement.

Discovery calls are free. Scope, timelines, and pricing are quoted after we understand what you’re solving.