content-visibility versus loading lazy for images

Two techniques both make an image-heavy page faster by deferring work on images that sit below the fold, and they are easy to confuse because they touch the same elements. They solve different bottlenecks, so the useful question is not "which one" but "what am I trying to save".

What each one does

loading="lazy" is a browser feature on <img> (and iframes) that defers the network fetch until the image approaches the viewport. Its win is bandwidth and request count: images far below the fold are not downloaded at all until the user scrolls near them. It does not change how the browser lays out or paints the document; it only delays the download and decode of the file. The lazy loading guide covers when it helps and how the browser's threshold decides the fetch.

content-visibility: auto is a CSS containment property that tells the browser to skip style, layout, and paint work for a section until it is near the viewport. Its win is rendering work on the main thread: a long page with many heavy sections spends its initial paint time recomputing layout and paint for sections nobody has reached yet, and the property skips that work. It does not by itself stop the image downloads, because an img inside still triggers a network request unless it also has loading="lazy". The content-visibility article explains the property and its intrinsic-sizing requirement.

The CLS risk in both

Either technique can introduce layout shift, because both defer work that changes the page size:

• A lazily loaded image that has no reserved dimensions pushes content down when it finally fetches, which is the layout shift covered by the image aspect ratio article. Give lazy images explicit width and height or a CSS aspect-ratio.
• A content-visibility: auto section with no contain-intrinsic-size has no reserved height while skipped, so the page height keeps changing as sections render, producing shifts. The intrinsic size hint is not optional if you want stability.

So both demand the same discipline: the element must reserve its footprint before the deferred work happens, or the deferral trades bytes and paint for a jumpy page.

Combine or choose

They are complementary rather than competing:

• Use loading="lazy" when the cost is the file download: image-heavy galleries, feeds, and long article photo sets where skipping below-fold fetches saves real bytes.
• Use content-visibility: auto when the cost is rendering: very long pages with many heavy, static sections, where layout and paint for offscreen content dominate the first paint.

On a photo-heavy long page you often want both: content-visibility: auto on each heavy section plus loading="lazy" on the images inside. The hero image is the exception and should stay eager and high-priority, because it is the LCP and benefits from the hero optimisation and LCP techniques rather than deferral. Apply the pair to the below-fold tail and keep the critical path eager, which is the framing the content-visibility article and the lazy loading guide each make from their side.