use text data url instead of base64 for shorter encoding #33218

sokra · 2022-01-12T15:20:11Z

and text is easier to gzip

and it avoid the reference to Buffer from next

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

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.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

and text is easier to gzip and it avoid the reference to `Buffer` from next

ijjk · 2022-01-12T19:17:08Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
buildDuration	14.3s	14.3s	-52ms
buildDurationCached	3.2s	3.2s	-50ms
nodeModulesSize	355 MB	355 MB	-844 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.883	2.861	-0.02
/ avg req/sec	867.29	873.9	+6.61
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.283	1.299	⚠️ +0.02
/error-in-render avg req/sec	1948.45	1925.05	⚠️ -23.4

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.2 kB	27.2 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71 kB	71 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.74 kB	4.7 kB	-37 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.13 kB	2.13 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.1 kB	14.1 kB	-37 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
index.html gzip	531 B	531 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-3cbae1287e809392.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-40f32eb1d96a561c.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-1339957a75cc3c85.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -129,7 +129,6 @@
       exports["default"] = Image;
       var _react = _interopRequireDefault(__webpack_require__(7294));
       var _head = _interopRequireDefault(__webpack_require__(5443));
-      var _toBase64 = __webpack_require__(6978);
       var _imageConfig = __webpack_require__(5809);
       var _useIntersection = __webpack_require__(7190);
       function _defineProperty1(obj, key, value) {
@@ -562,7 +561,7 @@
           padding: 0
         };
         var hasSizer = false;
-        var sizerSvg;
+        var sizerSvgUrl;
         var imgStyle = {
           position: "absolute",
           top: 0,
@@ -622,12 +621,10 @@
             wrapperStyle.maxWidth = "100%";
             hasSizer = true;
             sizerStyle.maxWidth = "100%";
-            sizerSvg = '<svg width="'
-              .concat(widthInt, '" height="')
-              .concat(
-                heightInt,
-                '" xmlns="http://www.w3.org/2000/svg" version="1.1"/>'
-              );
+            // url encoded svg is a little bit shorten than base64 encoding
+            sizerSvgUrl = "data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 width=%27"
+              .concat(widthInt, "%27 height=%27")
+              .concat(heightInt, "%27/%3e");
           } else if (layout === "fixed") {
             // <Image src="i.png" width="100" height="100" layout="fixed" />
             wrapperStyle.display = "inline-block";
@@ -681,7 +678,7 @@
                 {
                   style: sizerStyle
                 },
-                sizerSvg
+                sizerSvgUrl
                   ? /*#__PURE__*/ _react.default.createElement("img", {
                       style: {
                         display: "block",
@@ -696,9 +693,7 @@
                       },
                       alt: "",
                       "aria-hidden": true,
-                      src: "data:image/svg+xml;base64,".concat(
-                        (0, _toBase64).toBase64(sizerSvg)
-                      )
+                      src: sizerSvgUrl
                     })
                   : null
               )
@@ -1021,23 +1016,6 @@
       /***/
     },
 
-    /***/ 6978: /***/ function(__unused_webpack_module, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.toBase64 = toBase64;
-      function toBase64(str) {
-        if (false) {
-        } else {
-          return window.btoa(str);
-        }
-      } //# sourceMappingURL=to-base-64.js.map
-
-      /***/
-    },
-
     /***/ 5924: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,

