Home > Web Vitals > Performance > Defer Offscreen Images

Defer Offscreen Images

Last updated August 17, 2025

Introduction to Offscreen Images

The Lighthouse audit Offscreen images flags images that are requested before users can see them. Downloading those below-the-fold assets during initial navigation wastes bandwidth, competes with critical resources, and delays what matters most: above-the-fold content. The solution is lazy loading—deferring non-critical images until they are near the viewport.

What it measures

Lighthouse estimates the potential byte savings from deferring below-the-fold images. Pages with long feeds, galleries, and product grids commonly trigger this opportunity.

Why it matters (UX/SEO impact)

By prioritizing visible content, you reduce network contention and main-thread pressure, improving perceived speed, engagement, and conversions. Better responsiveness and stability also support search visibility.

Relation to other Web Vitals

  • LCP — Faster hero image rendering when bandwidth isn’t wasted on offscreen assets.
  • FCP — Fewer early bytes means an earlier first paint.
  • TBT / INP — Less main-thread work competing with image decoding and script evaluation.
  • CLS — If you reserve dimensions, lazy images won’t shift layout as they load.

Common causes of poor “Offscreen images”

  • Loading an entire gallery or feed at once rather than on demand.
  • Custom image components without loading="lazy" or IntersectionObserver logic.
  • Accidentally lazy-loading the LCP (hero) image — it should be eager and high priority.
  • Not reserving width/height, which triggers page jumps on load.

Elements commonly affected

  • Images — such as standard <img /> elements or CSS background images (via url())
  • Poster images on <video></video> elements
  • Large block-level text elements — like<h1>,<h2>, or<p>headings above the fold</p>

What is a good result?

This is an “opportunity” audit rather than a timed vital. The goal is to eliminate unnecessary early requests and reduce potential byte savings toward zero.

Score Scale
0 KiB
200+ KiB

How to Improve “Offscreen images”

1) Complete IntersectionObserver lazy loading (full HTML + JS demo)

The following demo shows a robust pattern: a tiny placeholder src, the real image in data-src, observer-based swapping near the viewport, and a <noscript> fallback. Dimensions are reserved to prevent CLS.

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.   <meta charset="utf-8">
    5. 

  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 

  6.   <title>Lazy Images with IntersectionObserver</title>
    7. 

  7.   <style>img.lazy-img{filter:blur(6px);transition:filter .3s ease}img.lazy-loaded{filter:none}</style>
    8. 

  8. </head>
    9. 

  9. <body>
    10. 

  10.   <h1>Demo: Lazy Load Images</h1>
    11. 

  11.   <p>Scroll down to load images on demand.</p>
    12. 

  12.   <img class="lazy-img" alt="Hero" width="1280" height="720" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-src="https://cdn.testdom.io/images/hero-1280x720.jpg">
    13. 

  13.   <div style="height:1200px"></div>
    14. 

  14.   <img class="lazy-img" alt="Gallery 1" width="800" height="600" decoding="async" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-src="https://cdn.testdom.io/images/gallery-1-800x600.jpg">
    15. 

  15.   <noscript><img src="https://cdn.testdom.io/images/gallery-1-800x600.jpg" alt="Gallery 1" width="800" height="600"></noscript>
    16. 

  16.   <script>(function(){const imgs=[...document.querySelectorAll('img.lazy-img')];function swap(i){const s=i.getAttribute('data-src');if(!s)return;i.src=s;i.onload=()=>i.classList.add('lazy-loaded');i.removeAttribute('data-src');i.classList.remove('lazy-img')}if('IntersectionObserver'in window){const io=new IntersectionObserver((es,o)=>{es.forEach(e=>{if(e.isIntersecting){swap(e.target);o.unobserve(e.target)}})},{rootMargin:'200px 0px',threshold:0.01});imgs.forEach(i=>io.observe(i))}else{const tryLoad=()=>{imgs.forEach(i=>{if(i.getAttribute('data-src')){const r=i.getBoundingClientRect();if(r.top<window.innerHeight+200)swap(i)}})};['load','scroll','resize'].forEach(ev=>window.addEventListener(ev,tryLoad,{passive:true}));tryLoad()}})();</script>
    17. 

  17. </body>
    18. 

  18. </html>
    19.

