Remove inert font tag in font optimization #28869

janicklas-ralph · 2021-09-07T08:23:20Z

Remove inert font tag in font optimization

ijjk · 2021-09-15T16:06:28Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
buildDuration	14.3s	14s	-308ms
buildDurationCached	3.7s	3.8s	⚠️ +177ms
nodeModulesSize	182 MB	182 MB	⚠️ +746 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	janicklas-ralph/next.js font	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.954	2.946	-0.01
/ avg req/sec	846.29	848.51	+2.22
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.492	1.436	-0.06
/error-in-render avg req/sec	1675.47	1741.03	+65.56

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	26.6 kB	26.6 kB	⚠️ +1 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	70.4 kB	70.4 kB	⚠️ +1 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js font	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js font	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	✓
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	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js font	Change
_buildManifest.js gzip	492 B	492 B	✓
Overall change	492 B	492 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
index.html gzip	540 B	541 B	⚠️ +1 B
link.html gzip	552 B	552 B	✓
withRouter.html gzip	533 B	533 B	✓
Overall change	1.63 kB	1.63 kB	⚠️ +1 B

Diffs

Diff for main-HASH.js

@@ -817,13 +817,18 @@
                   // If the font tag is loaded only on client navigation
                   // it won't be inlined. In this case revert to the original behavior
                   h.type === "link" &&
-                  h.props["data-optimized-fonts"] &&
-                  !document.querySelector(
-                    'style[data-href="'.concat(h.props["data-href"], '"]')
-                  )
+                  h.props["data-optimized-fonts"]
                 ) {
-                  h.props.href = h.props["data-href"];
-                  h.props["data-href"] = undefined;
+                  if (
+                    document.querySelector(
+                      'style[data-href="'.concat(h.props["data-href"], '"]')
+                    )
+                  ) {
+                    return;
+                  } else {
+                    h.props.href = h.props["data-href"];
+                    h.props["data-href"] = undefined;
+                  }
                 }
 
                 var components = tags[h.type] || [];

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-de9cd07df99d840e3b59.js"
+      src="/_next/static/chunks/main-1cbb992dbd11e6e10fd6.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-de9cd07df99d840e3b59.js"
+      src="/_next/static/chunks/main-1cbb992dbd11e6e10fd6.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-de9cd07df99d840e3b59.js"
+      src="/_next/static/chunks/main-1cbb992dbd11e6e10fd6.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
buildDuration	7.3s	7.3s	-39ms
buildDurationCached	3.6s	3.6s	-2ms
nodeModulesSize	182 MB	182 MB	⚠️ +746 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.957	3.029	⚠️ +0.07
/ avg req/sec	845.56	825.44	⚠️ -20.12
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.463	1.498	⚠️ +0.03
/error-in-render avg req/sec	1708.78	1669.21	⚠️ -39.57

Client Bundles (main, webpack, commons)

	vercel/next.js canary	janicklas-ralph/next.js font	Change
264.HASH.js gzip	179 B	179 B	✓
675-HASH.js gzip	13.8 kB	13.8 kB	✓
framework-HASH.js gzip	50.7 kB	50.7 kB	✓
main-HASH.js gzip	34.4 kB	34.4 kB	✓
webpack-HASH.js gzip	1.65 kB	1.65 kB	✓
Overall change	101 kB	101 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js font	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js font	Change
_app-HASH.js gzip	1.33 kB	1.33 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	331 B	331 B	✓
css-HASH.js gzip	352 B	352 B	✓
dynamic-HASH.js gzip	2.8 kB	2.8 kB	✓
head-HASH.js gzip	356 B	356 B	✓
hooks-HASH.js gzip	652 B	652 B	✓
image-HASH.js gzip	575 B	575 B	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.2 kB	2.2 kB	✓
routerDirect..HASH.js gzip	327 B	327 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	323 B	323 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	10.2 kB	10.2 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js font	Change
_buildManifest.js gzip	515 B	515 B	✓
Overall change	515 B	515 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
index.html gzip	538 B	539 B	⚠️ +1 B
link.html gzip	552 B	551 B	-1 B
withRouter.html gzip	531 B	532 B	⚠️ +1 B
Overall change	1.62 kB	1.62 kB	⚠️ +1 B

Diffs

Diff for main-HASH.js

