Definition
Lazy loading is a performance optimisation technique that defers the loading of non-critical resources — typically images, videos, iframes, or below-the-fold content — until they are about to enter the viewport, reducing initial page weight and improving perceived load speed.
Lazy loading is a small change with outsized impact on performance: by deferring images that are below the fold, the initial page payload drops dramatically — sometimes from 5MB to under 500KB — and the user gets to interactive content faster. Modern browsers support lazy-loading natively via the loading="lazy" attribute on img/iframe, removing the need for JavaScript libraries.
The trap with lazy loading is over-applying it. The hero image, the LCP element, anything above the fold — these must load eagerly. Lazy-loading the wrong element doesn't speed up the page; it makes the user wait for the most important content to appear.
Origin
Lazy loading patterns date to the late 2000s on JavaScript-heavy sites. Native browser support (loading="lazy") shipped in Chrome 76 (2019) and was widely available across browsers by 2021.
How it works
- Identify which resources are below the fold on each page.
- Add loading="lazy" to those img/iframe elements.
- Verify the LCP element is NOT lazy-loaded (must be eager).
- Test on real-device conditions to confirm the perceived load improves.
- Consider lazy-loading for heavy components (carousels, maps, video players).
When to use it
Use when
- On any page with images or videos below the fold.
- On pages with heavy third-party embeds.
- For long content pages (blog posts, product galleries).
Skip when
- For the LCP element and other above-the-fold critical content.
- For short pages where everything fits in one viewport.
Key metrics
- LCP impact (should improve)
- Total page weight reduction
- Time to interactive
- Data saved (especially for mobile users)
Examples
- We added loading="lazy" to 40 images on the long landing page; total payload dropped from 4.2MB to 380KB.
- Lazy-loading the iframe embeds cut page weight in half without any user-visible change.
- We accidentally lazy-loaded the hero image and LCP tanked. Easy fix once we caught it.
In practice at Makreate
Makreate's website-build process bakes lazy-loading into the default template — every image below the fold gets loading="lazy" attached automatically, every above-the-fold image is explicitly excluded, and the LCP element is verified eager on every page. The result is consistent sub-2.5s LCP performance across the build, without per-page manual optimisation work.
Website Development →Common mistakes
- Lazy-loading the LCP element.
- Lazy-loading above-the-fold images.
- Using JavaScript libraries for lazy loading when browser-native attribute works.
- Forgetting to test lazy-loading on real device conditions.
- Not setting a fallback for browsers without lazy-load support.
Frequently asked
Is lazy loading supported in all browsers?
Native loading="lazy" is supported in all modern browsers (Chrome, Firefox, Safari, Edge). Older browsers ignore the attribute gracefully — the image just loads normally.
Does lazy loading hurt SEO?
Properly implemented, no — Google crawls lazy-loaded images via Intersection Observer simulation. Improperly implemented (requiring scroll events to fire), yes.
Should I lazy-load videos?
Yes — video and iframe lazy-loading is one of the highest-ROI optimisations on content-heavy pages.