Deferring the loading of nonessential resources (like below-the-fold images) until they are needed or approach the viewport.

Lazy loading defers fetching a resource until it is likely to be needed. For images farther down a page, browser-level lazy loading can avoid loading everything immediately. The idea is to prioritize the initial experience without making later content unavailable.

Choose candidates based on their role in the page. An image that is important to the first view, especially one likely to be the Largest Contentful Paint element, should not be delayed merely because a plugin offers a sitewide lazy-loading switch. Off-screen gallery images are a different case from the main image a visitor expects to see immediately.

Implementation still needs checking. Reserving appropriate image space helps avoid layout movement as images arrive, and essential content should remain discoverable. Lazy loading should not become a requirement for a search crawler to click a button before the main information even exists in the page.

Takeaway: Apply lazy loading selectively to resources that can wait. Verify the first view and later images on realistic devices rather than promising a particular load time from one setting.

Example

A portfolio page contains a lead photograph followed by a long project gallery. The lead photograph may need prompt loading, while images well below the first screen can be deferred. Applying the same delayed-loading rule to every image could make the most important visual appear later rather than improve the initial experience.

What to check

Check the actual Largest Contentful Paint element and loading behavior before changing settings. Keep image dimensions or aspect ratios stable where possible. Afterward, test scrolling and content access as well as the initial page, because deferred resources still need to load reliably.

For more detail, see Browser-level image lazy loading.