What is Lazy Loading?

Lazy loading is a technique that delays the loading of non-critical resources until they are actually needed. Instead of downloading every image, iframe, and video on a page the moment the HTML is parsed, the browser waits until those elements are about to scroll into view. This means the initial page load is faster and lighter, because the browser focuses its bandwidth on what the visitor sees first.

How Lazy Loading Works Under the Hood

There are two main approaches to implementing lazy loading. The first is the native browser approach, which relies on the loading="lazy" HTML attribute. When the browser encounters an element with this attribute, it delays fetching the resource until the element reaches a calculated distance from the viewport. Each browser determines this threshold slightly differently, but the goal is the same: start the download just before the user scrolls to it, so the content appears seamlessly.

The second approach uses JavaScript, typically through the Intersection Observer API. A small script watches the page and detects when placeholder elements enter the viewport. Once they do, the script swaps in the actual image source or iframe URL, triggering the download. Before the Intersection Observer API existed, developers relied on scroll event listeners, which were less efficient and could cause jank on slower devices.

What Can Be Lazy Loaded

Lazy loading applies to several types of resources:

• Images: The most common use case. Every <img> tag below the fold is a good candidate for lazy loading.
• Iframes: Embedded YouTube videos, Google Maps, and other third-party widgets can be heavy. Lazy loading iframes prevents them from blocking the initial page render.
• Videos: Self-hosted videos with the <video> tag can use preload="none" or JavaScript-based lazy loading to defer the download.
• Background images: CSS background images loaded via background-image cannot use the native loading attribute, so they require JavaScript solutions or careful CSS structuring.

Native Browser Lazy Loading vs JavaScript Libraries

Native lazy loading is the simplest option. You add loading="lazy" to your <img> or <iframe> tag and the browser handles everything. No JavaScript needed, no extra file size, no configuration. It works in all modern browsers, including Chrome, Firefox, Safari, and Edge.

<img src="photo.jpg" loading="lazy" width="800" height="600" alt="Description" />
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>

JavaScript libraries like lazysizes, lozad.js, or vanilla-lazyload offer more control. They support background images, can add fade-in animations, and let you customize the loading threshold. However, they add extra JavaScript to your page and require proper initialization. For most WordPress sites, native lazy loading is the better choice because of its simplicity and zero performance overhead.

WordPress and Native Lazy Loading Since Version 5.5

WordPress has automatically added loading="lazy" to images since version 5.5, released in August 2020. This applies to images in post content, featured images, and other images output through core functions. WordPress also adds loading="lazy" to iframes embedded in content. Since WordPress 5.9, the first image in content (the one most likely to be above the fold) is automatically excluded from lazy loading to avoid hurting LCP scores.

Impact on Core Web Vitals and LCP Considerations

Lazy loading has a direct relationship with Core Web Vitals, particularly Largest Contentful Paint (LCP). When done correctly, lazy loading improves LCP because the browser can prioritize downloading the largest visible element without competing for bandwidth with below-the-fold images. However, if you accidentally lazy load the LCP element itself (often the hero image or a large above-the-fold banner), you will make LCP worse. The browser will wait to fetch that image until it calculates viewport proximity, adding unnecessary delay.

For images that are not lazy loaded but are critical, consider adding fetchpriority="high" to tell the browser to prioritize that download:

<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Hero banner" />

When NOT to Lazy Load

Not every image should be lazy loaded. There are clear exceptions:

• Hero images: The main banner or featured image that appears immediately on page load should never be lazy loaded.
• Logo and site identity images: These are typically in the header and visible without scrolling.
• First visible content image: Any image that appears within the initial viewport should load eagerly.
• LCP candidates: If an image is the largest visible element when the page first renders, lazy loading it will directly hurt your LCP score.

For these images, use loading="eager" (the default behavior) or explicitly add fetchpriority="high" so the browser downloads them as quickly as possible.

WordPress Plugins for Lazy Loading

While WordPress handles basic lazy loading natively, several plugins offer extended functionality:

• WP Rocket: Includes lazy loading for images, iframes, and videos as part of its broader performance optimization suite. It can also replace YouTube video embeds with a lightweight thumbnail that loads the actual player only on click.
• Autoptimize: Primarily a CSS/JS optimization plugin, but includes lazy loading for images using the native attribute or a JavaScript fallback.
• a3 Lazy Load: A dedicated lazy loading plugin with granular control over which elements get lazy loaded, including support for background images and custom selectors.
• Perfmatters: A lightweight performance plugin that includes lazy loading alongside other optimizations like script management and database cleanup.

Lazy Loading and SEO

Google's crawler (Googlebot) renders JavaScript, so it can see lazy-loaded images as long as they eventually load during rendering. However, relying on JavaScript-based lazy loading means Googlebot needs to execute your scripts to discover those images. Native lazy loading with loading="lazy" is safer for SEO because the actual src attribute is present in the HTML from the start. Search engines can find the image URL without executing JavaScript. Always make sure your images have proper alt attributes regardless of the lazy loading method you choose.

What InspectWP Checks

InspectWP analyzes the images on your page and reports whether the loading="lazy" attribute is present on each image. This helps you verify that lazy loading is properly implemented across your WordPress site and identify any images that might be missing the attribute or incorrectly lazy loaded when they should be eagerly loaded.