No Lazy Loading
Below-fold images are loading eagerly, wasting bandwidth and slowing the page.
Quick Answer
To add lazy loading, add loading="lazy" to every <img> tag that isn't visible when the page first loads (below the fold). This tells the browser to only download those images when the user scrolls near them, saving bandwidth and speeding up the initial page load.
The Problem
Without lazy loading, the browser downloads every image on the page immediately — even ones the user can't see yet. On a page with 20 images, this can mean megabytes of unnecessary data transfer before the page is even usable.
Why It Matters
Lazy loading is a standard performance optimization that reduces initial page weight by 40-70% on image-heavy pages. Google uses Largest Contentful Paint (LCP) as a ranking signal, and eager-loading below-fold images directly hurts it.
How to Fix It
Add loading="lazy" to every <img> tag below the fold (not the hero image or above-fold content).
Keep loading="eager" (or omit the attribute) for the first 1-2 images visible on page load.
If using a CMS, look for a lazy loading plugin or theme setting.
Test by opening DevTools → Network tab and scrolling — images should load as you scroll, not all at once.
Also add width and height attributes to prevent layout shift as images load.
Want to Know Your Full Score?
This is just one issue. Our 27-point autopsy checks everything.
Don't want to fix it yourself?
Get Professional Help