From 449d29b701ee5a50e7279d44f4c3888a5d6f7e96 Mon Sep 17 00:00:00 2001 From: Alex Castle Date: Wed, 9 Nov 2022 10:20:50 -0800 Subject: [PATCH] fix(common): Add fetchpriority to ngOptimizedImage preloads (#48010) Add fetchpriority='high' to ngOptimizedImage preloads to so their priority matches the priority of the image element itself PR Close #48010 --- aio/content/guide/image-directive.md | 1 + .../src/directives/ng_optimized_image/preload-link-creator.ts | 1 + packages/common/test/directives/ng_optimized_image_spec.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/aio/content/guide/image-directive.md b/aio/content/guide/image-directive.md index b6f8ee18221cc..76a44df366c4d 100644 --- a/aio/content/guide/image-directive.md +++ b/aio/content/guide/image-directive.md @@ -60,6 +60,7 @@ Marking an image as `priority` applies the following optimizations: * Sets `fetchpriority=high` (read more about priority hints [here](https://web.dev/priority-hints)) * 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. diff --git a/packages/common/src/directives/ng_optimized_image/preload-link-creator.ts b/packages/common/src/directives/ng_optimized_image/preload-link-creator.ts index f2f65f1e1ec82..28382b592ace1 100644 --- a/packages/common/src/directives/ng_optimized_image/preload-link-creator.ts +++ b/packages/common/src/directives/ng_optimized_image/preload-link-creator.ts @@ -65,6 +65,7 @@ export class PreloadLinkCreator { renderer.setAttribute(preload, 'as', 'image'); renderer.setAttribute(preload, 'href', src); renderer.setAttribute(preload, 'rel', 'preload'); + renderer.setAttribute(preload, 'fetchpriority', 'high'); if (sizes) { renderer.setAttribute(preload, 'imageSizes', sizes); diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts index 572d33057c4ae..f92661cec12bf 100644 --- a/packages/common/test/directives/ng_optimized_image_spec.ts +++ b/packages/common/test/directives/ng_optimized_image_spec.ts @@ -68,6 +68,7 @@ describe('Image directive', () => { expect(preloadLink!.getAttribute('as')).toEqual('image'); expect(preloadLink!.getAttribute('imagesizes')).toEqual('10vw'); expect(preloadLink!.getAttribute('imagesrcset')).toEqual(`${rewrittenSrc}?width=100 100w`); + expect(preloadLink!.getAttribute('fetchpriority')).toEqual('high'); preloadLink!.remove(); });