Add lazy loading to off-screen images
One HTML attribute stops below-the-fold images from delaying the page.
What it means
By default browsers download every image on the page, even ones far below the visible screen. Lazy loading tells the browser to wait until the visitor scrolls near an image.
Why it matters
Every image downloaded before the page can render delays what the visitor actually came to see. Lazy loading off-screen images is a one-line change per image with zero visual downside.
How to fix it
- Add loading="lazy" to every <img> tag that appears below the first screen.
- Do NOT lazy-load your hero/LCP image — that one should get fetchpriority="high" instead (see our LCP guide).
- On WordPress, most caching/optimisation plugins can add lazy loading site-wide in one setting (native browser lazy loading, not JavaScript-based).
- Re-run your audit to confirm the image weight on initial load dropped.
Helpful tools
- PageSpeed Insights
Not sure if this affects your site? Analyze your website for free or compare it with a competitor.
Related guides
- Fix slow Largest Contentful Paint (LCP): Make the biggest visible element on your page load in under 2.5 seconds.
- Stop layout shifting (CLS): Reserve space for images and embeds so the page stops jumping while loading.
- Reduce Total Blocking Time (TBT): Break up long JavaScript tasks so the page stays responsive to taps and clicks.
- Improve mobile page performance: Cut image weight, JavaScript, and server lag so the page loads fast on phones.