skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(common): make the warning for lazy-loaded lcp image an error (#51748)

Browse Source 
upgrade the warning for lazy-loaded lcp images when using NgOptimizedImage to an error

BREAKING CHANGE:

Previously when NgOptimizedImage directive detected that an LCP image is lazy-loaded, a console warning was produced. Now the directive throws an error to make it more discoverable in a console. If you receive this error, refer to this guide for additional information: https://angular.io/guide/image-directive#step-4-mark-images-as-priority

PR Close #51748
This commit is contained in:
Alex Castle
2023-09-12 15:45:14 -07:00
committed by Pawel Kozlowski
parent 545db6d22d
commit fe2fd7e1a8
3 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aio/content/guide/image-directive.md
+1 -1
View File
@@ -65,7 +65,7 @@ Marking an image as `priority` applies the following optimizations:
* Sets `loading=eager` (read more about native lazy loading [here](https://web.dev/browser-level-image-lazy-loading))
* Automatically generates a [preload link element](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) if [rendering on the server](/guide/universal).
Angular displays a warning during development if the LCP element is an image that does not have the `priority` attribute. A page’s LCP element can vary based on a number of factors - such as the dimensions of a user's screen, so a page may have multiple images that should be marked `priority`. See [CSS for Web Vitals](https://web.dev/css-web-vitals/#images-and-largest-contentful-paint-lcp) for more details.
Angular throws an error during development if the LCP element is an image that does not have the `priority` attribute, as this can hurt loading performance significantly. A page’s LCP element can vary based on a number of factors - such as the dimensions of a user's screen, so a page may have multiple images that should be marked `priority`. See [CSS for Web Vitals](https://web.dev/css-web-vitals/#images-and-largest-contentful-paint-lcp) for more details.
#### Step 5: Include Height and Width