What Is Lazy Loading: Deferred Image Loading Explained

Lazy loading is a technique that delays downloading images and other resources until the user is about to see them, rather than loading everything at once when the page opens. The result is a page that feels faster because the browser only downloads what's currently visible on screen.

If your site is image-heavy—an online store, a portfolio, a blog with long articles—lazy loading can significantly reduce the initial page weight and improve your Core Web Vitals scores.

How Lazy Loading Works

Without lazy loading, when a user opens your page the browser downloads all images in the document: the ones visible on screen and the ones five, ten, or twenty scrolls down. Most of those images are never actually seen (the user leaves before getting there), but they still consume bandwidth and time.

With lazy loading, the flow changes:

1. The browser loads the HTML and renders what's in the initial viewport.
2. Off-screen images show a placeholder (empty space or background color) instead of the real image.
3. As the user scrolls and approaches an image, the browser downloads it just in time to display it.

This behavior is controlled with the loading="lazy" attribute in HTML, or with JavaScript using the Intersection Observer API.

Ways to Implement Lazy Loading

Native HTML Attribute (the simplest approach)

Since 2019, all modern browsers support native lazy loading with a single attribute:

<img src="product-photo.jpg" alt="Handcrafted brown leather shoes" loading="lazy" width="600" height="400">

No JavaScript or external libraries required. Simply adding loading="lazy" to your <img> tags is enough. The width and height attributes are important: they tell the browser how much space to reserve, preventing Cumulative Layout Shift (CLS).

Intersection Observer API (advanced control)

For cases where you need more control—load animations, blur placeholder effects, compatibility with very old browsers—the Intersection Observer API in JavaScript is the right tool. This API detects when an element enters the viewport and runs a callback function in response.

Most WordPress plugins (like WP Rocket, ShortPixel, or Smush) implement this variant automatically without you touching any code.

Lazy Loading for iframes and Videos

The same native attribute works with iframes:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>

For <video> elements, the equivalent technique is using preload="none" or preload="metadata" to prevent the browser from downloading the full video file on page load.

Benefits of Lazy Loading for Your Site

Lazy loading is one of the simplest optimizations with the best effort-to-impact ratio. At elenlace.com, it's a standard part of every development and performance optimization project we deliver.

What You Should NOT Put Behind Lazy Loading

This is critical and often overlooked: the most important image on your page—hero image, logo, main product photo—should NOT have lazy loading.

The reason is simple: if the main image is already in the initial viewport, adding loading="lazy" tells the browser to delay it, which hurts your LCP instead of helping. Google penalizes this.

The practical rule:

• First 1–2 images visible without scrolling → loading="eager" (or no attribute, which is the default behavior).
• Everything else → loading="lazy".

If you use WordPress, make sure your plugin doesn't apply lazy loading indiscriminately to all images. WP Rocket, for example, has an option to exclude above-the-fold images.

Lazy Loading and SEO: Does It Affect Crawling?

A common concern is whether Google can crawl images with lazy loading. The answer is yes, as long as you use native attribute or Intersection Observer correctly.

The modern Googlebot executes JavaScript and waits for elements to become visible before crawling them. The only risk is with older implementations based on data-src without a proper fallback, where the bot might not see the real image.

To ensure your images are properly indexed:

• Use the native loading="lazy" attribute whenever possible.
• Always include descriptive, keyword-rich alt text.
• Use width and height to prevent CLS.
• Verify in Google Search Console that your images appear in indexing coverage.

Find more optimization techniques in our web performance category.

Key Takeaways

• Lazy loading delays image loading until the user is about to see them, reducing initial page weight.
• The simplest implementation is the native loading="lazy" attribute, supported by all modern browsers.
• Never apply lazy loading to the hero image or any image visible without scrolling—it will hurt your LCP.
• Always include width, height, and alt attributes to prevent CLS and maintain SEO accessibility.
• The speed impact is most noticeable on image-heavy pages and on mobile devices.

Want to implement lazy loading correctly and make sure no critical images are penalized? The team at elenlace.com can review your setup and apply the optimal configuration for your specific case.

FAQ

Do all browsers support native lazy loading?

Yes. Chrome, Firefox, Edge, and Safari (since version 15.4) all support loading="lazy". Global coverage exceeds 95% of users. For the remaining percentage, the browser simply ignores the attribute and loads the image normally—no errors, no broken images.

Does lazy loading work in WordPress without plugins?

Since WordPress 5.5 (August 2020), WordPress automatically adds loading="lazy" to images inserted through the editor or the the_post_thumbnail() function, except for the first image in content. You don't need a plugin just for this, though performance plugins offer additional configuration options.

Does lazy loading affect images in an XML sitemap?

No. An XML image sitemap is a static file that search bots read directly; lazy loading (which operates in the browser) doesn't affect that crawl. What matters is that the image's src attribute contains the real URL, not a placeholder.

Can I apply lazy loading to CSS background images?

The loading="lazy" attribute only works with <img> and <iframe> tags. For CSS backgrounds, the equivalent technique is using JavaScript with Intersection Observer to add a class that applies the background-image only when the element enters the viewport. Some performance plugins handle this automatically.

Useful resources

Other providers and guides worth comparing:

• HostGator México
• Hostinger
• HubSpot