Fix `next/image` noscript tag to only render when lazy #32918

Ryuurock · 2021-12-31T05:39:51Z

Noscript is not required for Image that are loaded immediately

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

test/unit/image-rendering.test.ts

styfle

Thanks!

ijjk · 2022-01-01T22:31:59Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
buildDuration	18.3s	18.5s	⚠️ +250ms
buildDurationCached	4.1s	4.1s	-23ms
nodeModulesSize	348 MB	348 MB	⚠️ +19 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.887	3.885	0
/ avg req/sec	643.24	643.55	+0.31
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.089	2.059	-0.03
/error-in-render avg req/sec	1196.62	1214.39	+17.77

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27 kB	27 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	70.9 kB	70.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.73 kB	4.74 kB	⚠️ +3 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.13 kB	2.13 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.1 kB	14.1 kB	⚠️ +3 B

Client Build Manifests

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
index.html gzip	533 B	533 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-47f9069b44e32eb7.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-e9a78ed1e1098553.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-76af1f5604a3f190.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -722,34 +722,35 @@
               style: _objectSpread({}, imgStyle, blurStyle)
             })
           ),
-          /*#__PURE__*/ _react.default.createElement(
-            "noscript",
-            null,
+          isLazy &&
             /*#__PURE__*/ _react.default.createElement(
-              "img",
-              Object.assign(
-                {},
-                rest,
-                generateImgAttrs({
-                  src: src,
-                  unoptimized: unoptimized,
-                  layout: layout,
-                  width: widthInt,
-                  quality: qualityInt,
-                  sizes: sizes,
-                  loader: loader
-                }),
-                {
-                  decoding: "async",
-                  "data-nimg": layout,
-                  style: imgStyle,
-                  className: className,
-                  // @ts-ignore - TODO: upgrade to `@types/react@17`
-                  loading: loading || "lazy"
-                }
+              "noscript",
+              null,
+              /*#__PURE__*/ _react.default.createElement(
+                "img",
+                Object.assign(
+                  {},
+                  rest,
+                  generateImgAttrs({
+                    src: src,
+                    unoptimized: unoptimized,
+                    layout: layout,
+                    width: widthInt,
+                    quality: qualityInt,
+                    sizes: sizes,
+                    loader: loader
+                  }),
+                  {
+                    decoding: "async",
+                    "data-nimg": layout,
+                    style: imgStyle,
+                    className: className,
+                    // @ts-ignore - TODO: upgrade to `@types/react@17`
+                    loading: loading || "lazy"
+                  }
+                )
               )
-            )
-          ),
+            ),
           priority // for browsers that do not support `imagesrcset`, and in those cases
             ? // it would likely cause the incorrect image to be preloaded.
               //

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
buildDuration	20.4s	20.3s	-149ms
buildDurationCached	4s	4.1s	⚠️ +65ms
nodeModulesSize	348 MB	348 MB	⚠️ +19 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.937	3.877	-0.06
/ avg req/sec	634.93	644.84	+9.91
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.12	2.11	-0.01
/error-in-render avg req/sec	1179.11	1184.92	+5.81

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.2 kB	27.2 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.1 kB	71.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	906 B	906 B	✓
image-HASH.js gzip	4.75 kB	4.76 kB	⚠️ +4 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.19 kB	2.19 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.1 kB	14.1 kB	⚠️ +4 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
_buildManifest.js gzip	458 B	459 B	⚠️ +1 B
Overall change	458 B	459 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	Ryuurock/next.js image_noscript_optimization	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-47f9069b44e32eb7.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-e9a78ed1e1098553.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-76af1f5604a3f190.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -722,34 +722,35 @@
               style: _objectSpread({}, imgStyle, blurStyle)
             })
           ),
-          /*#__PURE__*/ _react.default.createElement(
-            "noscript",
-            null,
+          isLazy &&
             /*#__PURE__*/ _react.default.createElement(
-              "img",
-              Object.assign(
-                {},
-                rest,
-                generateImgAttrs({
-                  src: src,
-                  unoptimized: unoptimized,
-                  layout: layout,
-                  width: widthInt,
-                  quality: qualityInt,
-                  sizes: sizes,
-                  loader: loader
-                }),
-                {
-                  decoding: "async",
-                  "data-nimg": layout,
-                  style: imgStyle,
-                  className: className,
-                  // @ts-ignore - TODO: upgrade to `@types/react@17`
-                  loading: loading || "lazy"
-                }
+              "noscript",
+              null,
+              /*#__PURE__*/ _react.default.createElement(
+                "img",
+                Object.assign(
+                  {},
+                  rest,
+                  generateImgAttrs({
+                    src: src,
+                    unoptimized: unoptimized,
+                    layout: layout,
+                    width: widthInt,
+                    quality: qualityInt,
+                    sizes: sizes,
+                    loader: loader
+                  }),
+                  {
+                    decoding: "async",
+                    "data-nimg": layout,
+                    style: imgStyle,
+                    className: className,
+                    // @ts-ignore - TODO: upgrade to `@types/react@17`
+                    loading: loading || "lazy"
+                  }
+                )
               )
-            )
-          ),
+            ),
           priority // for browsers that do not support `imagesrcset`, and in those cases
             ? // it would likely cause the incorrect image to be preloaded.
               //

Commit: c4a0bf9

Optimize the noscript tag of the Image component

8521536

Ryuurock requested review from huozhi, ijjk, shuding, styfle and timneutkens as code owners December 31, 2021 05:39

ijjk added the type: next label Dec 31, 2021

This comment has been minimized.

Sign in to view

Merge branch 'vercel:canary' into image_noscript_optimization

667a629

This comment has been minimized.

Sign in to view

styfle reviewed Jan 1, 2022

View reviewed changes

test/unit/image-rendering.test.ts Outdated Show resolved Hide resolved

Update test name

e6f0c44

styfle approved these changes Jan 1, 2022

View reviewed changes

styfle changed the title ~~Optimize the noscript tag of the Image component~~ Fix next/image noscript tag to only render when lazy Jan 1, 2022

This comment has been minimized.

Sign in to view

ijjk approved these changes Jan 1, 2022

View reviewed changes

Merge branch 'canary' into image_noscript_optimization

c4a0bf9

kodiakhq bot merged commit 0bbbfa4 into vercel:canary Jan 1, 2022

vercel locked as resolved and limited conversation to collaborators Jan 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `next/image` noscript tag to only render when lazy #32918

Fix `next/image` noscript tag to only render when lazy #32918

Ryuurock commented Dec 31, 2021

This comment has been minimized.

This comment has been minimized.

styfle left a comment

This comment has been minimized.

ijjk commented Jan 1, 2022

Diffs

Diffs

Fix next/image noscript tag to only render when lazy #32918

Fix next/image noscript tag to only render when lazy #32918

Conversation

Ryuurock commented Dec 31, 2021

Bug

Feature

Documentation / Examples

This comment has been minimized.

This comment has been minimized.

styfle left a comment

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Jan 1, 2022

Stats from current PR

Diffs

Diffs

Fix `next/image` noscript tag to only render when lazy #32918

Fix `next/image` noscript tag to only render when lazy #32918