NG0913

NG0913

Error message

An image with src ${src} is the Largest Contentful Paint (LCP) element but was given a "loading" value of "lazy", which can negatively impact application loading performance. This warning can be addressed by changing the loading value of the LCP image to "eager", or by using the NgOptimizedImage directive's prioritization utilities. For more information about addressing or disabling this warning, see ${ERROR_DETAILS_PAGE_BASE_URL}/NG0913

What it means

NG0913 (LCP variant): emitted by the core image performance warning system used with NgOptimizedImage. Using the Performance Observer, Angular identifies the image that ends up being the page's Largest Contentful Paint element and finds it was rendered with loading="lazy". Lazy-loading the LCP image delays the single largest paint of the page, measurably hurting load performance; the fix is eager loading or explicit prioritization.

Source

Thrown at packages/core/src/image_performance_warning.ts:208

      const paddingBottom = computedStyle.getPropertyValue('padding-bottom');
      const paddingLeft = computedStyle.getPropertyValue('padding-left');
      renderedWidth -= parseFloat(paddingRight) + parseFloat(paddingLeft);
      renderedHeight -= parseFloat(paddingTop) + parseFloat(paddingBottom);
    }

    const intrinsicWidth = image.naturalWidth;
    const intrinsicHeight = image.naturalHeight;

    const recommendedWidth = this.window.devicePixelRatio * renderedWidth;
    const recommendedHeight = this.window.devicePixelRatio * renderedHeight;
    const oversizedWidth = intrinsicWidth - recommendedWidth >= OVERSIZED_IMAGE_TOLERANCE;
    const oversizedHeight = intrinsicHeight - recommendedHeight >= OVERSIZED_IMAGE_TOLERANCE;
    return oversizedWidth || oversizedHeight;
  }
}

function logLazyLCPWarning(src: string) {
  console.warn(
    formatRuntimeError(
      RuntimeErrorCode.IMAGE_PERFORMANCE_WARNING,
      `An image with src ${src} is the Largest Contentful Paint (LCP) element ` +
        `but was given a "loading" value of "lazy", which can negatively impact ` +
        `application loading performance. This warning can be addressed by ` +
        `changing the loading value of the LCP image to "eager", or by using the ` +
        `NgOptimizedImage directive's prioritization utilities. For more ` +
        `information about addressing or disabling this warning, see ` +
        `${ERROR_DETAILS_PAGE_BASE_URL}/NG0913`,
    ),
  );
}

function logOversizedImageWarning(src: string) {
  console.warn(
    formatRuntimeError(
      RuntimeErrorCode.IMAGE_PERFORMANCE_WARNING,
      `An image with src ${src} has intrinsic file dimensions much larger than its ` +

View on GitHub (pinned to 51cb07e980)

Solutions

Set loading="eager" (or remove lazy) on the above-the-fold hero/LCP image
With NgOptimizedImage, mark the image with the priority attribute so it is preloaded and fetched eagerly
Audit which element is actually LCP using Lighthouse/DevTools and only lazy-load below-the-fold images

Example fix

<!-- before -->
<img ngSrc="hero.jpg" loading="lazy" alt="Hero">

<!-- after -->
<img ngSrc="hero.jpg" priority alt="Hero">

Defensive patterns

Strategy: validation

Validate before calling

// Mark above-the-fold images eager/priority instead of lazy
const isAboveFold = (img: HTMLImageElement) => img.getBoundingClientRect().top < innerHeight;
document.querySelectorAll('img[loading="lazy"]').forEach((img) => {
  if (isAboveFold(img as HTMLImageElement)) {
    console.warn('LCP candidate is lazy:', (img as HTMLImageElement).currentSrc);
  }
});

Prevention

Never blanket-apply loading="lazy"; lazy-load only below-the-fold images
Give hero/above-the-fold images priority with NgOptimizedImage's priority attribute
Check the LCP element with Lighthouse as part of performance review

When it happens

Trigger: The page's LCP element is an <img> or NgOptimizedImage whose loading attribute is "lazy" (explicitly set, or the directive's default lazy behavior for non-priority images), and the browser reports it as the LCP entry in a development-mode run.

Common situations: Applying loading="lazy" to all images indiscriminately (e.g. via a shared component default); hero/banner images above the fold rendered lazy; forgetting the priority attribute on NgOptimizedImage hero images.

Related errors

AI-assisted analysis of angular/angular@51cb07e980 (2026-08-22). Data as JSON: /api/errors/e4f67eb6ee5e053d. Report an issue: GitHub.