Lazy Loading: How to Speed Up Your Website by Loading Less Upfront

When a visitor loads a web page, their browser typically tries to download every image, video, and script on that page immediately — including content that’s far below the visible area and may never even be seen. Lazy loading changes this behaviour, deferring the download of off-screen resources until the user scrolls close to them. The result is a faster initial page load, better Core Web Vitals scores, and reduced bandwidth for both server and visitor.

Lazy loading has become a standard web performance technique, and modern browsers now support it natively without any JavaScript. This guide explains how it works, how to implement it correctly, and where the common mistakes lie. At Xpose, we enable lazy loading as a default on all client sites — it’s one of the easiest performance wins available.

Native Lazy Loading with the Loading Attribute

The simplest form of lazy loading requires no JavaScript at all. Adding loading="lazy" to an <img> or <iframe> element tells the browser to delay loading that resource until it’s near the viewport. Browser support is now excellent — all major browsers including Chrome, Firefox, Safari, and Edge support it. For images, the implementation is as simple as: <img src="photo.jpg" alt="Description" loading="lazy">. WordPress has added loading="lazy" automatically to all images since version 5.5.

There is one important exception: never add loading="lazy" to images that appear above the fold — images visible without scrolling. If your hero image, logo, or introductory graphic is lazy loaded, the browser will wait to fetch it until later in the loading process, which will actually harm your Largest Contentful Paint (LCP) score. Lazy loading is for below-the-fold resources only. For above-the-fold images, use loading="eager" (the default) or consider fetchpriority="high" to signal their importance.

Lazy Loading with Intersection Observer (JavaScript)

For more control — background images set in CSS, components that load additional content on scroll, or custom frameworks that need lazy-loaded components — the Intersection Observer API provides a JavaScript-based approach. You observe a set of elements; when they enter the viewport (with a configurable margin), a callback fires and you trigger the actual resource load. This is how libraries like lazysizes work, and it’s the technique used in most JavaScript frameworks.

Intersection Observer is also the right approach for lazy loading entire sections of a page — for example, deferring the loading of a complex interactive map, a social media feed widget, or a video embed until the user scrolls to it. These third-party embeds are often the heaviest resources on a page, and deferring them until they’re actually needed can dramatically improve Time to Interactive scores.

Images, Videos, and Iframes: Format and Size Matter Too

Lazy loading improves when loading an image, but the size and format of that image determine how much benefit you get. A 2MB JPEG will always be slow to load, even if it’s deferred. Combine lazy loading with modern image formats (WebP, AVIF) and appropriate sizing — serving a 1200px-wide image to a 375px-wide mobile screen wastes bandwidth regardless of when it loads. Use the HTML <picture> element with srcset and sizes attributes to serve appropriately sized images per device.

For video, avoid auto-playing MP4 backgrounds loading on page load if the video is below the fold. Use preload="none" on <video> elements to prevent the browser from buffering video content until the user reaches it. For YouTube embeds, a popular technique is to load a lightweight thumbnail image initially and replace it with the actual YouTube iframe only when the user clicks play — this is sometimes called "lite YouTube embed" and can save several hundred kilobytes on pages with multiple video embeds.