Fix `next/image` blur placeholder when JS is disabled #28269

styfle · 2021-08-18T22:30:09Z

This PR does a few things:

Moves <noscript> usage below the blur image since so that the <noscript> image renders on top of the blur image
Remove the isVisible check for <noscript> since we can't rely on client-side JS
Add loading=lazy to the <noscript> image to take advantage of native lazy loading (can't rely on JS lazy loading)

Fixes #28251

ijjk · 2021-08-18T23:47:04Z

Failing test suites

Commit: 132a704

test/integration/export-image-loader/test/index.test.js

Export with custom loader next/image component > should contain img element with same src in html output

Expand output

● Export with custom loader next/image component › should contain img element with same src in html output

expect(received).toBe(expected) // Object.is equality

Expected: "/custom/i.png"
Received: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

  75 |     const html = await fs.readFile(join(outdir, 'index.html'))
  76 |     const $ = cheerio.load(html)
> 77 |     expect($('img[alt="icon"]').attr('src')).toBe('/custom/i.png')
     |                                              ^
  78 |   })
  79 |
  80 |   afterAll(async () => {

  at Object.<anonymous> (integration/export-image-loader/test/index.test.js:77:46)

ijjk · 2021-08-19T03:33:41Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
buildDuration	14.9s	15s	⚠️ +114ms
buildDurationCached	3.8s	3.8s	-4ms
nodeModulesSize	61.4 MB	61.4 MB	⚠️ +156 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.697	2.679	-0.02
/ avg req/sec	927.12	933.03	+5.91
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.483	1.531	⚠️ +0.05
/error-in-render avg req/sec	1685.87	1633.12	⚠️ -52.75

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	23.2 kB	23.2 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	67.1 kB	67.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
_app-HASH.js gzip	979 B	979 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.14 kB	4.14 kB	⚠️ +5 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	318 B	318 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13 kB	13 kB	⚠️ +5 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
_buildManifest.js gzip	492 B	491 B	-1 B
Overall change	492 B	491 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
index.html gzip	539 B	539 B	✓
link.html gzip	550 B	550 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-d386c05297cfdcd36f03.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-1681da386f618d2e4e49.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-474b709f83960ad881c7.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f62bdaa581311495bb85.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -639,33 +639,6 @@
                   : null
               )
             : null,
-          !isVisible &&
-            /*#__PURE__*/ _react["default"].createElement(
-              "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": true,
-                    style: imgStyle,
-                    className: className
-                  }
-                )
-              )
-            ),
           /*#__PURE__*/ _react["default"].createElement(
             "img",
             Object.assign({}, rest, imgAttributes, {
@@ -685,6 +658,33 @@
               style: _objectSpread({}, imgStyle, blurStyle)
             })
           ),
+          /*#__PURE__*/ _react["default"].createElement(
+            "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": true,
+                  style: imgStyle,
+                  className: className,
+                  loading: loading || "lazy"
+                }
+              )
+            )
+          ),
           priority // Note how we omit the `href` attribute, as it would only be relevant
             ? // for browsers that do not support `imagesrcset`, and in those cases
               // it would likely cause the incorrect image to be preloaded.

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
buildDuration	12.5s	12.6s	⚠️ +35ms
buildDurationCached	5.2s	5.2s	⚠️ +74ms
nodeModulesSize	61.4 MB	61.4 MB	⚠️ +156 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.711	2.736	⚠️ +0.03
/ avg req/sec	922.09	913.77	⚠️ -8.32
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.467	1.559	⚠️ +0.09
/error-in-render avg req/sec	1704.17	1603.61	⚠️ -100.56

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
16.HASH.js gzip	186 B	186 B	✓
677f882d2ed8..HASH.js gzip	14.1 kB	14.1 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.6 kB	10.6 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	68 kB	68 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
_app-HASH.js gzip	964 B	964 B	✓
_error-HASH.js gzip	3.8 kB	3.8 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.87 kB	2.87 kB	✓
head-HASH.js gzip	3.06 kB	3.06 kB	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	2.98 kB	2.98 kB	✓
withRouter-HASH.js gzip	295 B	295 B	✓
30809af5c834..565.css gzip	125 B	125 B	✓
Overall change	18.1 kB	18.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
_buildManifest.js gzip	500 B	500 B	✓
Overall change	500 B	500 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-blur-image-w-noscript	Change
index.html gzip	585 B	585 B	✓
link.html gzip	597 B	597 B	✓
withRouter.html gzip	578 B	578 B	✓
Overall change	1.76 kB	1.76 kB	✓

Commit: ce1bdb0

This type was added in PR #28269 but doesn't need to be public and was causing conflicts with `@types/react@17`. We currently use `@types/react@16` so ideally we should upgrade to `@types/react@17` and then remove the `ts-ignore`. Fixes #28647

Fix blur placeholder when JS is disabled

8720b09

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Aug 18, 2021

styfle mentioned this pull request Aug 18, 2021

Blur placeholder stay visible with JavaScript disabled #28251

Closed

styfle added 2 commits August 18, 2021 18:44

Merge branch 'canary' into fix-blur-image-w-noscript

6ddee5a

Fix types

eafd37d

This comment has been minimized.

Sign in to view

Fix test

132a704

styfle marked this pull request as ready for review August 18, 2021 23:40

styfle requested review from huozhi, ijjk, padmaia, shuding and timneutkens as code owners August 18, 2021 23:40

This comment has been minimized.

Sign in to view

Fix another test

ce1bdb0

styfle changed the title ~~Fix blur placeholder when JS is disabled~~ Fix next/image blur placeholder when JS is disabled Aug 19, 2021

ijjk approved these changes Aug 19, 2021

View reviewed changes

kodiakhq bot merged commit 53f0973 into canary Aug 19, 2021

kodiakhq bot deleted the fix-blur-image-w-noscript branch August 19, 2021 04:26

styfle mentioned this pull request Aug 31, 2021

Fix TS type conflict for <img> tag #28672

Merged

sync-by-unito bot mentioned this pull request Sep 1, 2021

chore(deps): bump next from 11.1.0 to 11.1.1 filecoin-project/slate#916

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix `next/image` blur placeholder when JS is disabled #28269

Fix `next/image` blur placeholder when JS is disabled #28269

Uh oh!

styfle commented Aug 18, 2021 •

edited

Loading

Uh oh!

This comment has been minimized.

This comment has been minimized.

ijjk commented Aug 18, 2021

Uh oh!

This comment has been minimized.

ijjk commented Aug 19, 2021

Diffs

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix next/image blur placeholder when JS is disabled #28269

Fix next/image blur placeholder when JS is disabled #28269

Uh oh!

Conversation

styfle commented Aug 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

ijjk commented Aug 18, 2021

Failing test suites

Uh oh!

This comment has been minimized.

ijjk commented Aug 19, 2021

Stats from current PR

Diffs

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix `next/image` blur placeholder when JS is disabled #28269

Fix `next/image` blur placeholder when JS is disabled #28269

styfle commented Aug 18, 2021 •

edited

Loading