feat(next/image): preload priority images #20615
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Stats from current PRDefault Server Mode (Decrease detected ✓)General Overall increase
|
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| buildDuration | 9.9s | 10.1s | |
| nodeModulesSize | 83 MB | 83 MB |
Page Load Tests Overall decrease ⚠️
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 2.031 | 2.023 | -0.01 |
| / avg req/sec | 1231.07 | 1236.07 | +5 |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 1.228 | 1.282 | |
| /error-in-render avg req/sec | 2036.43 | 1950.04 |
Client Bundles (main, webpack, commons)
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| 677f882d2ed8..769b.js gzip | 12.8 kB | 12.8 kB | ✓ |
| framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
| main-a6ce971..96b9.js gzip | 6.59 kB | 6.59 kB | ✓ |
| webpack-7193..1446.js gzip | 751 B | 751 B | ✓ |
| Overall change | 59.1 kB | 59.1 kB | ✓ |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| polyfills-67..b7d1.js gzip | 31.2 kB | 31.2 kB | ✓ |
| Overall change | 31.2 kB | 31.2 kB | ✓ |
Client Pages
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| _app-6220e08..9a40.js gzip | 1.28 kB | 1.28 kB | ✓ |
| _error-4b0b5..2c91.js gzip | 3.44 kB | 3.44 kB | ✓ |
| hooks-5f309a..7282.js gzip | 887 B | 887 B | ✓ |
| index-57f580..c562.js gzip | 227 B | 227 B | ✓ |
| link-1a1f628..eeb5.js gzip | 1.61 kB | 1.61 kB | ✓ |
| routerDirect..bd82.js gzip | 303 B | 303 B | ✓ |
| withRouter-2..e384.js gzip | 302 B | 302 B | ✓ |
| Overall change | 8.05 kB | 8.05 kB | ✓ |
Client Build Manifests
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 322 B | 322 B | ✓ |
| Overall change | 322 B | 322 B | ✓ |
Rendered Page Sizes
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| index.html gzip | 616 B | 616 B | ✓ |
| link.html gzip | 621 B | 621 B | ✓ |
| withRouter.html gzip | 609 B | 609 B | ✓ |
| Overall change | 1.85 kB | 1.85 kB | ✓ |
Serverless Mode
General Overall increase ⚠️
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| buildDuration | 12.3s | 12.1s | -179ms |
| nodeModulesSize | 83 MB | 83 MB |
Client Bundles (main, webpack, commons)
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| 677f882d2ed8..769b.js gzip | 12.8 kB | 12.8 kB | ✓ |
| framework.HASH.js gzip | 39 kB | 39 kB | ✓ |
| main-a6ce971..96b9.js gzip | 6.59 kB | 6.59 kB | ✓ |
| webpack-7193..1446.js gzip | 751 B | 751 B | ✓ |
| Overall change | 59.1 kB | 59.1 kB | ✓ |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| polyfills-67..b7d1.js gzip | 31.2 kB | 31.2 kB | ✓ |
| Overall change | 31.2 kB | 31.2 kB | ✓ |
Client Pages
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| _app-6220e08..9a40.js gzip | 1.28 kB | 1.28 kB | ✓ |
| _error-4b0b5..2c91.js gzip | 3.44 kB | 3.44 kB | ✓ |
| hooks-5f309a..7282.js gzip | 887 B | 887 B | ✓ |
| index-57f580..c562.js gzip | 227 B | 227 B | ✓ |
| link-1a1f628..eeb5.js gzip | 1.61 kB | 1.61 kB | ✓ |
| routerDirect..bd82.js gzip | 303 B | 303 B | ✓ |
| withRouter-2..e384.js gzip | 302 B | 302 B | ✓ |
| Overall change | 8.05 kB | 8.05 kB | ✓ |
Client Build Manifests
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 322 B | 322 B | ✓ |
| Overall change | 322 B | 322 B | ✓ |
Serverless bundles
| vercel/next.js canary | Timer/next.js feat/preload-priority | Change | |
|---|---|---|---|
| _error.js | 1 MB | 1 MB | ✓ |
| 404.html | 2.67 kB | 2.67 kB | ✓ |
| hooks.html | 1.92 kB | 1.92 kB | ✓ |
| index.js | 1 MB | 1 MB | ✓ |
| link.js | 1.06 MB | 1.06 MB | ✓ |
| routerDirect.js | 1.05 MB | 1.05 MB | ✓ |
| withRouter.js | 1.05 MB | 1.05 MB | ✓ |
| Overall change | 5.17 MB | 5.17 MB | ✓ |
styfle
reviewed
Dec 30, 2020
| > **Attention**: This property is only meant for advanced usage. Switching an | ||
| > image to load with `eager` will normally **hurt performance**. | ||
| > | ||
| > You are probably looking for the [`priority`](#priority) property instead, |
There was a problem hiding this comment.
Suggested change
| > You are probably looking for the [`priority`](#priority) property instead, | |
| > We recommend using the [`priority`](#priority) property instead, |
ijjk
approved these changes
Dec 30, 2020
styfle
reviewed
Dec 30, 2020
| @@ -147,7 +153,7 @@ When `eager`, load the image immediately. | |||
|
|
|||
| ### unoptimized | |||
|
|
|||
| When true, the source image will be served as-is instead of changing quality, size, or format. Defaults to false. | |||
| When true, the source image will be served as-is instead of changing quality, size, or format. Defaults to `false`. | |||
There was a problem hiding this comment.
If you're going to change the default here to be highlighted, also change for the other sections too. For example, priority.
styfle
reviewed
Dec 30, 2020
| @@ -257,7 +255,8 @@ describe('Image Component Tests', () => { | |||
| browser = null | |||
| }) | |||
| runTests() | |||
| it('should NOT add a preload tag for a priority image', async () => { | |||
| // FIXME: this test | |||
There was a problem hiding this comment.
Client-side transitions will inject a preload tag. One could argue this is desirable behavior if the image has priority.
styfle
reviewed
Dec 30, 2020
| <Head> | ||
| <link | ||
| key={ | ||
| '__nimg-' + |
There was a problem hiding this comment.
Suggested change
| '__nimg-' + | |
| '__next_image_' + |
Do we have a convention here?
There was a problem hiding this comment.
No convention, was just trying to something short to avoid a collision. The user shouldn't really ever see this. Our sometimes convention is _n_------------ though.
styfle
reviewed
Oct 24, 2021
| ></Image> | ||
| <Image | ||
| loading="eager" | ||
| id="basic-image" |
There was a problem hiding this comment.
@Timer Did you intend to have two images with id="basic-image"?
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The HTML Living Standard explicitly says
hrefshould be omitted to prevent the loading of an incorrectly sized image:https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
Since it's in the spec, I assume this is valid-enough HTML.
This also dedupes preloads which the old implementation did not.
Fixes #18756
x-ref #19118
Fixes #18720