Lazy loading is supposed to speed things up — don’t load images until they’re about to scroll into view. But teams sometimes turn it on and the site feels worse, not better. The page flickers, images pop in late, and the hero takes longer than before. Lazy loading didn’t fail; it was applied to the wrong things.
Never lazy-load the hero
The most common mistake is lazy loading above-the-fold images, especially the hero. That image is visible immediately, so deferring it just delays your Largest Contentful Paint. The first screen of content should never be lazy loaded — only images below the fold benefit.
Use the native attribute, not a heavy script
The browser already does this with native loading="lazy" — it’s built in and free. A heavy JavaScript lazy-load library on top of it adds work and causes the pop-in flicker, because images only start loading after the script runs.
Third, lazy loading without reserved space causes layout shift. If the image has no dimensions, content jumps when it finally loads.
The rule is narrow: use native loading="lazy", exclude anything in the first viewport, and always set dimensions. Done right, lazy loading cuts the initial payload without anyone noticing. Done wrong, it trades a small bandwidth saving for a visibly worse load.