Font optimization bug fix #24968

janicklas-ralph · 2021-05-10T22:36:45Z

Bug

Fixes #24871
with test cases

ijjk · 2021-05-11T02:04:34Z

Failing test suites

Commit: 11389d7

test/integration/build-output/test/index.test.js

Build Output > Basic Application Output > should not deviate from snapshot

Expand output

● Build Output › Basic Application Output › should not deviate from snapshot

expect(received).toBeLessThanOrEqual(expected)

Expected: <= 0
Received:    0.09999999999999787

  123 |       expect(webpackSize.endsWith(' B')).toBe(true)
  124 |
> 125 |       expect(parseFloat(mainSize) - 19.3).toBeLessThanOrEqual(0)
      |                                           ^
  126 |       expect(mainSize.endsWith('kB')).toBe(true)
  127 |
  128 |       expect(parseFloat(frameworkSize) - 42.1).toBeLessThanOrEqual(0)

  at Object.<anonymous> (integration/build-output/test/index.test.js:125:43)

ijjk · 2021-05-12T08:58:31Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
buildDuration	14.7s	14.7s	-63ms
buildDurationCached	4.7s	4.5s	-203ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +1.39 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	janicklas-ralph/next.js font	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.611	2.511	-0.1
/ avg req/sec	957.63	995.61	+37.98
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.606	1.572	-0.03
/error-in-render avg req/sec	1556.86	1590.56	+33.7

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

	vercel/next.js canary	janicklas-ralph/next.js font	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.3 kB	19.4 kB	⚠️ +66 B
webpack-HASH.js gzip	994 B	994 B	✓
Overall change	59.6 kB	59.7 kB	⚠️ +66 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js font	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
_app-HASH.js gzip	1.02 kB	1.02 kB	✓
_error-HASH.js gzip	3.05 kB	3.06 kB	⚠️ +13 B
amp-HASH.js gzip	526 B	526 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	331 B	331 B	✓
withRouter-HASH.js gzip	329 B	329 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	8.52 kB	8.54 kB	⚠️ +13 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
_buildManifest.js gzip	394 B	395 B	⚠️ +1 B
Overall change	394 B	395 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	janicklas-ralph/next.js font	Change
index.html gzip	560 B	559 B	-1 B
link.html gzip	568 B	569 B	⚠️ +1 B
withRouter.html gzip	556 B	556 B	✓
Overall change	1.68 kB	1.68 kB	✓

Diffs

Diff for _buildManifest.js

