Add experimental image post-processing #15875

atcastle · 2020-08-04T16:22:25Z

This PR adds a second experimental post-processing step for the framework introduced by @prateekbh in #14746. The image post-processing step scans the rendered document for the first few images and uses a simple heuristic to determine if the images should be automatically preloaded.

Analysis of quite a few production Next apps has shown that a lot of sites are taking a substantial hit to their LCP score because an image that's part of the "hero" element on the page is not preloaded and is getting downloaded with lower priority than the JavaScript bundles. This post-processor should automatically fix that for a lot of sites, without causing any real performance effects in cases where it fails to identify the hero image.

This feature is behind an experimental flag, and will be subject to quite a bit of experimentation and tweaking before it's ready to be made a default setting.

…u/next.js into font-optims

…tims

…ocess-optimization

…tims

ijjk · 2020-08-04T17:33:58Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
buildDuration	13.4s	13.6s	⚠️ +212ms
nodeModulesSize	65.5 MB	65.5 MB	⚠️ +9.17 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.578	2.66	⚠️ +0.08
/ avg req/sec	969.59	939.7	⚠️ -29.89
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.534	1.64	⚠️ +0.11
/error-in-render avg req/sec	1630.18	1524.51	⚠️ -105.67

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
677f882d2ed8..afbf.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
main-2ecb3b8..bd63.js gzip	6.73 kB	6.73 kB	✓
webpack-ccf5..276a.js gzip	751 B	751 B	✓
Overall change	56.8 kB	56.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
677f882d2ed8..dule.js gzip	6.11 kB	6.11 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
main-dbff266..dule.js gzip	5.81 kB	5.81 kB	✓
webpack-10c7..dule.js gzip	751 B	751 B	✓
Overall change	51.8 kB	51.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
polyfills-75..1629.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_app-874bd8a..0103.js gzip	1.28 kB	1.28 kB	✓
_error-fa39c..ec40.js gzip	3.45 kB	3.45 kB	✓
hooks-585f07..95a3.js gzip	887 B	887 B	✓
index-c7b63f..fc02.js gzip	227 B	227 B	✓
link-e97733c..af21.js gzip	1.3 kB	1.3 kB	✓
routerDirect..ebc7.js gzip	284 B	284 B	✓
withRouter-2..db68.js gzip	284 B	284 B	✓
Overall change	7.72 kB	7.72 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_app-97e743e..dule.js gzip	626 B	626 B	✓
_error-b4004..dule.js gzip	2.3 kB	2.3 kB	✓
hooks-696209..dule.js gzip	387 B	387 B	✓
index-a4dd74..dule.js gzip	226 B	226 B	✓
link-fbb1d2e..dule.js gzip	1.25 kB	1.25 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-1..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_buildManifest.js gzip	272 B	272 B	✓
_buildManife..dule.js gzip	280 B	280 B	✓
Overall change	552 B	552 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
index.html gzip	944 B	944 B	✓
link.html gzip	953 B	953 B	✓
withRouter.html gzip	940 B	940 B	✓
Overall change	2.84 kB	2.84 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
buildDuration	15.2s	15.3s	⚠️ +124ms
nodeModulesSize	65.5 MB	65.5 MB	⚠️ +9.17 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
677f882d2ed8..afbf.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
main-2ecb3b8..bd63.js gzip	6.73 kB	6.73 kB	✓
webpack-ccf5..276a.js gzip	751 B	751 B	✓
Overall change	56.8 kB	56.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
677f882d2ed8..dule.js gzip	6.11 kB	6.11 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
main-dbff266..dule.js gzip	5.81 kB	5.81 kB	✓
webpack-10c7..dule.js gzip	751 B	751 B	✓
Overall change	51.8 kB	51.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
polyfills-75..1629.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_app-874bd8a..0103.js gzip	1.28 kB	1.28 kB	✓
_error-fa39c..ec40.js gzip	3.45 kB	3.45 kB	✓
hooks-585f07..95a3.js gzip	887 B	887 B	✓
index-c7b63f..fc02.js gzip	227 B	227 B	✓
link-e97733c..af21.js gzip	1.3 kB	1.3 kB	✓
routerDirect..ebc7.js gzip	284 B	284 B	✓
withRouter-2..db68.js gzip	284 B	284 B	✓
Overall change	7.72 kB	7.72 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_app-97e743e..dule.js gzip	626 B	626 B	✓
_error-b4004..dule.js gzip	2.3 kB	2.3 kB	✓
hooks-696209..dule.js gzip	387 B	387 B	✓
index-a4dd74..dule.js gzip	226 B	226 B	✓
link-fbb1d2e..dule.js gzip	1.25 kB	1.25 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-1..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_buildManifest.js gzip	272 B	272 B	✓
_buildManife..dule.js gzip	280 B	280 B	✓
Overall change	552 B	552 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_error.js	1.02 MB	1.02 MB	⚠️ +2.24 kB
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.82 kB	3.82 kB	✓
index.js	1.02 MB	1.02 MB	⚠️ +2.24 kB
link.js	1.06 MB	1.06 MB	⚠️ +2.24 kB
routerDirect.js	1.05 MB	1.05 MB	⚠️ +2.24 kB
withRouter.js	1.05 MB	1.05 MB	⚠️ +2.24 kB
Overall change	5.2 MB	5.21 MB	⚠️ +11.2 kB

