Check your images for lazy loading

SiteCurl looks at every image on your page and separates above-fold images from below-fold ones. The first 3 images are treated as above the fold (hero images, logos, banners). Every image after that is considered below the fold.

For each below-fold image, SiteCurl checks if it has the loading="lazy" attribute. Images missing this attribute download immediately when the page loads, even though the visitor has not scrolled to them yet.

The check shows how many below-fold images could use lazy loading and lists up to 5 example URLs. On a full scan of 50 pages, this covers images across your entire site.

When a browser loads a page, it downloads every image it finds in the HTML. If your page has 20 images and only 3 are visible without scrolling, the browser still downloads all 20 at once. Those 17 hidden images compete for bandwidth with the content the visitor actually sees.

Lazy loading changes this. The loading="lazy" attribute tells the browser to skip an image until the visitor is close to scrolling it into view. The browser handles the timing automatically. When the visitor scrolls down, the image starts downloading just before it enters the visible area.

This is a native browser feature. No JavaScript library needed. It works in all modern browsers. One attribute per image tag. The browser does the rest.

The impact depends on how many images are below the fold. A long blog post with 15 inline images benefits significantly. A short landing page with 2 images sees less difference. But even a small reduction in initial download size helps on slow connections.

Initial page load speed determines whether visitors stay or leave. If the browser is busy downloading 15 images the visitor cannot see, it has less bandwidth for the content they are looking at. The hero image, the first section of text, and the navigation bar all load slower because they share bandwidth with hidden images.

Lazy loading directly improves Largest Contentful Paint (LCP), one of Google's Core Web Vitals. By deferring off-screen images, the browser can paint the visible content faster. This affects both user experience and search rankings.

Bandwidth savings matter for mobile visitors on metered connections. If a visitor reads only the first section of your page and leaves, they downloaded images they never saw. Lazy loading means they only download what they actually view.

Content sites and blogs benefit the most. Articles with 5-15 inline images are common, and most of those images are below the fold. Adding loading="lazy" to each one speeds up the initial view without any visual change.

E-commerce category pages with grids of product images are another strong case. A page showing 24 products in a grid has maybe 6-8 visible at once. The other 16-18 images download for free when lazy loading is active.

Portfolio sites and galleries with large image files see dramatic improvements. A photographer's page with twenty 500 KB images loads 10 MB upfront without lazy loading. With it, the initial load might be 1.5 MB, with the rest loading as the visitor scrolls.

Step 1: Identify below-fold images. Run a SiteCurl scan to see how many images are missing lazy loading. The finding lists example image URLs so you know which files to target.

Step 2: Add loading="lazy" to below-fold images. For each image that appears below the initial visible area, add the attribute: <img src="photo.jpg" loading="lazy" alt="Description">. This one attribute tells the browser to defer the download.

Step 3: Do NOT lazy-load above-fold images. Your hero image, logo, and any images visible without scrolling should load immediately. Adding loading="lazy" to these would delay them, making the page feel slower. Leave the first 3-5 images without the lazy attribute.

Step 4: Check your CMS settings. WordPress 5.5+ adds loading="lazy" to images automatically. Shopify themes vary. If your CMS does not add it, you may need to update your theme template or add a plugin that handles it globally.

Step 5: Combine with width and height. Lazy-loaded images still need width and height attributes. Without them, the browser cannot reserve the right amount of space, which causes layout shift when the image finally loads.

Lazy-loading the hero image. The hero image is the first thing visitors see. Adding loading="lazy" to it delays its display, increasing Largest Contentful Paint. Always let above-fold images load immediately.

Lazy-loading all images via a script. Some JavaScript lazy-loading libraries intercept all images, including above-fold ones. Native loading="lazy" is simpler and lets you control which images are deferred per tag.

Missing dimensions on lazy-loaded images. Without width and height, the browser shows a collapsed space where the image will go. When the image loads, the page jumps. Always pair loading="lazy" with explicit dimensions.

Using lazy loading on a page with only 2-3 images. If all images are above the fold, lazy loading has no benefit. SiteCurl only flags images after the first 3, so a page with fewer than 4 images will not trigger this check.

After adding the attribute, run another SiteCurl scan. The lazy loading finding should show zero below-fold images missing the attribute. You can also check in your browser: right-click an image, select 'Inspect,' and verify that loading="lazy" is present in the HTML tag.

To see the effect, open Chrome dev tools, go to the Network tab, filter by 'Img,' and reload the page. Only the first few images should appear. Scroll down slowly and watch new image requests appear as you reach each section.

Native lazy loading is one attribute per image tag. It defers downloads for images the visitor has not scrolled to yet, freeing up bandwidth for the content they are actually looking at. Add loading="lazy" to every image below the fold and leave above-fold images alone.