Lazy loading

Lazy loadingLazy loadingPostponing an image, video or embed until the reader scrolls near it. Browsers do this natively with the attribute `loading="lazy"`.In the glossary postpones a download until the content is about to become visible. Browsers do this natively for images and iframes when the element carries the attribute loading="lazy"; Chrome has supported it since version 77, Firefox since 75 and Safari, for images, since 15.4. The browser starts the download shortly before the element enters the screen. Chrome uses a distance of 1,250 pixels on fast connections and 2,500 pixels on slow ones, so the image is usually ready by the time the reader gets there. Before the attribute existed, the same effect required JavaScript.

A long page with many images would otherwise fetch all of them at once, including those nobody scrolls to. These downloads compete with the content in the first screen for the same connection. In a WordPress test reported by web.dev, lazy loading cut the transferred image data of archive pages on desktop from 1,173 KB to 577 KB. Visitors use less mobile data, and the site serves less traffic for the same number of visits.

The image in the first screen must load immediately. On 76 percent of mobile pages the Largest Contentful Paint, the Core Web VitalCore Web VitalsGoogle's three measures of page experience: LCP for loading, INP for responsiveness and CLS for visual stability. Each is judged at the 75th percentile of real visits.In the glossary for loading speed, is an image (Web Almanac 2025). Deferring it makes the browser wait until the layout is known before it even requests the file. In the same WordPress test, removing lazy loading from images in the first screen improved the LCPLCPLargest Contentful Paint: the time until the largest image or text block in the first screen is rendered. Google rates 2.5 seconds or less as good.In the glossary of archive pages by 14 percent on desktop and 18 percent on mobile. Even so, about 16 to 17 percent of pages still lazy-load their LCP image (Web Almanac 2025). It needs the opposite treatment: with the attribute fetchpriority="high", Google Flights improved its LCP from 2.6 to 1.9 seconds, as web.dev reports.

Deferred images need their width and height in the markup. Without them the page has no space reserved, and the text jumps when the image arrives. Maps, video players and other embeds gain the most, because they often load large amounts of script. They can use loading="lazy" on the iframe, or show a simple preview image that loads the real embed only when the reader taps it.