Land - Font optimizations - Adobe Fonts / Typekit support #24834

ijjk · 2021-05-05T19:53:40Z

This updates this initial PR here #18146 to resolve merge conflicts and updates tests since we aren't able to update that PR itself.

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.

Closes: #18146

# Conflicts: # packages/next/next-server/lib/constants.ts # test/integration/font-optimization/test/index.test.js

ijjk · 2021-05-06T03:44:08Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
buildDuration	12.2s	12.3s	⚠️ +79ms
buildDurationCached	4.1s	3.8s	-319ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +158 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.051	2.041	-0.01
/ avg req/sec	1218.79	1224.87	+6.08
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.131	1.082	-0.05
/error-in-render avg req/sec	2209.72	2309.61	+99.89

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.3 kB	19.3 kB	✓
webpack-HASH.js gzip	996 B	996 B	✓
Overall change	59.6 kB	59.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js feat/typekit-support	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	ijjk/next.js feat/typekit-support	Change
_app-HASH.js gzip	1.02 kB	1.02 kB	✓
_error-HASH.js gzip	3.04 kB	3.05 kB	⚠️ +16 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.51 kB	8.52 kB	⚠️ +16 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
_buildManifest.js gzip	393 B	394 B	⚠️ +1 B
Overall change	393 B	394 B	⚠️ +1 B

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
index.html gzip	561 B	560 B	-1 B
link.html gzip	570 B	569 B	-1 B
withRouter.html gzip	557 B	557 B	✓
Overall change	1.69 kB	1.69 kB	-2 B

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-9459a67ba367dde23f4d.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-77a136c514089a3e89cf.js"
   ],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-a0345799be7f0667d737.js"],
   "/css": [

Diff for _error-HASH.js

@@ -440,7 +440,10 @@ Also adds support for deduplicated `key` properties
               if (
                 c.type === "link" &&
                 c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
-                ["https://fonts.googleapis.com/css"].some(function(url) {
+                [
+                  "https://fonts.googleapis.com/css",
+                  "https://use.typekit.net/"
+                ].some(function(url) {
                   return c.props["href"].startsWith(url);
                 })
               ) {

Diff for index.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-dd6fffdf0dbc836f25a7.js"
+      href="/_next/static/chunks/webpack-d70f99a1c072ba84a76b.js"
       as="script"
     />
     <link
@@ -48,7 +48,7 @@
       src="/_next/static/chunks/polyfills-01e9caf46d9a7f038c09.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-dd6fffdf0dbc836f25a7.js"
+      src="/_next/static/chunks/webpack-d70f99a1c072ba84a76b.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-dd6fffdf0dbc836f25a7.js"
+      href="/_next/static/chunks/webpack-d70f99a1c072ba84a76b.js"
       as="script"
     />
     <link
@@ -53,7 +53,7 @@
       src="/_next/static/chunks/polyfills-01e9caf46d9a7f038c09.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-dd6fffdf0dbc836f25a7.js"
+      src="/_next/static/chunks/webpack-d70f99a1c072ba84a76b.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-dd6fffdf0dbc836f25a7.js"
+      href="/_next/static/chunks/webpack-d70f99a1c072ba84a76b.js"
       as="script"
     />
     <link
@@ -48,7 +48,7 @@
       src="/_next/static/chunks/polyfills-01e9caf46d9a7f038c09.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-dd6fffdf0dbc836f25a7.js"
+      src="/_next/static/chunks/webpack-d70f99a1c072ba84a76b.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
buildDuration	15s	14.9s	-87ms
buildDurationCached	5.7s	5.8s	⚠️ +57ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +158 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	19.3 kB	19.3 kB	✓
webpack-HASH.js gzip	996 B	996 B	✓
Overall change	59.6 kB	59.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js feat/typekit-support	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	ijjk/next.js feat/typekit-support	Change
_app-HASH.js gzip	1.02 kB	1.02 kB	✓
_error-HASH.js gzip	3.04 kB	3.05 kB	⚠️ +16 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.51 kB	8.52 kB	⚠️ +16 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
_buildManifest.js gzip	393 B	394 B	⚠️ +1 B
Overall change	393 B	394 B	⚠️ +1 B

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
_error.js	1.34 MB	1.34 MB	⚠️ +56 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.35 MB	1.35 MB	⚠️ +56 B
link.js	1.4 MB	1.4 MB	⚠️ +56 B
routerDirect.js	1.39 MB	1.39 MB	⚠️ +56 B
withRouter.js	1.39 MB	1.39 MB	⚠️ +56 B
Overall change	6.9 MB	6.9 MB	⚠️ +280 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
buildDuration	10.6s	10.6s	-14ms
buildDurationCached	4.3s	4.3s	-41ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +158 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.098	2.103	⚠️ +0.01
/ avg req/sec	1191.72	1188.63	⚠️ -3.09
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.118	1.108	-0.01
/error-in-render avg req/sec	2236.49	2255.35	+18.86

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js feat/typekit-support	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.19 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js feat/typekit-support	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	ijjk/next.js feat/typekit-support	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.72 kB	⚠️ +14 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.36 kB	9.37 kB	⚠️ +14 B

Client Build Manifests

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js feat/typekit-support	Change
index.html gzip	613 B	613 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	606 B	606 B	✓
Overall change	1.84 kB	1.84 kB	✓

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-c75557f170c57b2c8979.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-176a8b2ad3a2229a0373.js"
   ],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-27f75ad11120c5cdedd1.js"],
   "/css": [

Diff for _error-HASH.js

@@ -544,7 +544,10 @@ Also adds support for deduplicated `key` properties
               if (
                 c.type === "link" &&
                 c.props["href"] && // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
-                ["https://fonts.googleapis.com/css"].some(function(url) {
+                [
+                  "https://fonts.googleapis.com/css",
+                  "https://use.typekit.net/"
+                ].some(function(url) {
                   return c.props["href"].startsWith(url);
                 })
               ) {

Commit: c074d0c

janicklas-ralph · 2021-05-06T04:15:10Z

test/integration/font-optimization/fixtures/with-typekit/server.js

@@ -0,0 +1,111 @@
+const http = require('http')


We don't need this file to be duplicated

andrewgadziksonos · 2021-05-20T10:53:10Z

This is exciting! Thanks for the help!

This updates this initial PR here vercel#18146 to resolve merge conflicts and updates tests since we aren't able to update that PR itself. ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. Closes: vercel#18146

andrewgadziksonos and others added 4 commits October 22, 2020 14:50

feat: add typekit as a font provider

6fde73c

chore: font-optimization refactor to easily add others in the future

af99150

Merge remote-tracking branch 'upstream/canary' into feat/typekit-support

03abad5

# Conflicts: # packages/next/next-server/lib/constants.ts # test/integration/font-optimization/test/index.test.js

Update docs

c5286c7

ijjk requested review from divmain, leerob, lfades, shuding and timneutkens as code owners May 5, 2021 19:53

ijjk added type: documentation type: next labels May 5, 2021

Merge branch 'canary' into feat/typekit-support

fe9ce86

This comment has been minimized.

Sign in to view

shuding approved these changes May 6, 2021

View reviewed changes

Merge branch 'canary' into feat/typekit-support

c074d0c

kodiakhq bot merged commit 802af5f into vercel:canary May 6, 2021

ijjk deleted the feat/typekit-support branch May 6, 2021 04:07

janicklas-ralph reviewed May 6, 2021

View reviewed changes

janicklas-ralph mentioned this pull request May 6, 2021

Font optimization - Typekit font loaded twice #24872

Closed

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

Land - Font optimizations - Adobe Fonts / Typekit support #24834

Land - Font optimizations - Adobe Fonts / Typekit support #24834

ijjk commented May 5, 2021

This comment has been minimized.

ijjk commented May 6, 2021

Diffs

Diffs

janicklas-ralph May 6, 2021

andrewgadziksonos commented May 20, 2021

Land - Font optimizations - Adobe Fonts / Typekit support #24834

Land - Font optimizations - Adobe Fonts / Typekit support #24834

Conversation

ijjk commented May 5, 2021

Feature

This comment has been minimized.

ijjk commented May 6, 2021

Stats from current PR

Diffs

Diffs

janicklas-ralph May 6, 2021

Choose a reason for hiding this comment

andrewgadziksonos commented May 20, 2021