Add css blur when `placeholder=blur` #25945

styfle · 2021-06-09T16:53:49Z

Fixes pixelation so it looks smoother when loading an image with placeholder=blur

Before

After

atcastle

This looks good. I agree we need to apply a blur here, and the CSS method should be the easiest way to do that right now.

@Joonpark13 let's discuss a plan for measuring performance differences between this and the wrapper SVG strategy. We can switch back in the future if it looks like there will be LCP benefits.

ijjk · 2021-06-09T18:08:15Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
buildDuration	12.3s	12.6s	⚠️ +297ms
buildDurationCached	3.1s	3s	-58ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +205 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.44	2.454	⚠️ +0.01
/ avg req/sec	1024.74	1018.87	⚠️ -5.87
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.329	1.26	-0.07
/error-in-render avg req/sec	1881.66	1983.37	+101.71

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
index.html gzip	572 B	572 B	✓
link.html gzip	579 B	579 B	✓
withRouter.html gzip	567 B	567 B	✓
Overall change	1.72 kB	1.72 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
buildDuration	14.3s	14.2s	-129ms
buildDurationCached	4.1s	4s	-76ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +205 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
_error.js	16.9 kB	16.9 kB	✓
404.html	2.44 kB	2.44 kB	✓
500.html	2.43 kB	2.43 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.63 kB	1.63 kB	✓
css.html	1.81 kB	1.81 kB	✓
hooks.html	1.69 kB	1.69 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.4 kB	17.4 kB	✓
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
buildDuration	11s	11.1s	⚠️ +62ms
buildDurationCached	4.4s	4.4s	-53ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +205 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.603	2.568	-0.04
/ avg req/sec	960.48	973.64	+13.16
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.275	1.262	-0.01
/error-in-render avg req/sec	1960.35	1980.54	+20.19

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	61.1 kB	61.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.17 kB	9.17 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js blur-background-css-filter	Change
index.html gzip	626 B	626 B	✓
link.html gzip	633 B	633 B	✓
withRouter.html gzip	619 B	619 B	✓
Overall change	1.88 kB	1.88 kB	✓

Commit: e78c73b

ijjk · 2021-06-09T18:21:04Z

Failing test suites

Commit: e78c73b

test/integration/basic/test/index.test.js

Basic Features > should polyfill Node.js modules

Expand output

● Basic Features › should polyfill Node.js modules

thrown: "Exceeded timeout of 300000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  35 |   afterAll(() => killApp(context.server))
  36 |
> 37 |   it('should polyfill Node.js modules', async () => {
     |   ^
  38 |     const browser = await webdriver(context.appPort, '/node-browser-polyfills')
  39 |
  40 |     console.error({

  at integration/basic/test/index.test.js:37:3
  at Object.<anonymous> (integration/basic/test/index.test.js:18:1)

* Add css blur when `placeholder=blur` * Fix tests

Add css blur when placeholder=blur

75d15d6

styfle requested review from Joonpark13 and atcastle June 9, 2021 16:53

styfle requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners June 9, 2021 16:53

ijjk added the type: next label Jun 9, 2021

This comment has been minimized.

Sign in to view

atcastle previously approved these changes Jun 9, 2021

View reviewed changes

Fix tests

e78c73b

styfle dismissed atcastle’s stale review via e78c73b June 9, 2021 17:57

timneutkens approved these changes Jun 9, 2021

View reviewed changes

timneutkens merged commit 79b4cb0 into canary Jun 9, 2021

timneutkens deleted the blur-background-css-filter branch June 9, 2021 18:28

Daiz mentioned this pull request Jun 14, 2021

Add placeholder="blur" to Image component #18858

Closed

sync-by-unito bot mentioned this pull request Jun 16, 2021

chore(deps): bump next from 10.1.2 to 11.0.0 filecoin-project/slate#793

Closed

flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 16, 2021

Add css blur when placeholder=blur (vercel#25945)

350d988

* Add css blur when `placeholder=blur` * Fix tests

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

Add css blur when `placeholder=blur` #25945

Add css blur when `placeholder=blur` #25945

styfle commented Jun 9, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

atcastle left a comment

ijjk commented Jun 9, 2021

ijjk commented Jun 9, 2021

Add css blur when placeholder=blur #25945

Add css blur when placeholder=blur #25945

Conversation

styfle commented Jun 9, 2021 • edited

Before

After

This comment has been minimized.

This comment has been minimized.

atcastle left a comment

Choose a reason for hiding this comment

ijjk commented Jun 9, 2021

Stats from current PR

ijjk commented Jun 9, 2021

Failing test suites

Add css blur when `placeholder=blur` #25945

Add css blur when `placeholder=blur` #25945

styfle commented Jun 9, 2021 •

edited