@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-781a77dd168190130aad.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-77a136c514089a3e89cf.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-4a87604e7886e306bea2.js"
   ],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-a0345799be7f0667d737.js"],
   "/css": [

Diff for _error-HASH.js

@@ -450,7 +450,9 @@ Also adds support for deduplicated `key` properties
                 var newProps = _objectSpread({}, c.props || {});
 
                 newProps["data-href"] = newProps["href"];
-                newProps["href"] = undefined;
+                newProps["href"] = undefined; // Add this attribute to make it easy to identify optimized tags
+
+                newProps["data-optimized-fonts"] = true;
                 return /*#__PURE__*/ _react["default"].cloneElement(
                   c,
                   newProps

Diff for main-HASH.js

@@ -702,6 +702,19 @@
               updatePromise = null;
               var tags = {};
               head.forEach(function(h) {
+                if (
+                  // 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.href = h.props["data-href"];
+                  h.props["data-href"] = undefined;
+                }
+
                 var components = tags[h.type] || [];
                 components.push(h);
                 tags[h.type] = components;

Diff for index.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-d8f1e61da070a3b9d699.js"
+      href="/_next/static/chunks/webpack-9bc9a5abd5e320fd0072.js"
       as="script"
     />
     <link
@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-977252febd6c0f285c92.js"
+      href="/_next/static/chunks/main-222eadffa669323ed49d.js"
       as="script"
     />
     <link
@@ -48,7 +48,7 @@
       src="/_next/static/chunks/polyfills-01e9caf46d9a7f038c09.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-d8f1e61da070a3b9d699.js"
+      src="/_next/static/chunks/webpack-9bc9a5abd5e320fd0072.js"
       async=""
     ></script>
     <script
@@ -56,7 +56,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-977252febd6c0f285c92.js"
+      src="/_next/static/chunks/main-222eadffa669323ed49d.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-d8f1e61da070a3b9d699.js"
+      href="/_next/static/chunks/webpack-9bc9a5abd5e320fd0072.js"
       as="script"
     />
     <link
@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-977252febd6c0f285c92.js"
+      href="/_next/static/chunks/main-222eadffa669323ed49d.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-01e9caf46d9a7f038c09.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-d8f1e61da070a3b9d699.js"
+      src="/_next/static/chunks/webpack-9bc9a5abd5e320fd0072.js"
       async=""
     ></script>
     <script
@@ -61,7 +61,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-977252febd6c0f285c92.js"
+      src="/_next/static/chunks/main-222eadffa669323ed49d.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-d8f1e61da070a3b9d699.js"
+      href="/_next/static/chunks/webpack-9bc9a5abd5e320fd0072.js"
       as="script"
     />
     <link
@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-977252febd6c0f285c92.js"
+      href="/_next/static/chunks/main-222eadffa669323ed49d.js"
       as="script"
     />
     <link
@@ -48,7 +48,7 @@
       src="/_next/static/chunks/polyfills-01e9caf46d9a7f038c09.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-d8f1e61da070a3b9d699.js"
+      src="/_next/static/chunks/webpack-9bc9a5abd5e320fd0072.js"
       async=""
     ></script>
     <script
@@ -56,7 +56,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-977252febd6c0f285c92.js"
+      src="/_next/static/chunks/main-222eadffa669323ed49d.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
buildDuration	18.5s	18.2s	-238ms
buildDurationCached	6.7s	6.8s	⚠️ +118ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +1.39 kB

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

	vercel/next.js canary	janicklas-ralph/next.js font	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.3 kB	19.4 kB	⚠️ +66 B
webpack-HASH.js gzip	994 B	994 B	✓
Overall change	59.6 kB	59.7 kB	⚠️ +66 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js font	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
_app-HASH.js gzip	1.02 kB	1.02 kB	✓
_error-HASH.js gzip	3.05 kB	3.06 kB	⚠️ +13 B
amp-HASH.js gzip	526 B	526 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	331 B	331 B	✓
withRouter-HASH.js gzip	329 B	329 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	8.52 kB	8.54 kB	⚠️ +13 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
_buildManifest.js gzip	394 B	395 B	⚠️ +1 B
Overall change	394 B	395 B	⚠️ +1 B

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
_error.js	1.34 MB	1.34 MB	⚠️ +511 B
404.html	2.42 kB	2.42 kB	✓
500.html	2.41 kB	2.41 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.61 kB	1.61 kB	✓
css.html	1.79 kB	1.79 kB	✓
hooks.html	1.67 kB	1.67 kB	✓
index.js	1.34 MB	1.34 MB	⚠️ +511 B
link.js	1.4 MB	1.4 MB	⚠️ +511 B
routerDirect.js	1.39 MB	1.4 MB	⚠️ +511 B
withRouter.js	1.39 MB	1.4 MB	⚠️ +511 B
Overall change	6.9 MB	6.9 MB	⚠️ +2.56 kB

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
buildDuration	12.5s	12.4s	-84ms
buildDurationCached	5.2s	5.2s	⚠️ +40ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +1.39 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	janicklas-ralph/next.js font	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.68	2.728	⚠️ +0.05
/ avg req/sec	932.82	916.51	⚠️ -16.31
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.616	1.531	-0.09
/error-in-render avg req/sec	1546.61	1633.32	+86.71

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

	vercel/next.js canary	janicklas-ralph/next.js font	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.19 kB	7.26 kB	⚠️ +70 B
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.3 kB	⚠️ +70 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js font	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.72 kB	3.74 kB	⚠️ +15 B
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.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
21c68fa65a48..217.css gzip	125 B	125 B	✓
Overall change	9.37 kB	9.38 kB	⚠️ +15 B

Client Build Manifests

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

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js font	Change
index.html gzip	613 B	614 B	⚠️ +1 B
link.html gzip	619 B	620 B	⚠️ +1 B
withRouter.html gzip	606 B	607 B	⚠️ +1 B
Overall change	1.84 kB	1.84 kB	⚠️ +3 B

Diffs

Diff for _buildManifest.js

@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-b460df3d63326fbb06a1.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-176a8b2ad3a2229a0373.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-51845a36fe9902c725c2.js"
   ],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-27f75ad11120c5cdedd1.js"],
   "/css": [

Diff for _error-HASH.js

@@ -554,7 +554,9 @@ Also adds support for deduplicated `key` properties
                 var newProps = _objectSpread({}, c.props || {});
 
                 newProps["data-href"] = newProps["href"];
-                newProps["href"] = undefined;
+                newProps["href"] = undefined; // Add this attribute to make it easy to identify optimized tags
+
+                newProps["data-optimized-fonts"] = true;
                 return /*#__PURE__*/ _react["default"].cloneElement(
                   c,
                   newProps

Diff for main-HASH.js

@@ -243,6 +243,19 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
               updatePromise = null;
               var tags = {};
               head.forEach(function(h) {
+                if (
+                  // 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.href = h.props["data-href"];
+                  h.props["data-href"] = undefined;
+                }
+
                 var components = tags[h.type] || [];
                 components.push(h);
                 tags[h.type] = components;

Diff for index.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-4c490e4c5054ab9f64ff.js"
+      href="/_next/static/chunks/main-701385f14cf15bd0afa9.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4c490e4c5054ab9f64ff.js"
+      src="/_next/static/chunks/main-701385f14cf15bd0afa9.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-4c490e4c5054ab9f64ff.js"
+      href="/_next/static/chunks/main-701385f14cf15bd0afa9.js"
       as="script"
     />
     <link
@@ -70,7 +70,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4c490e4c5054ab9f64ff.js"
+      src="/_next/static/chunks/main-701385f14cf15bd0afa9.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -22,7 +22,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-4c490e4c5054ab9f64ff.js"
+      href="/_next/static/chunks/main-701385f14cf15bd0afa9.js"
       as="script"
     />
     <link
@@ -65,7 +65,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/main-4c490e4c5054ab9f64ff.js"
+      src="/_next/static/chunks/main-701385f14cf15bd0afa9.js"
       async=""
     ></script>
     <script

Commit: 3a2d240

Font optimization bug fix

c9fa86b

janicklas-ralph requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners May 10, 2021 22:36

ijjk added the type: next label May 10, 2021

This comment has been minimized.

Sign in to view

Fix error404FirstLoad size test case

e310c36

This comment has been minimized.

Sign in to view

Fix error404FirstLoad size test case

11389d7

This comment has been minimized.

Sign in to view

janicklas-ralph added 2 commits May 11, 2021 00:22

Fix error404FirstLoad size test case

bd766de

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

24df3e3

This comment has been minimized.

Sign in to view

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

3a2d240

timneutkens approved these changes May 12, 2021

View reviewed changes

timneutkens merged commit 6ad9172 into vercel:canary May 12, 2021

janicklas-ralph deleted the font branch May 12, 2021 18:20

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

Font optimization bug fix (vercel#24968)

38df821

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

Font optimization bug fix #24968

Font optimization bug fix #24968

janicklas-ralph commented May 10, 2021

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 May 11, 2021

This comment has been minimized.

ijjk commented May 12, 2021

Diffs

Diffs

Font optimization bug fix #24968

Font optimization bug fix #24968

Conversation

janicklas-ralph commented May 10, 2021

Bug

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 May 11, 2021

Failing test suites

This comment has been minimized.

ijjk commented May 12, 2021

Stats from current PR

Diffs

Diffs