Tip: You can also add loading="lazy" to the same images for a simple native baseline while keeping IntersectionObserver for finer control and legacy fallback.

2) Native loading="lazy" (baseline)

    

  1. <img src="https://cdn.testdom.io/images/article-figure.jpg" alt="Article figure" width="800" height="534" loading="lazy" decoding="async">
    2.

3) AMP: <amp-img> example

AMP images are lazy by default. Define dimensions or use a layout type to keep the page stable.

    

  1. <amp-img src="https://cdn.example.com/promo.jpg" width="1200" height="675" layout="intrinsic" alt="Promo banner"></amp-img>
    2.

4) Reserve space to prevent CLS

Always reserve space for images so the layout doesn’t jump when they load. You can do this by setting explicit width and height, using the CSS aspect-ratio property, or by using the padding-top technique shown below. For more on preventing shifts, see Cumulative Layout Shift (CLS).

Responsive solution (recommended for fluid layouts)

Reserve space using the padding-top trick. It preserves the aspect ratio and avoids CLS, even when the image scales responsively.

     
  1. <div class="scr-ext-wrapper" style="grid-template-columns: auto minmax(auto, 500px) auto;">
    2.  
  2.   <div class="scr-wrapper" style="position: relative; width: 100%; max-width: 500px; padding-top: 58.2301%;">
    3.  
  3.    <img
    4.  
  4.      alt="AI tools for long-form bloggers at Copy.ai"
    5.  
  5.      class="scr"
    6.  
  6.      src="//domain.com/images/my-image.jpg"
    7.  
  7.      title="Copy.ai has a built-in editor"
    8.  
  8.      style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;" />
    9.  
  9.   </div>
    10.  
  10. </div>
    11.

How it works:

  • padding-top: 58.2301% preserves a 500×291 aspect ratio (291 / 500 × 100 = 58.2301%).
  • position: absolute on the image makes it fill the reserved container.
  • width: 100% inside a max-width–constrained wrapper keeps the image responsive without causing layout shifts.

Modern alternative: CSS aspect-ratio

If you can rely on modern browsers, aspect-ratio is cleaner and self-documenting.

     
  1. <div class="img-frame" style="width:100%; max-width:500px; aspect-ratio: 500 / 291; position:relative;">
    2.  
  2.   <img
    3.  
  3.     alt="AI tools for long-form bloggers at Copy.ai"
    4.  
  4.     src="//domain.com/images/my-image.jpg"
    5.  
  5.     title="Copy.ai has a built-in editor"
    6.  
  6.     style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover;" />
    7.  
  7. </div>
    8.

Either approach prevents CLS by reserving the image’s final footprint before the file is downloaded. For detailed guidance on layout stability, read the CLS article.

5) Do not lazy-load the LCP image

The hero (LCP) image should use loading="eager" and often fetchpriority="high" to render as fast as possible.

6) Responsive images

Use srcset/sizes or <picture> so the browser downloads the right size for each viewport.

Platform-Specific Lazy Loading

WordPress

Modern WordPress adds loading="lazy" automatically. To enforce it in custom code:

    

  1. <?php
    2. 

  2. add_filter('wp_get_attachment_image_attributes', function($attr){
    3. 

  3.   if(empty($attr['loading'])){ $attr['loading']='lazy'; }
    4. 

  4.   return $attr;
    5. 

  5. },10,1);
    6. 

  6. ?>
    7.

Hero note: Set the hero image to loading="eager" and consider fetchpriority="high".

Drupal

Ensure your field formatter or Twig outputs the attribute:

    

  1. <img src="{{ file_url(image_uri) }}" alt="{{ alt }}" width="{{ width }}" height="{{ height }}" loading="lazy" decoding="async">
    2.