Commit: 3ec13d9

ijjk · 2020-08-05T17:40:22Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
buildDuration	14.2s	14.2s	-2ms
nodeModulesSize	66 MB	66 MB	⚠️ +9.17 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.708	2.6	-0.11
/ avg req/sec	923.3	961.36	+38.06
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.68	1.564	-0.12
/error-in-render avg req/sec	1488.53	1598.32	+109.79

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
677f882d2ed8..afbf.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
main-76d73eb..95d8.js gzip	6.73 kB	6.73 kB	✓
webpack-ccf5..276a.js gzip	751 B	751 B	✓
Overall change	56.8 kB	56.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
677f882d2ed8..dule.js gzip	6.11 kB	6.11 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
main-0b6ca7d..dule.js gzip	5.81 kB	5.81 kB	✓
webpack-10c7..dule.js gzip	751 B	751 B	✓
Overall change	51.8 kB	51.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
polyfills-75..1629.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_app-874bd8a..0103.js gzip	1.28 kB	1.28 kB	✓
_error-fa39c..ec40.js gzip	3.45 kB	3.45 kB	✓
hooks-585f07..95a3.js gzip	887 B	887 B	✓
index-c7b63f..fc02.js gzip	227 B	227 B	✓
link-e97733c..af21.js gzip	1.3 kB	1.3 kB	✓
routerDirect..ebc7.js gzip	284 B	284 B	✓
withRouter-2..db68.js gzip	284 B	284 B	✓
Overall change	7.72 kB	7.72 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_app-97e743e..dule.js gzip	626 B	626 B	✓
_error-b4004..dule.js gzip	2.3 kB	2.3 kB	✓
hooks-696209..dule.js gzip	387 B	387 B	✓
index-a4dd74..dule.js gzip	226 B	226 B	✓
link-fbb1d2e..dule.js gzip	1.25 kB	1.25 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-1..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_buildManifest.js gzip	272 B	272 B	✓
_buildManife..dule.js gzip	280 B	280 B	✓
Overall change	552 B	552 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
index.html gzip	945 B	945 B	✓
link.html gzip	953 B	953 B	✓
withRouter.html gzip	939 B	939 B	✓
Overall change	2.84 kB	2.84 kB	✓

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
buildDuration	15.7s	15.5s	-242ms
nodeModulesSize	66 MB	66 MB	⚠️ +9.17 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
677f882d2ed8..afbf.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
main-76d73eb..95d8.js gzip	6.73 kB	6.73 kB	✓
webpack-ccf5..276a.js gzip	751 B	751 B	✓
Overall change	56.8 kB	56.8 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
677f882d2ed8..dule.js gzip	6.11 kB	6.11 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
main-0b6ca7d..dule.js gzip	5.81 kB	5.81 kB	✓
webpack-10c7..dule.js gzip	751 B	751 B	✓
Overall change	51.8 kB	51.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
polyfills-75..1629.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_app-874bd8a..0103.js gzip	1.28 kB	1.28 kB	✓
_error-fa39c..ec40.js gzip	3.45 kB	3.45 kB	✓
hooks-585f07..95a3.js gzip	887 B	887 B	✓
index-c7b63f..fc02.js gzip	227 B	227 B	✓
link-e97733c..af21.js gzip	1.3 kB	1.3 kB	✓
routerDirect..ebc7.js gzip	284 B	284 B	✓
withRouter-2..db68.js gzip	284 B	284 B	✓
Overall change	7.72 kB	7.72 kB	✓

