How to Implement Lazy Loading in HTML and JavaScript

What lazy loading is in web development

Lazy loading means delaying the download of a resource until it is likely to be needed. Instead of fetching every image, video and embedded map as soon as the page opens, the browser fetches only what is on or near the screen, and the rest as the visitor scrolls towards it.

The opposite is eager loading, which is what browsers do by default. A long article with forty photos downloads all forty at once, even if most visitors read the first few paragraphs and leave. Lazy loading cuts that waste. The page uses less data, the important first-screen files face less competition for bandwidth, and phones on slow connections show the top of the page sooner.

There are two ways to implement it:

• Native lazy loading in HTML, with the loading="lazy" attribute on <img> and <iframe> elements. The browser decides when to load. No JavaScript is needed.
• Lazy loading in JavaScript, usually with the IntersectionObserver API, which tells your script when an element comes near the viewport. You use it for things the attribute cannot handle, such as CSS background images, video files and custom widgets.

Use the native attribute wherever it works and keep JavaScript for the rest. The native version is simpler, cannot break if a script fails, and is supported in all current major browsers for both images and iframes.

What to lazy load, and what never to

The rule that matters most: nothing in the first screenful should be lazy loaded, on mobile or desktop. Many themes and plugins add loading="lazy" to every image, and the most common lazy loading mistake on real sites is a lazy hero image. The LCP guide explains why that slows the page.

Lazy loading in HTML with loading=lazy

For an image below the fold, add the attribute and always give the width and height, so the browser reserves the space before the file arrives:

<img src="/images/oven-600.webp"
     srcset="/images/oven-600.webp 600w, /images/oven-1200.webp 1200w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="1200" height="800"
     alt="Bread loaves cooling beside the bakery oven"
     loading="lazy" decoding="async">

For an embed:

<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        width="560" height="315" title="How we shape sourdough"
        loading="lazy" allowfullscreen></iframe>

The browser does not wait until the image is exactly on screen. Chrome starts loading lazy images when they are within roughly 1,250 pixels of the viewport on a fast connection and further away on slow connections, so in normal scrolling the image is ready before the reader reaches it.

How the attribute behaves

• loading="eager" or no attribute means load straight away. You do not need to write eager on the hero; just leave the attribute off and add fetchpriority="high" to the main image.
• Without width and height, or a CSS aspect-ratio, the image takes up no space until it loads, and the content below jumps. See image dimension fixes.
• Browsers only defer lazy images when JavaScript is enabled, as a privacy measure. With JavaScript off the image simply loads normally, so nothing breaks.
• An image inside an element hidden with display: none will not load until it is shown.

Lazy loading in JavaScript with IntersectionObserver

When you need lazy loading for something the attribute cannot cover, keep the real address in a data- attribute and copy it across when the element approaches the viewport:

<img data-lazy src="/images/placeholder.svg"
     data-src="/images/team-800.webp" width="800" height="533"
     alt="The Example Bakery team at the counter">
<noscript><img src="/images/team-800.webp" width="800" height="533"
     alt="The Example Bakery team at the counter"></noscript>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const items = document.querySelectorAll('[data-lazy]');
  const show = (el) => {
    if (el.dataset.src) el.src = el.dataset.src;
    if (el.dataset.srcset) el.srcset = el.dataset.srcset;
    if (el.dataset.bg) el.style.backgroundImage = 'url(' + el.dataset.bg + ')';
    el.removeAttribute('data-lazy');
  };
  if (!('IntersectionObserver' in window)) { items.forEach(show); return; }
  const io = new IntersectionObserver((entries) => {
    entries.forEach((e) => {
      if (e.isIntersecting) { show(e.target); io.unobserve(e.target); }
    });
  }, { rootMargin: '300px 0px' });
  items.forEach((el) => io.observe(el));
});
</script>

The rootMargin of 300 pixels starts the download a little before the element is visible. The fallback loads everything at once in the rare browser without the API, and the <noscript> copy covers visitors with JavaScript switched off.

Background images and video

The same script handles a section with a large CSS background: give it a data-lazy and a data-bg attribute, and the style is only set when it comes near the screen. For video, write preload="none" and a small poster image, so nothing but the poster downloads until the visitor presses play.

Platform notes

• WordPress. Core adds loading="lazy" to content images and iframes automatically and, since version 5.9 (refined in 6.3), tries to skip the image most likely to be the hero. Page builders, sliders and optimisation plugins can still lazy load the first image. Check the rendered HTML. If you run a plugin for lazy loading as well, turn one of the two off. See loading lazy not working.
• Shopify. The Liquid image_tag filter accepts a loading parameter. Many themes set loading: "lazy" on every section, so edit the first section on each template to load eagerly.
• Next.js. The next/image component lazy loads by default. Mark the hero with the priority prop, or preload in newer versions, so it loads eagerly.
• React and other frameworks. Write loading="lazy" straight on the <img> element. For components loaded on demand, such as a heavy chart, use the framework's code splitting so the script itself is only fetched when needed.

Worked example

Example Bakery has a recipe page with a hero photo, twelve step photos and a YouTube video at the bottom. Before the change, all thirteen photos and the video player downloaded on load, about 3.1 MB on a phone.

1. The hero keeps no loading attribute and gains fetchpriority="high".
2. The first step photo, which sits just under the hero on a phone, is also left eager.
3. The other eleven photos get loading="lazy", plus their width and height.
4. The video iframe gets loading="lazy" and a title.

After the change, the first-screen download drops to about 520 KB, the hero appears sooner, and the remaining photos arrive as the reader scrolls. Layout shift stays at zero because every image has dimensions. You can confirm the pattern with the steps in how to check lazy loading is working.

The fix, step by step

Edge cases worth knowing

• Carousels and tabs. Images in hidden slides or tabs wait until shown. Leave the first slide eager and let the rest lazy load.
• Printing. In some browsers, images that never came near the screen can be missing when someone prints a long page. If printing matters, such as for recipes, test it.
• Anchor links. A visitor jumping to a section far down the page can see blank space briefly while images load. Dimensions keep the layout steady.
• Old JavaScript libraries. Some older lazy load libraries only work on scroll and keep the image in data-src with no fallback. Replace them with the native attribute.
• Above the fold changes by device. An image below the fold on desktop may be the first thing on a phone. Test both layouts.

Keeping lazy loading correct

1. Make the first section of each template eager in the template itself, so editors adding a new hero cannot turn lazy loading back on.
2. Run one lazy loading method. Overlapping plugin and theme options cause images that never appear.
3. Check new pages with the URL Inspection live test in Search Console and look at the rendered HTML: lazy images should have a real src.
4. Keep an eye on LCP and layout shift in your speed checks after each theme or plugin update. The page speed guide covers the other common slowdowns.