Performance
Lazy loading
Lazy loading is waiting to fetch an image or iframe until it is about to be seen. It saves bandwidth for content below the fold.
How it is measured
Add `loading="lazy"` to images and iframes. The browser uses a distance threshold from the viewport. Check in the Network panel that below-the-fold images start after scrolling.
It reduces initial bytes and requests. Too aggressive a setup delays images that appear right after a scroll and can cause blank gaps or layout shifts if dimensions are missing.
Worked example
A gallery page has 40 images at 90 KB each. Eagerly loaded it transfers 3.6 MB and finishes at 5,800 ms on slow 4G. With lazy loading only the first 4 load up front, 360 KB, and load completes at 2,100 ms. The user's scroll then fetches the others in time.
The first image was accidentally lazy and LCP rose from 1,900 ms to 2,950 ms until it was set to eager.
How it differs
Lazy loading defers. Eager loading fetches at once. Responsive images pick the right size. Lazy decides when to load and responsive images decide which file to load.
Common errors
Lazy loading the LCP image. Omitting width and height and causing shifts. Lazy loading things right under the fold. Relying on JavaScript lazy loaders when native works. Forgetting to lazy load iframes like videos.
In practice
Add native lazy loading to everything below the first screen. Keep the first image or two eager and test on a throttled profile.