Lazy loading
TL;DR
Lazy loading is the technique where images, iframes or scripts only load once they're about to appear in the viewport, speeding up initial page load.
Lazy loading reduces initial load time by deferring below-the-fold elements until they become relevant. The native loading="lazy" attribute on img and iframe works in all modern browsers. Correctly applied, lazy loading meaningfully improves both LCP and mobile data usage.
Example
A recipe blog with 40 photos per article previously eager-loaded everything. With loading="lazy" on all images except the first, average LCP drops from 4.1s to 2.2s.
Frequently asked questions
Lazy loading on the LCP element?
Never. The largest visible element must be available immediately. Lazy loading on LCP makes your score worse.
Related terms
Further reading
- → Our service: SEO