Client Pages Modern

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_app-97e743e..dule.js gzip	626 B	626 B	✓
_error-b4004..dule.js gzip	2.3 kB	2.3 kB	✓
hooks-696209..dule.js gzip	387 B	387 B	✓
index-a4dd74..dule.js gzip	226 B	226 B	✓
link-fbb1d2e..dule.js gzip	1.25 kB	1.25 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-1..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_buildManifest.js gzip	272 B	272 B	✓
_buildManife..dule.js gzip	280 B	280 B	✓
Overall change	552 B	552 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js add-image-postprocess	Change
_error.js	1.02 MB	1.02 MB	⚠️ +2.24 kB
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.82 kB	3.82 kB	✓
index.js	1.02 MB	1.02 MB	⚠️ +2.24 kB
link.js	1.06 MB	1.06 MB	⚠️ +2.24 kB
routerDirect.js	1.05 MB	1.05 MB	⚠️ +2.24 kB
withRouter.js	1.05 MB	1.05 MB	⚠️ +2.24 kB
Overall change	5.2 MB	5.21 MB	⚠️ +11.2 kB

Commit: 282fd13

prateekbh

I have a hunch that this might have missed addressing the serverless case. Sorry for late review

prateekbh · 2020-08-05T16:47:15Z

packages/next/next-server/lib/post-process.ts

+      if (isImgEligible(imgElements[i])) {
+        eligibleImages.push(imgElements[i])
+      }
+      if (eligibleImages.length >= MAXIMUM_IMAGE_PRELOADS) {


dumb/not a very relevant question: does a 5*500 image qualify? If yes, would it be worth preloading?

5 by 500 would (just) not qualify for preload since the logic down at line 207 checks to see if width * height is less than or equal to 2500 and disqualifies if that's so. That's pretty arbitrary, though--do you think a different cutoff would be better?

oh sorry I mis-read this line. This makes sense. I feel its ok to start with arbitrary number and change it with some experiment results

prateekbh · 2020-08-05T18:03:31Z

test/integration/image-optimization/test/index.test.js

+    )
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)


This needs the serverless server https://github.com/vercel/next.js/blob/canary/test/integration/font-optimization/server.js

ivan-aksamentov · 2020-08-05T23:56:39Z

yarn.lock

  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
  integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=

+he@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+  integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
+
 header-case@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.1.tgz#9535973197c144b09613cd65d317ef19963bd02d"


What is the significance of this change to yarn.lock?
cc @Timer

jecassis · 2020-08-06T03:56:24Z

The regular expression seems to break with inlined images when scanning for already preloaded ones. Error message:

SyntaxError: Invalid regular expression: /<link[^>]*href[^>]*data:image/png;base64,iVBORw...YII=/: Nothing to repeat

prateekbh and others added 30 commits June 15, 2020 09:26

adding a font gatherer webpack plugin

eff6343

fixing dep

9ed7962

Initial commit with framework for post processing middleware

3b85140

Merge branch 'post-process-optimization' of https://github.com/azukar…

3934f53