Default Build with SWC (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
buildDuration	15.8s	15.8s	-27ms
buildDurationCached	3.2s	3.2s	-22ms
nodeModulesSize	355 MB	355 MB	-844 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.87	2.862	-0.01
/ avg req/sec	870.97	873.59	+2.62
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.303	1.277	-0.03
/error-in-render avg req/sec	1919.25	1957	+37.75

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.3 kB	27.3 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.2 kB	71.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	906 B	906 B	✓
image-HASH.js gzip	4.76 kB	4.72 kB	-37 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.19 kB	2.19 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.1 kB	14 kB	-37 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/sizer-data-url	Change
index.html gzip	530 B	530 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-538d621a0e670391.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-3cbae1287e809392.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-40f32eb1d96a561c.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-1339957a75cc3c85.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -129,7 +129,6 @@
       exports["default"] = Image;
       var _react = _interopRequireDefault(__webpack_require__(7294));
       var _head = _interopRequireDefault(__webpack_require__(5443));
-      var _toBase64 = __webpack_require__(6978);
       var _imageConfig = __webpack_require__(5809);
       var _useIntersection = __webpack_require__(7190);
       function _defineProperty1(obj, key, value) {
@@ -562,7 +561,7 @@
           padding: 0
         };
         var hasSizer = false;
-        var sizerSvg;
+        var sizerSvgUrl;
         var imgStyle = {
           position: "absolute",
           top: 0,
@@ -622,12 +621,10 @@
             wrapperStyle.maxWidth = "100%";
             hasSizer = true;
             sizerStyle.maxWidth = "100%";
-            sizerSvg = '<svg width="'
-              .concat(widthInt, '" height="')
-              .concat(
-                heightInt,
-                '" xmlns="http://www.w3.org/2000/svg" version="1.1"/>'
-              );
+            // url encoded svg is a little bit shorten than base64 encoding
+            sizerSvgUrl = "data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 width=%27"
+              .concat(widthInt, "%27 height=%27")
+              .concat(heightInt, "%27/%3e");
           } else if (layout === "fixed") {
             // <Image src="i.png" width="100" height="100" layout="fixed" />
             wrapperStyle.display = "inline-block";
@@ -681,7 +678,7 @@
                 {
                   style: sizerStyle
                 },
-                sizerSvg
+                sizerSvgUrl
                   ? /*#__PURE__*/ _react.default.createElement("img", {
                       style: {
                         display: "block",
@@ -696,9 +693,7 @@
                       },
                       alt: "",
                       "aria-hidden": true,
-                      src: "data:image/svg+xml;base64,".concat(
-                        (0, _toBase64).toBase64(sizerSvg)
-                      )
+                      src: sizerSvgUrl
                     })
                   : null
               )
@@ -1021,23 +1016,6 @@
       /***/
     },
 
-    /***/ 6978: /***/ function(__unused_webpack_module, exports) {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true
-      });
-      exports.toBase64 = toBase64;
-      function toBase64(str) {
-        if (false) {
-        } else {
-          return window.btoa(str);
-        }
-      } //# sourceMappingURL=to-base-64.js.map
-
-      /***/
-    },
-
     /***/ 5924: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,

Commit: 6b11a58

styfle

Thanks!

theoludwig · 2022-01-30T13:42:43Z

We might revert the changes of this PR.
See: #33809

## Bug - [x] Fixes #33809 - [x] Related to #33218 - [x] Integration tests added: Usage of [html-validator](https://www.npmjs.com/package/html-validator) to validate the HTML. - [x] Errors have helpful link attached, see `contributing.md` (N/A)

and text is easier to gzip and it avoid the reference to `Buffer` from next ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## 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. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`

## Bug - [x] Fixes vercel#33809 - [x] Related to vercel#33218 - [x] Integration tests added: Usage of [html-validator](https://www.npmjs.com/package/html-validator) to validate the HTML. - [x] Errors have helpful link attached, see `contributing.md` (N/A)

use text data url instead of base64 for shorter encoding

6951c1f

and text is easier to gzip and it avoid the reference to `Buffer` from next

sokra requested review from huozhi, ijjk, shuding, styfle and timneutkens as code owners January 12, 2022 15:20

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Jan 12, 2022

This comment has been minimized.

Sign in to view

ijjk approved these changes Jan 12, 2022

View reviewed changes

Merge branch 'canary' into perf/sizer-data-url

6b11a58

kodiakhq bot merged commit 628e6ac into canary Jan 12, 2022

kodiakhq bot deleted the perf/sizer-data-url branch January 12, 2022 19:51

styfle reviewed Jan 12, 2022

View reviewed changes

theoludwig mentioned this pull request Jan 30, 2022

next/image produces invalid HTML according to W3C (again) #33809

Closed

theoludwig mentioned this pull request Jan 31, 2022

fix(next/image): render valid html according to W3C #33825

Merged

4 tasks

github-actions bot locked as resolved and limited conversation to collaborators Mar 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

use text data url instead of base64 for shorter encoding #33218

use text data url instead of base64 for shorter encoding #33218

sokra commented Jan 12, 2022

This comment has been minimized.

ijjk commented Jan 12, 2022

Diffs

Diffs

styfle left a comment

theoludwig commented Jan 30, 2022 •

edited

use text data url instead of base64 for shorter encoding #33218

use text data url instead of base64 for shorter encoding #33218

Conversation

sokra commented Jan 12, 2022

Bug

Feature

Documentation / Examples

This comment has been minimized.

ijjk commented Jan 12, 2022

Stats from current PR

Diffs

Diffs

styfle left a comment

Choose a reason for hiding this comment

theoludwig commented Jan 30, 2022 • edited

theoludwig commented Jan 30, 2022 •

edited