Joomla

Enable Lazy Loading in Global Configuration (recent versions). In template overrides:

    

  1. <img src="<?= $this->baseurl ?>/images/photo.jpg" alt="Sample" width="600" height="400" loading="lazy" decoding="async">
    2.

Magento (Adobe Commerce)

Add native lazy loading in PHTML/UI components for catalog and gallery images:

    

  1. <img src="<?= $block->getImageUrl($_product,'category_page_list') ?>" alt="<?= $block->escapeHtml($_product->getName()) ?>" width="600" height="600" loading="lazy" decoding="async">
    2.

HubSpot CMS

With HubL modules or templates, emit the attribute:

    

  1. <img src="{{ resize_image_url(module.image, 800) }}" alt="{{ module.image.alt }}" width="800" height="534" loading="lazy" decoding="async">
    2.

Contentful

When rendering via React/Next or plain HTML, add the attribute and size params:

    

  1. // JSX
    2. 

  2. <img src={image.url + '?w=800&q=75'} alt={image.description || 'Image'} width="800" height="534" loading="lazy" decoding="async" />
    3.

Shopify (Online Store)

Most modern themes (e.g., Dawn) apply lazy loading. To be explicit in Liquid:

    

  1. {% assign img = product.featured_image | image_url: width: 1200 %}
    2. 

  2. <img src="{{ img }}" alt="{{ product.title | escape }}" width="1200" height="800" loading="lazy" decoding="async">
    3.

Hero note: For above-the-fold product images, use loading="eager" and optionally fetchpriority="high".

Wix

Wix optimizes many image widgets by default. With Velo for custom behavior, set the image source only when it enters the viewport:

    

  1. // Velo example
    2. 

  2. import { onReady } from 'wix-window';
    3. 

  3. $w.onReady(function(){
    4. 

  4.   $w('#myImage').onViewportEnter(() => {
    5. 

  5.     $w('#myImage').src = 'https://static.example.com/large-photo.jpg';
    6. 

  6.   });
    7. 

  7. });
    8.

Monitoring and Continuous Testing

After implementing lazy loading, verify improvements continuously. Testdom.io can schedule repeatable Web Vitals tests, track historical trends, and alert on regressions.

Sample code to monitor LCP in the field

    

  1. new PerformanceObserver((entryList) => {
    2. 

  2.   for (const entry of entryList.getEntries()) {
    3. 

  3.     if (entry.entryType === 'largest-contentful-paint') {
    4. 

  4.       console.log('LCP:', Math.round(entry.startTime), 'ms');
    5. 

  5.     }
    6. 

  6.   }
    7. 

  7. }).observe({ type: 'largest-contentful-paint', buffered: true });
    8.

What else improves when you lazy load?

  • Offscreen images audit: Potential byte savings approach zero.
  • LCP: Bandwidth and decoder time are available for the hero image.
  • FCP: Fewer early bytes lead to an earlier first paint.
  • TBT / INP: Less main-thread contention from decoding and JS.
  • CLS: Stable layout if dimensions are reserved.

Checklist

  • Add loading="lazy" to non-critical <img> elements.
  • Use IntersectionObserver for fine control and legacy support.
  • Never lazy-load the LCP (hero) image; consider fetchpriority="high".
  • Reserve dimensions or use aspect-ratio to avoid CLS.
  • Serve properly sized, compressed images (WebP/AVIF) via CDN.

Summary

The Lighthouse audit “Offscreen images” highlights unnecessary image requests that occur before they are visible. By implementing lazy loading—through native loading="lazy", IntersectionObserver, AMP’s <amp-img>, or CMS/SaaS-specific techniques—you can ensure images load only when needed. This optimization not only eliminates wasted bytes but also improves key metrics including LCP, FCP, TBT, INP, and CLS. Always reserve image space with width/height, aspect-ratio, or the padding-top trick to prevent layout shifts. With proper implementation, pages become faster, lighter, and more stable—leading to better user experiences and stronger SEO performance.