…u/next.js into font-optims

generating the style tags

d5ed404

WIP font optimizations

39fcfcd

working static pages font replacement

8a932d1

minifying stylesheets

126f904

Merge branch 'canary' of https://github.com/zeit/next.js into font-op…

069cbfa

…tims

Merge branch 'canary' of https://github.com/zeit/next.js into post-pr…

27bdbfe

…ocess-optimization

Merge branch 'post-process-optimization' into font-optims

6a14652

WIP font-optimization changes

d5137c3

Merge branch 'canary' of https://github.com/zeit/next.js into font-op…

7a79523

…tims

adding comments

0f89a6c

switching from filter to map

2f45a7b

fixing server path

6f9e1e7

Fixing serverless builds

210a5cf

reverting unwated change

ca93eba

removing commented code

0bad5cb

adding experimental flag

463ca85

code resuability

004ebcb

renaming flags

6acdce5

renaming flags

2289980

guarding behind a flag

0d0c96d

removing Promise.allSettled

45e7929

Bug fixes and adding tests

2602b31

sending experimental flags

5cde0b2

bug fixes and adding tests

fcf567c

adding serverless tests

f70f936

minor improvement

3ef9d55

prateekbh and others added 12 commits July 6, 2020 13:15

moving ast types to dep

3eaade2

shifting font urls to a constant

6000fae

removing dependency from recast

20ab602

Merge branch 'canary' of https://github.com/zeit/next.js into font-op…

91b5bb4

…tims

fixing flag name and adding tests

cb5e320

Merge branch 'canary' into font-optims

cf4d9d1

addressing comments

bf09fcb

Merge branch 'canary' of https://github.com/zeit/next.js into font-op…

bd2f156

…tims

Get image post-processing working with all targets

135c6bb

Merge remote-tracking branch 'origin/canary' into add-image-postprocess

12be975

Update image post-processor with experimental heuristics

9f9d8e7

Don't add another preload tag for an image if one already exists

b64f591

atcastle requested review from ijjk, lfades, Timer and timneutkens as code owners August 4, 2020 16:22

ijjk added the type: next label Aug 4, 2020

Merge remote-tracking branch 'origin/canary' into add-image-postprocess

3ec13d9

timneutkens approved these changes Aug 5, 2020

View reviewed changes

Merge branch 'canary' into add-image-postprocess

282fd13

kodiakhq bot merged commit b6060fa into vercel:canary Aug 5, 2020

prateekbh reviewed Aug 5, 2020

View reviewed changes

Timer deleted the add-image-postprocess branch August 5, 2020 18:04

ivan-aksamentov reviewed Aug 5, 2020

View reviewed changes

kelvinsanchez15 mentioned this pull request Oct 6, 2020

Optimize fonts and images with NextJS experimental flags kelvinsanchez15/portfolio#5

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add experimental image post-processing #15875

Add experimental image post-processing #15875

atcastle commented Aug 4, 2020

ijjk commented Aug 4, 2020

ijjk commented Aug 5, 2020

prateekbh left a comment

prateekbh Aug 5, 2020

atcastle Aug 5, 2020

prateekbh Aug 5, 2020

prateekbh Aug 5, 2020

ivan-aksamentov Aug 5, 2020

jecassis commented Aug 6, 2020

Add experimental image post-processing #15875

Add experimental image post-processing #15875

Conversation

atcastle commented Aug 4, 2020

ijjk commented Aug 4, 2020

Stats from current PR

ijjk commented Aug 5, 2020

Stats from current PR

prateekbh left a comment

Choose a reason for hiding this comment

prateekbh Aug 5, 2020

Choose a reason for hiding this comment

atcastle Aug 5, 2020

Choose a reason for hiding this comment

prateekbh Aug 5, 2020

Choose a reason for hiding this comment

prateekbh Aug 5, 2020

Choose a reason for hiding this comment

ivan-aksamentov Aug 5, 2020

Choose a reason for hiding this comment

jecassis commented Aug 6, 2020