@@ -159,13 +159,18 @@
                 if (
                   // it won't be inlined. In this case revert to the original behavior
                   h.type === "link" &&
-                  h.props["data-optimized-fonts"] &&
-                  !document.querySelector(
-                    'style[data-href="'.concat(h.props["data-href"], '"]')
-                  )
+                  h.props["data-optimized-fonts"]
                 ) {
-                  h.props.href = h.props["data-href"];
-                  h.props["data-href"] = undefined;
+                  if (
+                    document.querySelector(
+                      'style[data-href="'.concat(h.props["data-href"], '"]')
+                    )
+                  ) {
+                    return;
+                  } else {
+                    h.props.href = h.props["data-href"];
+                    h.props["data-href"] = undefined;
+                  }
                 }
                 var components = tags[h.type] || [];
                 components.push(h);

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-88ad16c07be3933b40ac.js"
+      src="/_next/static/chunks/main-2e27c873a81bf79e7a73.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-88ad16c07be3933b40ac.js"
+      src="/_next/static/chunks/main-2e27c873a81bf79e7a73.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-88ad16c07be3933b40ac.js"
+      src="/_next/static/chunks/main-2e27c873a81bf79e7a73.js"
       defer=""
     ></script>
     <script

Commit: 312320e

ijjk · 2021-09-15T16:09:32Z

Failing test suites

Commit: 312320e

test/development/acceptance/ReactRefreshLogBoxMisc.test.ts

ReactRefreshLogBox > server-side only compilation errors

Expand output

● ReactRefreshLogBox › server-side only compilation errors

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

Expected: true
Received: false

  171 |               passHref={undefined}
  172 |               prefetch={undefined}
> 173 |             >
      |              ^
  174 |               Abc
  175 |             </Link>
  176 |           )

  at Object.<anonymous> (development/acceptance/ReactRefreshLogBoxMisc.test.ts:173:47)

* canary: (41 commits) Add client-side debugging instructions (vercel#28815) v11.1.3-canary.19 Update next-swc binaries (vercel#29132) Fix partial one off global selectors (vercel#29128) Update trace ignores for next import (vercel#29119) Development tracing improvements (vercel#29076) Remove log from failing to parse source map (vercel#29118) Remove inert font tag in font optimization (vercel#28869) v11.1.3-canary.18 Update Redux example to use Toolkit + update dependencies. (vercel#29104) Ensure browser instances are not re-created un-necessarily (vercel#29091) Update styled-jsx (vercel#29103) v11.1.3-canary.17 Add/styled jsx swc (vercel#29005) v11.1.3-canary.16 Fix host segment replacing for custom routes (vercel#29090) Add stats config for SWC (vercel#28883) reload the page to show 404 when receiving `invalid` event from on-demand-entries (vercel#29074) Add crossOrigin type to the NextConfig (vercel#29033) Fix/upload binary artifact (vercel#29069) ...

Remove inert font tag in font optimization

9d56979

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Sep 7, 2021

This comment has been minimized.

Sign in to view

Fix lint

07cf4db

This comment has been minimized.

Sign in to view

Remove inert font tag during font optimization

b54c34a

janicklas-ralph marked this pull request as ready for review September 13, 2021 22:09

janicklas-ralph requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners September 13, 2021 22:09

janicklas-ralph added 3 commits September 13, 2021 15:09

Merge branch 'canary' of github.com:vercel/next.js into font

d077cef

Fix lint

5e57432

Fix lint

24521b3

This comment has been minimized.

Sign in to view

janicklas-ralph added 2 commits September 14, 2021 10:04

Fix lint

364607c

Merge branch 'canary' of github.com:vercel/next.js into font

b9f79c6

This comment has been minimized.

Sign in to view

Merge branch 'canary' of github.com:vercel/next.js into font

65a2ca1

This comment has been minimized.

Sign in to view

ijjk approved these changes Sep 15, 2021

View reviewed changes

Merge branch 'canary' into font

312320e

ijjk merged commit 7340821 into vercel:canary Sep 15, 2021

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove inert font tag in font optimization #28869

Remove inert font tag in font optimization #28869

janicklas-ralph commented Sep 7, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 15, 2021

Diffs

Diffs

ijjk commented Sep 15, 2021

Remove inert font tag in font optimization #28869

Remove inert font tag in font optimization #28869

Conversation

janicklas-ralph commented Sep 7, 2021 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 15, 2021

Stats from current PR

Diffs

Diffs

ijjk commented Sep 15, 2021

Failing test suites

janicklas-ralph commented Sep 7, 2021 •

edited