Check your images for lazy loading

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

For each below-fold image, SiteCurl checks if it has the loading="lazy" prop. Images missing this prop load right away when the page opens, even though the user has not scrolled to them yet.

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

When a browser loads a page, it gets each image it finds in the HTML. If your page has 20 images and only 3 are visible without scrolling, the browser still gets all 20 at once. Those 17 hidden images fight for bandwidth with the content the user can see.

Lazy loading changes this. The loading="lazy" prop tells the browser to skip an image until the user is close to scrolling it into view. The browser handles the timing on its own. When the user scrolls down, the image starts loading just before it enters the viewport.

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

The effect depends on how many images are below the fold. A long blog post with 15 inline images gains a lot. A short landing page with 2 images sees less change. But even a small cut in initial load size helps on slow links.

First load speed sets whether users stay or leave. If the browser is busy getting 15 images the user cannot see, it has less bandwidth for the content they are looking at. The hero image, the first text block, and the nav bar all load slower because they share bandwidth with hidden images.

Lazy loading directly lifts Largest Contentful Paint (LCP), one of Google's Core Web Vitals. By pushing off-screen images to later, the browser can paint the visible content faster. This helps both user feel and search rankings.

Bandwidth savings matter for mobile users on metered plans. If a user reads only the first section and leaves, they got images they never saw. Lazy loading means they only get what they see on screen.

Content sites and blogs gain 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 first view with no visual change.

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

Portfolio sites and galleries with large image files see big gains. A photo page with twenty 500 KB images loads 10 MB up front without lazy loading. With it, the first load might be 1.5 MB, with the rest loading as the user scrolls.

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

Step 2: Add loading="lazy" to below-fold images. For each image below the first visible area, add the prop: <img src="photo.jpg" loading="lazy" alt="Text here">. This one prop tells the browser to hold off on the download.

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

Step 4: Check your CMS settings. WordPress 5.5+ adds loading="lazy" to images on its own. 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 for all images.

Step 5: Pair with width and height. Lazy-loaded images still need width and height props. Without them, the browser cannot hold 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 users see. Adding loading="lazy" to it delays its display, raising LCP. Always let above-fold images load right away.

Lazy-loading all images via a script. Some JS lazy-loading tools grab all images, including above-fold ones. Native loading="lazy" is simpler and lets you control which images are held back per tag.

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

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

After adding the prop, run a new SiteCurl scan. The lazy loading finding should show zero below-fold images missing the prop. You can also check in your browser: right-click an image, select 'Inspect,' and confirm that loading="lazy" is 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 show. Scroll down slowly and watch new image requests show 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.