From e406def6a6165b582912a59f3d09a314ce56c7db Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 21 Oct 2024 11:55:07 -0400 Subject: [PATCH] chore(docs): remove recommendation about using `priority` over `loading=eager` with `next/image` (#71562) This recommendation to use `priority` instead of `loading=eager` is a little confusing. We don't want `priority` to be overused because it can hurt performance so we can remove this recommendation from the documentation. TLDR: - use `priority` for LCP like a hero image above the fold - use `loading=eager` for other images above the folder - use `loading=lazy` (default) for everything below the fold - use `fetchPriority=high` if you want to load an image out of order that its found in the document --- docs/02-app/02-api-reference/01-components/image.mdx | 2 -- .../02-api-reference/01-components/image-legacy.mdx | 6 ------ 2 files changed, 8 deletions(-) diff --git a/docs/02-app/02-api-reference/01-components/image.mdx b/docs/02-app/02-api-reference/01-components/image.mdx index f078a3e9e320d..75b0f5ed83d20 100644 --- a/docs/02-app/02-api-reference/01-components/image.mdx +++ b/docs/02-app/02-api-reference/01-components/image.mdx @@ -373,8 +373,6 @@ A callback function that is invoked if the image fails to load. ### `loading` -> **Recommendation**: This property is only meant for advanced use cases. Switching an image to load with `eager` will normally **hurt performance**. We recommend using the [`priority`](#priority) property instead, which will eagerly preload the image. - ```js loading = 'lazy' // {lazy} | {eager} ``` diff --git a/docs/03-pages/02-api-reference/01-components/image-legacy.mdx b/docs/03-pages/02-api-reference/01-components/image-legacy.mdx index 27afc13c54133..05d33b0116cf6 100644 --- a/docs/03-pages/02-api-reference/01-components/image-legacy.mdx +++ b/docs/03-pages/02-api-reference/01-components/image-legacy.mdx @@ -221,12 +221,6 @@ The `onLoadingComplete` function accepts one parameter, an object with the follo ### loading -> **Attention**: This property is only meant for advanced usage. Switching an -> image to load with `eager` will normally **hurt performance**. -> -> We recommend using the [`priority`](#priority) property instead, which -> properly loads the image eagerly for nearly all use cases. - The loading behavior of the image. Defaults to `lazy`. When `lazy`, defer loading the image until it reaches a calculated distance from