Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from Aug 19, 2021

Conversation

styfle
Copy link
Member

@styfle styfle commented Aug 18, 2021

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

This comment has been minimized.

@ijjk

This comment has been minimized.

@styfle styfle marked this pull request as ready for review Aug 18, 2021
@ijjk
Copy link
Member

ijjk commented Aug 18, 2021

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

This comment has been minimized.

@styfle styfle changed the title Fix blur placeholder when JS is disabled Fix next/image blur placeholder when JS is disabled Aug 19, 2021
@ijjk
Copy link
Member

ijjk commented Aug 19, 2021

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

ijjk
ijjk approved these changes Aug 19, 2021
@kodiakhq kodiakhq bot merged commit 53f0973 into canary Aug 19, 2021
34 checks passed
@kodiakhq kodiakhq bot deleted the fix-blur-image-w-noscript branch Aug 19, 2021
kodiakhq bot pushed a commit that referenced this pull request Aug 31, 2021
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
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Blur placeholder stay visible with JavaScript disabled
2 participants