Deferring non-critical image loads is still useful, but the default approach has changed. Modern browsers support native lazy loading, so JavaScript libraries should usually be reserved for legacy browsers or advanced behavior.

Production context

  • When to use this: editorial or media-heavy pages where below-the-fold images should not compete with LCP-critical assets.
  • What it improves: initial render cost, bandwidth use, and layout stability when dimensions are declared correctly.
  • Tradeoff: lazy-loading hero or above-the-fold images can hurt LCP. Reserve lazy loading for content that is genuinely non-critical at first paint.

Modern baseline

Use native attributes first:

<img
  src="/assets/images/example.jpg"
  alt="Example screenshot"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async">

Keep width and height so the browser can reserve layout space and avoid layout shift.

Performance caveats

Do not lazy-load your likely Largest Contentful Paint image. Hero images, above-the-fold product images, and primary article images should load eagerly:

<img
  src="/assets/images/hero.jpg"
  alt="Deployment dashboard"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high">

Lazy loading helps when it reduces unnecessary network work. It hurts when the browser delays the image the user is waiting to see.

Legacy JavaScript pattern

Older implementations swapped a placeholder attribute for the real src after DOM ready:

$(function(){
    $('img.to-load').each(function(index, object) {
        $(this).attr('src', $(this).data('src'));
    });
});

For modern sites, this pattern is mostly legacy. If you still need a JavaScript library, compare server-side and client-side options based on your stack and operational constraints:

  • Google's PageSpeed module:
    • URL: PageSpeed lazy-load filter
    • PageSpeed can lazy-load images at the web server layer for Apache and Nginx. The tradeoff on Nginx is operational: unless you already run a PageSpeed-enabled build, you may need to rebuild Nginx, which adds downtime risk. Build notes
    • Server-side lazy loading avoids extra client JavaScript, but it is not always the fastest path to adopt on an existing Nginx deployment.
  • LazyLoad by tuupola
    • URL: jquery_lazyload
    • A widely used jQuery plugin with practical options for responsive image loading. Treat it as a legacy option for older jQuery stacks rather than the default choice for new builds.
  • Unveil by luis-almeida
    • URL: unveil
    • A lighter alternative to tuupola's LazyLoad.
  • LazyLoad by vvo
    • URL: vvo/lazyload
    • Standalone lazy loader (~1kb) with support for images, iframes, and widgets.

Verification

After changing image-loading behavior, test:

  • Largest Contentful Paint: the key above-the-fold image should not be delayed.
  • Cumulative Layout Shift: images should have dimensions or CSS aspect ratios.
  • Network waterfall: below-the-fold images should not compete with critical CSS, fonts, and hero assets.
  • No-JavaScript behavior: important content should remain accessible.

Related work

This delivery performance note supports front-end platform work in Video search engine.