{"record":{"id":"e4f67eb6ee5e053d","repo":"angular/angular","slug":"ng0913","errorCode":"NG0913","errorMessage":"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","messagePattern":"An image with 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 (.+?)/NG0913","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/core/src/image_performance_warning.ts","lineNumber":208,"sourceCode":"      const paddingBottom = computedStyle.getPropertyValue('padding-bottom');\n      const paddingLeft = computedStyle.getPropertyValue('padding-left');\n      renderedWidth -= parseFloat(paddingRight) + parseFloat(paddingLeft);\n      renderedHeight -= parseFloat(paddingTop) + parseFloat(paddingBottom);\n    }\n\n    const intrinsicWidth = image.naturalWidth;\n    const intrinsicHeight = image.naturalHeight;\n\n    const recommendedWidth = this.window.devicePixelRatio * renderedWidth;\n    const recommendedHeight = this.window.devicePixelRatio * renderedHeight;\n    const oversizedWidth = intrinsicWidth - recommendedWidth >= OVERSIZED_IMAGE_TOLERANCE;\n    const oversizedHeight = intrinsicHeight - recommendedHeight >= OVERSIZED_IMAGE_TOLERANCE;\n    return oversizedWidth || oversizedHeight;\n  }\n}\n\nfunction logLazyLCPWarning(src: string) {\n  console.warn(\n    formatRuntimeError(\n      RuntimeErrorCode.IMAGE_PERFORMANCE_WARNING,\n      `An image with src ${src} is the Largest Contentful Paint (LCP) element ` +\n        `but was given a \"loading\" value of \"lazy\", which can negatively impact ` +\n        `application loading performance. This warning can be addressed by ` +\n        `changing the loading value of the LCP image to \"eager\", or by using the ` +\n        `NgOptimizedImage directive's prioritization utilities. For more ` +\n        `information about addressing or disabling this warning, see ` +\n        `${ERROR_DETAILS_PAGE_BASE_URL}/NG0913`,\n    ),\n  );\n}\n\nfunction logOversizedImageWarning(src: string) {\n  console.warn(\n    formatRuntimeError(\n      RuntimeErrorCode.IMAGE_PERFORMANCE_WARNING,\n      `An image with src ${src} has intrinsic file dimensions much larger than its ` +","sourceCodeStart":190,"sourceCodeEnd":226,"githubUrl":"https://github.com/angular/angular/blob/51cb07e98081ab7e4e84a9e0949266a8e19cca84/packages/core/src/image_performance_warning.ts#L190-L226","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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"],"exampleFix":"<!-- before -->\n<img ngSrc=\"hero.jpg\" loading=\"lazy\" alt=\"Hero\">\n\n<!-- after -->\n<img ngSrc=\"hero.jpg\" priority alt=\"Hero\">","handlingStrategy":"validation","validationCode":"// Mark above-the-fold images eager/priority instead of lazy\nconst isAboveFold = (img: HTMLImageElement) => img.getBoundingClientRect().top < innerHeight;\ndocument.querySelectorAll('img[loading=\"lazy\"]').forEach((img) => {\n  if (isAboveFold(img as HTMLImageElement)) {\n    console.warn('LCP candidate is lazy:', (img as HTMLImageElement).currentSrc);\n  }\n});","typeGuard":null,"tryCatchPattern":null,"preventionTips":["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"],"tags":["angular","performance","lcp","images","core-web-vitals"],"backgroundTag":"lazy-loaded-lcp-image","analyzedSha":"51cb07e98081ab7e4e84a9e0949266a8e19cca84","analyzedAt":"2026-08-22T07:04:54.531Z","schemaVersion":2},"datasetVersion":"2026-08-22T09:17:25.309Z"}