Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds user timing marks and measures for hydration/render #8069

Merged
merged 7 commits into from Aug 9, 2019

Conversation

@housseindjirdeh
Copy link
Collaborator

housseindjirdeh commented Jul 23, 2019

For context, see Issue #8070.


This PR adds user timings for:

  • Link clicks
  • Before hydration and render
  • After hydration and render

With these marks, the following measures are added:

For page loads

  • Next.js-before-hydration: measures page load to "right before hydration"
  • Next.js-hydration: measures hydration step

Screen Shot 2019-07-22 at 4 50 01 PM

For navigation

  • Next.js-nav-to-render: measures navigation start to "right before render"
  • Next.js-render: measures hydration step

Screen Shot 2019-07-22 at 4 52 12 PM

Testing on a simple example app, hydration aligns with the hydrate method in the callstack (and the same for render)

Screen Shot 2019-07-17 at 2 10 43 PM

Note: These marks are added for both development and production modes

@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Jul 23, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 12s 12.1s ⚠️ +134ms
node_modules Size 45.5 MB 45.5 MB ⚠️ +405 B
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +540 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 67.9 kB ⚠️ +141 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.45 kB 8.45 kB
Client _error gzip Size 3.24 kB 3.24 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.14 kB 4.17 kB ⚠️ +30 B
Client pages/link gzip Size 1.82 kB 1.83 kB ⚠️ +17 B
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 19.8 kB 20.3 kB ⚠️ +540 B
Client main gzip Size 6.78 kB 6.92 kB ⚠️ +141 B
Client commons Size 184 kB 184 kB
Client commons gzip Size 59.7 kB 59.7 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Base Rendered Size 1.34 kB 1.34 kB
Build Dir Size 699 kB 740 kB ⚠️ +41.2 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 13.5s 13.3s -200ms
node_modules Size 45.5 MB 45.5 MB ⚠️ +405 B
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +540 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 67.9 kB ⚠️ +141 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.45 kB 8.45 kB
Client _error gzip Size 3.24 kB 3.24 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.14 kB 4.17 kB ⚠️ +30 B
Client pages/link gzip Size 1.82 kB 1.83 kB ⚠️ +17 B
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 19.8 kB 20.3 kB ⚠️ +540 B
Client main gzip Size 6.78 kB 6.92 kB ⚠️ +141 B
Client commons Size 184 kB 184 kB
Client commons gzip Size 59.7 kB 59.7 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Serverless pages/link Size 251 kB 338 kB ⚠️ +87.3 kB
Serverless pages/link gzip Size 67.6 kB 86.9 kB ⚠️ +19.4 kB
Serverless pages/index Size 243 kB 329 kB ⚠️ +85.7 kB
Serverless pages/index gzip Size 65.3 kB 84.4 kB ⚠️ +19.1 kB
Serverless pages/_error Size 243 kB 329 kB ⚠️ +85.6 kB
Serverless pages/_error gzip Size 65.1 kB 84.2 kB ⚠️ +19.1 kB
Serverless pages/routerDirect Size 244 kB 330 kB ⚠️ +85.7 kB
Serverless pages/routerDirect gzip Size 65.3 kB 84.4 kB ⚠️ +19.1 kB
Serverless pages/withRouter Size 244 kB 330 kB ⚠️ +85.7 kB
Serverless pages/withRouter gzip Size 65.4 kB 84.4 kB ⚠️ +19 kB
Build Dir Size 1.88 MB 2.27 MB ⚠️ +382 kB
@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Jul 26, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 13.1s 12.8s -266ms
node_modules Size 45.5 MB 45.4 MB -30.3 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +403 B
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 67.9 kB ⚠️ +85 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.45 kB ⚠️ +228 B
Client _error gzip Size 3.16 kB 3.24 kB ⚠️ +75 B
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.14 kB ⚠️ +56 B
Client pages/link gzip Size 1.8 kB 1.82 kB ⚠️ +20 B
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 20 kB 20.3 kB ⚠️ +373 B
Client main gzip Size 6.86 kB 6.92 kB ⚠️ +65 B
Client commons Size 184 kB 184 kB ⚠️ +30 B
Client commons gzip Size 59.7 kB 59.7 kB ⚠️ +20 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Base Rendered Size 1.35 kB 1.34 kB -6 B
Build Dir Size 704 kB 740 kB ⚠️ +36.2 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 13.9s 14s ⚠️ +157ms
node_modules Size 45.5 MB 45.4 MB -30.3 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +403 B
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 67.9 kB ⚠️ +85 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.45 kB ⚠️ +228 B
Client _error gzip Size 3.16 kB 3.24 kB ⚠️ +75 B
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.14 kB ⚠️ +56 B
Client pages/link gzip Size 1.8 kB 1.82 kB ⚠️ +20 B
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 20 kB 20.3 kB ⚠️ +373 B
Client main gzip Size 6.86 kB 6.92 kB ⚠️ +65 B
Client commons Size 184 kB 184 kB ⚠️ +30 B
Client commons gzip Size 59.7 kB 59.7 kB ⚠️ +20 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Serverless pages/link Size 252 kB 338 kB ⚠️ +86.1 kB
Serverless pages/link gzip Size 67.9 kB 86.9 kB ⚠️ +19 kB
Serverless pages/index Size 245 kB 329 kB ⚠️ +84.5 kB
Serverless pages/index gzip Size 65.7 kB 84.5 kB ⚠️ +18.8 kB
Serverless pages/_error Size 244 kB 329 kB ⚠️ +84.4 kB
Serverless pages/_error gzip Size 65.5 kB 84.2 kB ⚠️ +18.7 kB
Serverless pages/routerDirect Size 245 kB 330 kB ⚠️ +84.5 kB
Serverless pages/routerDirect gzip Size 65.7 kB 84.5 kB ⚠️ +18.8 kB
Serverless pages/withRouter Size 245 kB 330 kB ⚠️ +84.5 kB
Serverless pages/withRouter gzip Size 65.8 kB 84.4 kB ⚠️ +18.6 kB
Build Dir Size 1.89 MB 2.27 MB ⚠️ +373 kB
Diff for commons.js
@@ -3193,8 +3193,10 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
+        performance.mark('linkClick'); // marking route changes as a navigation start entry
         // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -216,22 +216,13 @@ function () {
     key: "updateElements",
     value: function updateElements(type, components) {
       var headEl = document.getElementsByTagName('head')[0];
-      var headCountEl = headEl.querySelector('meta[name=next-head-count]');
-      var headCount = Number(headCountEl.content);
-      var oldTags = [];
-
-      for (var i = 0, j = headCountEl.previousElementSibling; i < headCount; i++, j = j.previousElementSibling) {
-        if (j.tagName.toLowerCase() === type) {
-          oldTags.push(j);
-        }
-      }
-
+      var oldTags = Array.prototype.slice.call(headEl.querySelectorAll(type + '.next-head'));
       var newTags = components.map(reactElementToDOM).filter(function (newTag) {
-        for (var k = 0, len = oldTags.length; k < len; k++) {
-          var oldTag = oldTags[k];
+        for (var i = 0, len = oldTags.length; i < len; i++) {
+          var oldTag = oldTags[i];
 
           if (oldTag.isEqualNode(newTag)) {
-            oldTags.splice(k, 1);
+            oldTags.splice(i, 1);
             return false;
           }
         }
@@ -242,9 +233,8 @@ function () {
         return t.parentNode.removeChild(t);
       });
       newTags.forEach(function (t) {
-        return headEl.insertBefore(t, headCountEl);
+        return headEl.appendChild(t);
       });
-      headCountEl.content = (headCount - oldTags.length + newTags.length).toString();
     }
   }]);
   return HeadManager;
@@ -769,16 +759,40 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
+  performance.mark('beforeRender'); // mark start of hydrate/render
   // The check for `.hydrate` is there to support React alternatives like preact
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
   }
 }
 
+function markHydrateComplete() {
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('linkClick', 'mark');
+  performance.measure('Next.js-nav-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
+}
+
 function AppContainer(_ref4) {
   var children = _ref4.children;
   return _react["default"].createElement(Container, {
@@ -1262,9 +1276,6 @@ function () {
                 route = _this.normalizeRoute(route);
                 scriptRoute = route === '/' ? '/index.js' : route + ".js";
                 script = document.createElement('script');
-
-                if (false) {}
-
                 url = _this.assetPrefix + "/_next/static/" + encodeURIComponent(_this.buildId) + "/pages" + scriptRoute;
                 script.crossOrigin = undefined;
                 script.src = url;
@@ -1280,7 +1291,7 @@ function () {
 
                 document.body.appendChild(script);
 
-              case 11:
+              case 10:
               case "end":
                 return _context.stop();
             }
@@ -1340,42 +1351,40 @@ function () {
                 route = _this2.normalizeRoute(route);
                 scriptRoute = (route === '/' ? '/index' : route) + ".js";
 
-                if (false) {}
-
                 if (!(_this2.prefetchCache.has(scriptRoute) || document.getElementById("__NEXT_PAGE__" + route))) {
-                  _context2.next = 5;
+                  _context2.next = 4;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 5:
+              case 4:
                 _this2.prefetchCache.add(scriptRoute); // Inspired by quicklink, license: https://github.com/GoogleChromeLabs/quicklink/blob/master/LICENSE
                 // Don't prefetch if the user is on 2G / Don't prefetch if Save-Data is enabled
 
 
                 if (!('connection' in navigator)) {
-                  _context2.next = 9;
+                  _context2.next = 8;
                   break;
                 }
 
                 if (!((navigator.connection.effectiveType || '').indexOf('2g') !== -1 || navigator.connection.saveData)) {
-                  _context2.next = 9;
+                  _context2.next = 8;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 9:
+              case 8:
                 if (!hasPreload) {
-                  _context2.next = 19;
+                  _context2.next = 18;
                   break;
                 }
 
-                _context2.next = 12;
+                _context2.next = 11;
                 return _this2.promisedBuildId;
 
-              case 12:
+              case 11:
                 link = document.createElement('link');
                 link.rel = 'preload';
                 link.crossOrigin = undefined;
@@ -1384,15 +1393,15 @@ function () {
                 document.head.appendChild(link);
                 return _context2.abrupt("return");
 
-              case 19:
+              case 18:
                 if (!(document.readyState === 'complete')) {
-                  _context2.next = 23;
+                  _context2.next = 22;
                   break;
                 }
 
                 return _context2.abrupt("return", _this2.loadPage(route)["catch"](function () {}));
 
-              case 23:
+              case 22:
                 return _context2.abrupt("return", new _promise["default"](function (resolve) {
                   window.addEventListener('load', function () {
                     _this2.loadPage(route).then(function () {
@@ -1403,7 +1412,7 @@ function () {
                   });
                 }));
 
-              case 24:
+              case 23:
               case "end":
                 return _context2.stop();
             }
@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Jul 26, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 13.6s 13.3s -262ms
node_modules Size 45.5 MB 45.5 MB ⚠️ +1.79 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +570 B
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 68 kB ⚠️ +164 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB -1 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 300 B -1 B
Client main Size 20 kB 20.5 kB ⚠️ +540 B
Client main gzip Size 6.86 kB 7 kB ⚠️ +145 B
Client commons Size 184 kB 184 kB ⚠️ +30 B
Client commons gzip Size 59.7 kB 59.7 kB ⚠️ +20 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Base Rendered Size 1.35 kB 1.35 kB
Build Dir Size 704 kB 706 kB ⚠️ +2.1 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 14.3s 14.7s ⚠️ +392ms
node_modules Size 45.5 MB 45.5 MB ⚠️ +1.79 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +570 B
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 68 kB ⚠️ +166 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 20 kB 20.5 kB ⚠️ +540 B
Client main gzip Size 6.86 kB 7 kB ⚠️ +146 B
Client commons Size 184 kB 184 kB ⚠️ +30 B
Client commons gzip Size 59.7 kB 59.7 kB ⚠️ +20 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Serverless pages/link Size 252 kB 252 kB ⚠️ +91 B
Serverless pages/link gzip Size 67.9 kB 68 kB ⚠️ +49 B
Serverless pages/index Size 245 kB 245 kB ⚠️ +91 B
Serverless pages/index gzip Size 65.7 kB 65.8 kB ⚠️ +45 B
Serverless pages/_error Size 244 kB 244 kB ⚠️ +91 B
Serverless pages/_error gzip Size 65.5 kB 65.5 kB ⚠️ +46 B
Serverless pages/routerDirect Size 245 kB 245 kB ⚠️ +91 B
Serverless pages/routerDirect gzip Size 65.7 kB 65.7 kB ⚠️ +48 B
Serverless pages/withRouter Size 245 kB 245 kB ⚠️ +91 B
Serverless pages/withRouter gzip Size 65.8 kB 65.9 kB ⚠️ +47 B
Build Dir Size 1.89 MB 1.9 MB ⚠️ +2.64 kB
Diff for commons.js
@@ -3193,8 +3193,10 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
+        performance.mark('linkClick'); // marking route changes as a navigation start entry
         // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -1,4 +1,4 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[8],{
+(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
 
 /***/ "+iuc":
 /***/ (function(module, exports, __webpack_require__) {
@@ -769,16 +769,40 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
+  performance.mark('beforeRender'); // mark start of hydrate/render
   // The check for `.hydrate` is there to support React alternatives like preact
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
   }
 }
 
+function markHydrateComplete() {
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('linkClick', 'mark');
+  performance.measure('Next.js-nav-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
+}
+
 function AppContainer(_ref4) {
   var children = _ref4.children;
   return _react["default"].createElement(Container, {
@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Jul 29, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 13.1s 12.8s -236ms
node_modules Size 45.9 MB 45.5 MB -376 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 68 kB ⚠️ +262 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 15.4 kB 20.5 kB ⚠️ +5.12 kB
Client main gzip Size 5.33 kB 7.01 kB ⚠️ +1.69 kB
Client commons Size 188 kB 184 kB -4.53 kB
Client commons gzip Size 61.1 kB 59.7 kB -1.43 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Base Rendered Size 1.35 kB 1.35 kB
Build Dir Size 705 kB 706 kB ⚠️ +1.7 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 14.3s 14.5s ⚠️ +287ms
node_modules Size 45.9 MB 45.5 MB -376 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 68 kB ⚠️ +262 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 15.4 kB 20.5 kB ⚠️ +5.12 kB
Client main gzip Size 5.33 kB 7.01 kB ⚠️ +1.69 kB
Client commons Size 188 kB 184 kB -4.53 kB
Client commons gzip Size 61.1 kB 59.7 kB -1.43 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Serverless pages/link Size 252 kB 252 kB -133 B
Serverless pages/link gzip Size 68 kB 68 kB -9 B
Serverless pages/index Size 245 kB 245 kB -133 B
Serverless pages/index gzip Size 65.8 kB 65.8 kB -6 B
Serverless pages/_error Size 244 kB 244 kB -133 B
Serverless pages/_error gzip Size 65.5 kB 65.5 kB -8 B
Serverless pages/routerDirect Size 246 kB 245 kB -133 B
Serverless pages/routerDirect gzip Size 65.7 kB 65.7 kB -6 B
Serverless pages/withRouter Size 245 kB 245 kB -133 B
Serverless pages/withRouter gzip Size 65.9 kB 65.9 kB -7 B
Build Dir Size 1.89 MB 1.9 MB ⚠️ +1.35 kB
Diff for commons.js
@@ -21,35 +21,6 @@ module.exports = __webpack_require__("WEpk").Object.getPrototypeOf;
 
 /***/ }),
 
-/***/ "+wdc":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/** @license React v0.13.6
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}}
-function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous=
-b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}}
-var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)}
-if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined;
-if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),
-"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}};
-var V=function(a){if(null!==K){E(V);var b=a-P+S;b<S&&R<S?(8>b&&(b=8),S=b<R?R:b):R=b;P=a+S;L||(L=!0,U.postMessage(void 0))}else N=!1};r=function(a,b){K=a;M=b;O||0>b?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4;
-exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}};
-exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p());
-b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g};
-exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime<l||w())};exports.unstable_continueExecution=function(){null!==d&&p()};exports.unstable_pauseExecution=function(){};exports.unstable_getFirstCallbackNode=function(){return d};
-
-
-/***/ }),
-
 /***/ "/eQG":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3222,8 +3193,10 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
+        performance.mark('routeChange'); // marking route changes as a navigation start entry
         // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
@@ -4244,19 +4217,6 @@ $export($export.S, 'Promise', { 'try': function (callbackfn) {
 
 /***/ }),
 
-/***/ "QCnb":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-if (true) {
-  module.exports = __webpack_require__("+wdc");
-} else {}
-
-
-/***/ }),
-
 /***/ "QMMT":
 /***/ (function(module, exports, __webpack_require__) {
 
Diff for main.js
@@ -60,6 +60,35 @@ module.exports = _asyncToGenerator;
 
 /***/ }),
 
+/***/ "+wdc":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/** @license React v0.13.6
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}}
+function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous=
+b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}}
+var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)}
+if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined;
+if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),
+"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}};
+var V=function(a){if(null!==K){E(V);var b=a-P+S;b<S&&R<S?(8>b&&(b=8),S=b<R?R:b):R=b;P=a+S;L||(L=!0,U.postMessage(void 0))}else N=!1};r=function(a,b){K=a;M=b;O||0>b?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4;
+exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}};
+exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p());
+b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g};
+exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime<l||w())};exports.unstable_continueExecution=function(){null!==d&&p()};exports.unstable_pauseExecution=function(){};exports.unstable_getFirstCallbackNode=function(){return d};
+
+
+/***/ }),
+
 /***/ "/h46":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -740,16 +769,45 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
+  performance.mark('beforeRender'); // mark start of hydrate/render
   // The check for `.hydrate` is there to support React alternatives like preact
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
   }
 }
 
+function markHydrateComplete() {
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
+  }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
+}
+
 function AppContainer(_ref4) {
   var children = _ref4.children;
   return _react["default"].createElement(Container, {
@@ -860,6 +918,19 @@ module.exports = __webpack_require__("HohS")
 
 /***/ }),
 
+/***/ "QCnb":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+if (true) {
+  module.exports = __webpack_require__("+wdc");
+} else {}
+
+
+/***/ }),
+
 /***/ "UDep":
 /***/ (function(module, exports, __webpack_require__) {
 
@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Jul 29, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 11.8s 11.9s ⚠️ +113ms
node_modules Size 45.9 MB 45.5 MB -376 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 68 kB ⚠️ +262 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 15.4 kB 20.5 kB ⚠️ +5.12 kB
Client main gzip Size 5.33 kB 7.01 kB ⚠️ +1.69 kB
Client commons Size 188 kB 184 kB -4.53 kB
Client commons gzip Size 61.1 kB 59.7 kB -1.43 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Base Rendered Size 1.35 kB 1.35 kB
Build Dir Size 705 kB 706 kB ⚠️ +1.7 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 13.1s 12.6s -462ms
node_modules Size 45.9 MB 45.5 MB -376 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 68 kB ⚠️ +262 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 15.4 kB 20.5 kB ⚠️ +5.12 kB
Client main gzip Size 5.33 kB 7.01 kB ⚠️ +1.69 kB
Client commons Size 188 kB 184 kB -4.53 kB
Client commons gzip Size 61.1 kB 59.7 kB -1.43 kB
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Serverless pages/link Size 252 kB 252 kB -133 B
Serverless pages/link gzip Size 68 kB 68 kB -8 B
Serverless pages/index Size 245 kB 245 kB -133 B
Serverless pages/index gzip Size 65.8 kB 65.8 kB -7 B
Serverless pages/_error Size 244 kB 244 kB -133 B
Serverless pages/_error gzip Size 65.5 kB 65.5 kB -7 B
Serverless pages/routerDirect Size 246 kB 245 kB -133 B
Serverless pages/routerDirect gzip Size 65.7 kB 65.7 kB -6 B
Serverless pages/withRouter Size 245 kB 245 kB -133 B
Serverless pages/withRouter gzip Size 65.9 kB 65.9 kB -6 B
Build Dir Size 1.89 MB 1.9 MB ⚠️ +1.35 kB
Diff for commons.js
@@ -21,35 +21,6 @@ module.exports = __webpack_require__("WEpk").Object.getPrototypeOf;
 
 /***/ }),
 
-/***/ "+wdc":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/** @license React v0.13.6
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}}
-function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous=
-b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}}
-var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)}
-if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined;
-if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),
-"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}};
-var V=function(a){if(null!==K){E(V);var b=a-P+S;b<S&&R<S?(8>b&&(b=8),S=b<R?R:b):R=b;P=a+S;L||(L=!0,U.postMessage(void 0))}else N=!1};r=function(a,b){K=a;M=b;O||0>b?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4;
-exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}};
-exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p());
-b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g};
-exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime<l||w())};exports.unstable_continueExecution=function(){null!==d&&p()};exports.unstable_pauseExecution=function(){};exports.unstable_getFirstCallbackNode=function(){return d};
-
-
-/***/ }),
-
 /***/ "/eQG":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3222,8 +3193,10 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
+        performance.mark('routeChange'); // marking route changes as a navigation start entry
         // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
@@ -4244,19 +4217,6 @@ $export($export.S, 'Promise', { 'try': function (callbackfn) {
 
 /***/ }),
 
-/***/ "QCnb":
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-if (true) {
-  module.exports = __webpack_require__("+wdc");
-} else {}
-
-
-/***/ }),
-
 /***/ "QMMT":
 /***/ (function(module, exports, __webpack_require__) {
 
Diff for main.js
@@ -60,6 +60,35 @@ module.exports = _asyncToGenerator;
 
 /***/ }),
 
+/***/ "+wdc":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+/** @license React v0.13.6
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+Object.defineProperty(exports,"__esModule",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}}
+function u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if("function"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous=
+b}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}}
+var x=Date,y="function"===typeof setTimeout?setTimeout:void 0,z="function"===typeof clearTimeout?clearTimeout:void 0,A="function"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B="function"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)}
+if("object"===typeof performance&&"function"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null; true?G=window:undefined;
+if(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if( false||"function"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{"undefined"!==typeof console&&("function"!==typeof A&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),
+"function"!==typeof B&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}};
+var V=function(a){if(null!==K){E(V);var b=a-P+S;b<S&&R<S?(8>b&&(b=8),S=b<R?R:b):R=b;P=a+S;L||(L=!0,U.postMessage(void 0))}else N=!1};r=function(a,b){K=a;M=b;O||0>b?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4;
+exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}};
+exports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if("object"===typeof b&&null!==b&&"number"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p());
+b=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g};
+exports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime<l||w())};exports.unstable_continueExecution=function(){null!==d&&p()};exports.unstable_pauseExecution=function(){};exports.unstable_getFirstCallbackNode=function(){return d};
+
+
+/***/ }),
+
 /***/ "/h46":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -740,16 +769,45 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
+  performance.mark('beforeRender'); // mark start of hydrate/render
   // The check for `.hydrate` is there to support React alternatives like preact
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
   }
 }
 
+function markHydrateComplete() {
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
+  }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
+}
+
 function AppContainer(_ref4) {
   var children = _ref4.children;
   return _react["default"].createElement(Container, {
@@ -860,6 +918,19 @@ module.exports = __webpack_require__("HohS")
 
 /***/ }),
 
+/***/ "QCnb":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+if (true) {
+  module.exports = __webpack_require__("+wdc");
+} else {}
+
+
+/***/ }),
+
 /***/ "UDep":
 /***/ (function(module, exports, __webpack_require__) {
 
@housseindjirdeh housseindjirdeh force-pushed the housseindjirdeh:next-user-timings branch from 50e2f78 to c105e45 Jul 29, 2019
@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Jul 29, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 12.2s 12.4s ⚠️ +270ms
node_modules Size 45.9 MB 45.9 MB ⚠️ +1.9 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 68 kB ⚠️ +206 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB ⚠️ +1 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 300 B 301 B ⚠️ +1 B
Client main Size 15.4 kB 16 kB ⚠️ +563 B
Client main gzip Size 5.33 kB 5.48 kB ⚠️ +158 B
Client commons Size 188 kB 188 kB ⚠️ +32 B
Client commons gzip Size 61.1 kB 61.2 kB ⚠️ +47 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Base Rendered Size 1.35 kB 1.35 kB
Build Dir Size 705 kB 707 kB ⚠️ +2.21 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 13.2s 13.5s ⚠️ +259ms
node_modules Size 45.9 MB 45.9 MB ⚠️ +1.9 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 68 kB ⚠️ +206 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 15.4 kB 16 kB ⚠️ +563 B
Client main gzip Size 5.33 kB 5.48 kB ⚠️ +159 B
Client commons Size 188 kB 188 kB ⚠️ +32 B
Client commons gzip Size 61.1 kB 61.2 kB ⚠️ +47 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Serverless pages/link Size 252 kB 252 kB ⚠️ +93 B
Serverless pages/link gzip Size 68 kB 68 kB ⚠️ +44 B
Serverless pages/index Size 245 kB 245 kB ⚠️ +93 B
Serverless pages/index gzip Size 65.8 kB 65.8 kB ⚠️ +43 B
Serverless pages/_error Size 244 kB 245 kB ⚠️ +93 B
Serverless pages/_error gzip Size 65.5 kB 65.6 kB ⚠️ +42 B
Serverless pages/routerDirect Size 246 kB 246 kB ⚠️ +93 B
Serverless pages/routerDirect gzip Size 65.7 kB 65.8 kB ⚠️ +42 B
Serverless pages/withRouter Size 245 kB 246 kB ⚠️ +93 B
Serverless pages/withRouter gzip Size 65.9 kB 65.9 kB ⚠️ +43 B
Build Dir Size 1.89 MB 1.9 MB ⚠️ +2.77 kB
Diff for commons.js
@@ -3222,8 +3222,10 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
+        performance.mark('routeChange'); // marking route changes as a navigation start entry
         // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -740,16 +740,45 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
+  performance.mark('beforeRender'); // mark start of hydrate/render
   // The check for `.hydrate` is there to support React alternatives like preact
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
   }
 }
 
+function markHydrateComplete() {
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
+  }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
+}
+
 function AppContainer(_ref4) {
   var children = _ref4.children;
   return _react["default"].createElement(Container, {
@housseindjirdeh housseindjirdeh force-pushed the housseindjirdeh:next-user-timings branch from c105e45 to 24a0b84 Jul 30, 2019
@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Jul 30, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 13.8s 13.3s -494ms
node_modules Size 45.9 MB 45.9 MB ⚠️ +1.9 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 68 kB ⚠️ +180 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 15.6 kB 16.2 kB ⚠️ +563 B
Client main gzip Size 5.39 kB 5.56 kB ⚠️ +165 B
Client commons Size 188 kB 188 kB ⚠️ +32 B
Client commons gzip Size 61.1 kB 61.1 kB ⚠️ +15 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Base Rendered Size 1.35 kB 1.35 kB
Build Dir Size 703 kB 706 kB ⚠️ +2.21 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 14.8s 14.5s -266ms
node_modules Size 45.9 MB 45.9 MB ⚠️ +1.9 kB
Total Bundle (main, webpack, commons) Size 206 kB 207 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.9 kB 68 kB ⚠️ +179 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB -1 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 300 B -1 B
Client main Size 15.6 kB 16.2 kB ⚠️ +563 B
Client main gzip Size 5.39 kB 5.56 kB ⚠️ +165 B
Client commons Size 188 kB 188 kB ⚠️ +32 B
Client commons gzip Size 61.1 kB 61.1 kB ⚠️ +15 B
Client webpack Size 1.49 kB 1.49 kB
Client webpack gzip Size 770 B 770 B
Serverless pages/link Size 252 kB 252 kB ⚠️ +93 B
Serverless pages/link gzip Size 67.9 kB 68 kB ⚠️ +43 B
Serverless pages/index Size 244 kB 244 kB ⚠️ +93 B
Serverless pages/index gzip Size 65.8 kB 65.8 kB ⚠️ +42 B
Serverless pages/_error Size 244 kB 244 kB ⚠️ +93 B
Serverless pages/_error gzip Size 65.5 kB 65.5 kB ⚠️ +42 B
Serverless pages/routerDirect Size 245 kB 245 kB ⚠️ +93 B
Serverless pages/routerDirect gzip Size 65.7 kB 65.7 kB ⚠️ +42 B
Serverless pages/withRouter Size 245 kB 245 kB ⚠️ +93 B
Serverless pages/withRouter gzip Size 65.8 kB 65.9 kB ⚠️ +50 B
Build Dir Size 1.89 MB 1.89 MB ⚠️ +2.77 kB
Diff for commons.js
@@ -3194,8 +3194,10 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
+        performance.mark('routeChange'); // marking route changes as a navigation start entry
         // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -746,16 +746,45 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
+  performance.mark('beforeRender'); // mark start of hydrate/render
   // The check for `.hydrate` is there to support React alternatives like preact
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
   }
 }
 
+function markHydrateComplete() {
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
+  }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
+}
+
 function AppContainer(_ref4) {
   var children = _ref4.children;
   return _react["default"].createElement(Container, {
@Timer Timer force-pushed the zeit:canary branch from a31eb1b to dc9e270 Jul 31, 2019
@housseindjirdeh housseindjirdeh force-pushed the housseindjirdeh:next-user-timings branch 2 times, most recently from 13f6391 to 73e9be2 Aug 5, 2019
@ijjk

This comment has been minimized.

Copy link
Member

ijjk commented Aug 6, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 13.4s 13s -402ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +1.9 kB
Total Bundle (main, webpack, commons) Size 206 kB 206 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 67.9 kB ⚠️ +178 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 15.4 kB 16 kB ⚠️ +563 B
Client main gzip Size 5.35 kB 5.51 kB ⚠️ +163 B
Client commons Size 188 kB 188 kB ⚠️ +32 B
Client commons gzip Size 61.1 kB 61.1 kB ⚠️ +15 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Base Rendered Size 1.35 kB 1.35 kB
Build Dir Size 700 kB 702 kB ⚠️ +2.21 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 14.4s 14.2s -227ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +1.9 kB
Total Bundle (main, webpack, commons) Size 206 kB 206 kB ⚠️ +595 B
Total Bundle (main, webpack, commons) gzip Size 67.8 kB 67.9 kB ⚠️ +178 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client main Size 15.4 kB 16 kB ⚠️ +563 B
Client main gzip Size 5.35 kB 5.51 kB ⚠️ +163 B
Client commons Size 188 kB 188 kB ⚠️ +32 B
Client commons gzip Size 61.1 kB 61.1 kB ⚠️ +15 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Serverless pages/link Size 251 kB 251 kB ⚠️ +93 B
Serverless pages/link gzip Size 67.8 kB 67.8 kB ⚠️ +47 B
Serverless pages/index Size 243 kB 244 kB ⚠️ +93 B
Serverless pages/index gzip Size 65.6 kB 65.6 kB ⚠️ +49 B
Serverless pages/_error Size 243 kB 243 kB ⚠️ +93 B
Serverless pages/_error gzip Size 65.3 kB 65.4 kB ⚠️ +48 B
Serverless pages/routerDirect Size 244 kB 244 kB ⚠️ +93 B
Serverless pages/routerDirect gzip Size 65.5 kB 65.6 kB ⚠️ +48 B
Serverless pages/withRouter Size 244 kB 244 kB ⚠️ +93 B
Serverless pages/withRouter gzip Size 65.7 kB 65.7 kB ⚠️ +39 B
Build Dir Size 1.88 MB 1.89 MB ⚠️ +2.77 kB
Diff for commons.js
@@ -3194,8 +3194,10 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
+        performance.mark('routeChange'); // marking route changes as a navigation start entry
         // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for main.js
@@ -746,16 +746,45 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
+  performance.mark('beforeRender'); // mark start of hydrate/render
   // The check for `.hydrate` is there to support React alternatives like preact
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
   }
 }
 
+function markHydrateComplete() {
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
+  }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
+}
+
 function AppContainer(_ref4) {
   var children = _ref4.children;
   return _react["default"].createElement(Container, {
package.json Show resolved Hide resolved
@housseindjirdeh housseindjirdeh force-pushed the housseindjirdeh:next-user-timings branch from 99331b9 to f41df2b Aug 7, 2019
@ijjk

This comment has been minimized.

Copy link
Member

ijjk commented Aug 7, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 23.1s 22.2s -866ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +2.32 kB
Total Bundle (main, webpack, commons) Size 207 kB 207 kB ⚠️ +737 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.3 kB ⚠️ +234 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +748 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.1 kB ⚠️ +211 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +671 B
Client main gzip Size 5.46 kB 5.67 kB ⚠️ +215 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +682 B
Client main Modern gzip Size 4.83 kB 5.02 kB ⚠️ +188 B
Client commons Size 188 kB 188 kB ⚠️ +66 B
Client commons gzip Size 61.3 kB 61.3 kB ⚠️ +19 B
Client commons Modern Size 169 kB 169 kB ⚠️ +66 B
Client commons Modern gzip Size 55.1 kB 55.1 kB ⚠️ +23 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Base Rendered Size 2.76 kB 2.76 kB
Build Dir Size 1.39 MB 1.4 MB ⚠️ +6.26 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 23.8s 24.4s ⚠️ +563ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +2.32 kB
Total Bundle (main, webpack, commons) Size 207 kB 207 kB ⚠️ +737 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.3 kB ⚠️ +234 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +748 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.1 kB ⚠️ +211 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +671 B
Client main gzip Size 5.46 kB 5.67 kB ⚠️ +215 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +682 B
Client main Modern gzip Size 4.83 kB 5.02 kB ⚠️ +188 B
Client commons Size 188 kB 188 kB ⚠️ +66 B
Client commons gzip Size 61.3 kB 61.3 kB ⚠️ +19 B
Client commons Modern Size 169 kB 169 kB ⚠️ +66 B
Client commons Modern gzip Size 55.1 kB 55.1 kB ⚠️ +23 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Serverless pages/link Size 255 kB 255 kB ⚠️ +152 B
Serverless pages/link gzip Size 68.6 kB 68.6 kB ⚠️ +55 B
Serverless pages/index Size 248 kB 248 kB ⚠️ +152 B
Serverless pages/index gzip Size 66.4 kB 66.4 kB ⚠️ +54 B
Serverless pages/_error Size 247 kB 247 kB ⚠️ +152 B
Serverless pages/_error gzip Size 66.1 kB 66.2 kB ⚠️ +53 B
Serverless pages/routerDirect Size 248 kB 248 kB ⚠️ +152 B
Serverless pages/routerDirect gzip Size 66.3 kB 66.4 kB ⚠️ +54 B
Serverless pages/withRouter Size 248 kB 248 kB ⚠️ +152 B
Serverless pages/withRouter gzip Size 66.4 kB 66.5 kB ⚠️ +54 B
Build Dir Size 2.59 MB 2.6 MB ⚠️ +7.18 kB
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (typeof performance !== 'undefined') {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (typeof performance === 'undefined') return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (typeof performance === 'undefined') return;
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commons.js
@@ -3194,8 +3194,13 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
-        // If url and as provided as an object representation,
+        // marking route changes as a navigation start entry
+        if (typeof performance !== 'undefined') {
+          performance.mark('routeChange');
+        } // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
 let isInitialRender = typeof _reactDom.default.hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (typeof performance !== 'undefined') {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom.default.hydrate(reactEl, domEl);
+    _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom.default.render(reactEl, domEl);
+    _reactDom.default.render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (typeof performance === 'undefined') return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (typeof performance === 'undefined') return;
+  performance.mark('afterRender'); // mark end of render
+
+  const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -2675,8 +2675,13 @@ class Router {
 
   change(method, _url, _as, options) {
     return new _promise.default((resolve, reject) => {
-      // If url and as provided as an object representation,
+      // marking route changes as a navigation start entry
+      if (typeof performance !== 'undefined') {
+        performance.mark('routeChange');
+      } // If url and as provided as an object representation,
       // we'll format them into the string version here.
+
+
       const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
       let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
       // "<page>/index.html" directly for the SSR page.
@ijjk

This comment has been minimized.

Copy link
Member

ijjk commented Aug 7, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 22.4s 22.5s ⚠️ +141ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +2.32 kB
Total Bundle (main, webpack, commons) Size 207 kB 207 kB ⚠️ +737 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.3 kB ⚠️ +234 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +748 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.1 kB ⚠️ +211 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +671 B
Client main gzip Size 5.46 kB 5.67 kB ⚠️ +215 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +682 B
Client main Modern gzip Size 4.83 kB 5.02 kB ⚠️ +188 B
Client commons Size 188 kB 188 kB ⚠️ +66 B
Client commons gzip Size 61.3 kB 61.3 kB ⚠️ +19 B
Client commons Modern Size 169 kB 169 kB ⚠️ +66 B
Client commons Modern gzip Size 55.1 kB 55.1 kB ⚠️ +23 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Base Rendered Size 2.76 kB 2.76 kB
Build Dir Size 1.39 MB 1.4 MB ⚠️ +6.26 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 23.9s 23.2s -663ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +2.32 kB
Total Bundle (main, webpack, commons) Size 207 kB 207 kB ⚠️ +737 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.3 kB ⚠️ +234 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +748 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.1 kB ⚠️ +211 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +671 B
Client main gzip Size 5.46 kB 5.67 kB ⚠️ +215 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +682 B
Client main Modern gzip Size 4.83 kB 5.02 kB ⚠️ +188 B
Client commons Size 188 kB 188 kB ⚠️ +66 B
Client commons gzip Size 61.3 kB 61.3 kB ⚠️ +19 B
Client commons Modern Size 169 kB 169 kB ⚠️ +66 B
Client commons Modern gzip Size 55.1 kB 55.1 kB ⚠️ +23 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Serverless pages/link Size 255 kB 255 kB ⚠️ +152 B
Serverless pages/link gzip Size 68.6 kB 68.6 kB ⚠️ +56 B
Serverless pages/index Size 248 kB 248 kB ⚠️ +152 B
Serverless pages/index gzip Size 66.4 kB 66.4 kB ⚠️ +55 B
Serverless pages/_error Size 247 kB 247 kB ⚠️ +152 B
Serverless pages/_error gzip Size 66.1 kB 66.2 kB ⚠️ +55 B
Serverless pages/routerDirect Size 248 kB 248 kB ⚠️ +152 B
Serverless pages/routerDirect gzip Size 66.3 kB 66.4 kB ⚠️ +55 B
Serverless pages/withRouter Size 248 kB 248 kB ⚠️ +152 B
Serverless pages/withRouter gzip Size 66.4 kB 66.5 kB ⚠️ +53 B
Build Dir Size 2.59 MB 2.6 MB ⚠️ +7.18 kB
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (typeof performance !== 'undefined') {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (typeof performance === 'undefined') return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (typeof performance === 'undefined') return;
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commons.js
@@ -3194,8 +3194,13 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
-        // If url and as provided as an object representation,
+        // marking route changes as a navigation start entry
+        if (typeof performance !== 'undefined') {
+          performance.mark('routeChange');
+        } // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
 let isInitialRender = typeof _reactDom.default.hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (typeof performance !== 'undefined') {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom.default.hydrate(reactEl, domEl);
+    _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom.default.render(reactEl, domEl);
+    _reactDom.default.render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (typeof performance === 'undefined') return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (typeof performance === 'undefined') return;
+  performance.mark('afterRender'); // mark end of render
+
+  const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -2675,8 +2675,13 @@ class Router {
 
   change(method, _url, _as, options) {
     return new _promise.default((resolve, reject) => {
-      // If url and as provided as an object representation,
+      // marking route changes as a navigation start entry
+      if (typeof performance !== 'undefined') {
+        performance.mark('routeChange');
+      } // If url and as provided as an object representation,
       // we'll format them into the string version here.
+
+
       const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
       let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
       // "<page>/index.html" directly for the SSR page.
@@ -240,13 +240,54 @@ export async function renderError (props) {
// If hydrate does not exist, eg in preact.
let isInitialRender = typeof ReactDOM.hydrate === 'function'
function renderReactElement (reactEl, domEl) {
// mark start of hydrate/render
if (typeof performance !== 'undefined') {

This comment has been minimized.

Copy link
@developit

developit Aug 7, 2019

Collaborator

I think we may need to safeguard these further in order to account for browsers like IE11 that have performance.now but not performance.mark, currently they'd throw. Thoughts?

Seems like that could be wrapped into an up-front check:

const SUPPORTS_PERFORMANCE = typeof performance !== 'undefined' && typeof performance.measure === 'function';

// then later
if (SUPPORTS_PERFORMANCE) {
  performance.mark('beforeRender');
}

This comment has been minimized.

Copy link
@housseindjirdeh

housseindjirdeh Aug 7, 2019

Author Collaborator

Good call, I added some constants to next-server/utils that does this

(if someone thinks theres a better place to put these constants, please let me know)

@ijjk

This comment has been minimized.

Copy link
Member

ijjk commented Aug 7, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 23.1s 23s -122ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +3.01 kB
Total Bundle (main, webpack, commons) Size 207 kB 208 kB ⚠️ +938 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.4 kB ⚠️ +317 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +950 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.2 kB ⚠️ +296 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +677 B
Client main gzip Size 5.46 kB 5.7 kB ⚠️ +245 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +689 B
Client main Modern gzip Size 4.83 kB 5.04 kB ⚠️ +209 B
Client commons Size 188 kB 188 kB ⚠️ +261 B
Client commons gzip Size 61.3 kB 61.4 kB ⚠️ +72 B
Client commons Modern Size 169 kB 169 kB ⚠️ +261 B
Client commons Modern gzip Size 55.1 kB 55.2 kB ⚠️ +87 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Base Rendered Size 2.76 kB 2.76 kB
Build Dir Size 1.39 MB 1.4 MB ⚠️ +7.76 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 24.6s 24.6s -60ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +3.01 kB
Total Bundle (main, webpack, commons) Size 207 kB 208 kB ⚠️ +938 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.4 kB ⚠️ +317 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +950 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.2 kB ⚠️ +296 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +677 B
Client main gzip Size 5.46 kB 5.7 kB ⚠️ +245 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +689 B
Client main Modern gzip Size 4.83 kB 5.04 kB ⚠️ +209 B
Client commons Size 188 kB 188 kB ⚠️ +261 B
Client commons gzip Size 61.3 kB 61.4 kB ⚠️ +72 B
Client commons Modern Size 169 kB 169 kB ⚠️ +261 B
Client commons Modern gzip Size 55.1 kB 55.2 kB ⚠️ +87 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Serverless pages/link Size 255 kB 255 kB ⚠️ +385 B
Serverless pages/link gzip Size 68.6 kB 68.7 kB ⚠️ +161 B
Serverless pages/index Size 248 kB 248 kB ⚠️ +385 B
Serverless pages/index gzip Size 66.4 kB 66.5 kB ⚠️ +153 B
Serverless pages/_error Size 247 kB 248 kB ⚠️ +385 B
Serverless pages/_error gzip Size 66.1 kB 66.3 kB ⚠️ +151 B
Serverless pages/routerDirect Size 248 kB 249 kB ⚠️ +385 B
Serverless pages/routerDirect gzip Size 66.3 kB 66.5 kB ⚠️ +150 B
Serverless pages/withRouter Size 248 kB 249 kB ⚠️ +385 B
Serverless pages/withRouter gzip Size 66.4 kB 66.5 kB ⚠️ +146 B
Build Dir Size 2.59 MB 2.6 MB ⚠️ +10.1 kB
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commons.js
@@ -1242,6 +1242,8 @@ function formatWithValidation(url, options) {
 }
 
 exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
 
 /***/ }),
 
@@ -3194,8 +3196,13 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
-        // If url and as provided as an object representation,
+        // marking route changes as a navigation start entry
+        if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+          performance.mark('routeChange');
+        } // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
 let isInitialRender = typeof _reactDom.default.hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom.default.hydrate(reactEl, domEl);
+    _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom.default.render(reactEl, domEl);
+    _reactDom.default.render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterRender'); // mark end of render
+
+  const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -761,6 +761,8 @@ function formatWithValidation(url, options) {
 }
 
 exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
 
 /***/ }),
 
@@ -2675,8 +2677,13 @@ class Router {
 
   change(method, _url, _as, options) {
     return new _promise.default((resolve, reject) => {
-      // If url and as provided as an object representation,
+      // marking route changes as a navigation start entry
+      if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+        performance.mark('routeChange');
+      } // If url and as provided as an object representation,
       // we'll format them into the string version here.
+
+
       const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
       let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
       // "<page>/index.html" directly for the SSR page.
@housseindjirdeh housseindjirdeh force-pushed the housseindjirdeh:next-user-timings branch from afd8a90 to 0d98a7c Aug 7, 2019
@ijjk

This comment has been minimized.

Copy link
Member

ijjk commented Aug 7, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 19.9s 20s ⚠️ +52ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +3.01 kB
Total Bundle (main, webpack, commons) Size 207 kB 208 kB ⚠️ +938 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.4 kB ⚠️ +317 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +950 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.2 kB ⚠️ +296 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +677 B
Client main gzip Size 5.46 kB 5.7 kB ⚠️ +245 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +689 B
Client main Modern gzip Size 4.83 kB 5.04 kB ⚠️ +209 B
Client commons Size 188 kB 188 kB ⚠️ +261 B
Client commons gzip Size 61.3 kB 61.4 kB ⚠️ +72 B
Client commons Modern Size 169 kB 169 kB ⚠️ +261 B
Client commons Modern gzip Size 55.1 kB 55.2 kB ⚠️ +87 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Base Rendered Size 2.76 kB 2.76 kB
Build Dir Size 1.39 MB 1.4 MB ⚠️ +7.76 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 21s 21.1s ⚠️ +105ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +3.01 kB
Total Bundle (main, webpack, commons) Size 207 kB 208 kB ⚠️ +938 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.4 kB ⚠️ +317 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +950 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.2 kB ⚠️ +296 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +677 B
Client main gzip Size 5.46 kB 5.7 kB ⚠️ +245 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +689 B
Client main Modern gzip Size 4.83 kB 5.04 kB ⚠️ +209 B
Client commons Size 188 kB 188 kB ⚠️ +261 B
Client commons gzip Size 61.3 kB 61.4 kB ⚠️ +72 B
Client commons Modern Size 169 kB 169 kB ⚠️ +261 B
Client commons Modern gzip Size 55.1 kB 55.2 kB ⚠️ +87 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Serverless pages/link Size 255 kB 255 kB ⚠️ +385 B
Serverless pages/link gzip Size 68.6 kB 68.7 kB ⚠️ +158 B
Serverless pages/index Size 248 kB 248 kB ⚠️ +385 B
Serverless pages/index gzip Size 66.4 kB 66.5 kB ⚠️ +150 B
Serverless pages/_error Size 247 kB 248 kB ⚠️ +385 B
Serverless pages/_error gzip Size 66.1 kB 66.3 kB ⚠️ +150 B
Serverless pages/routerDirect Size 248 kB 249 kB ⚠️ +385 B
Serverless pages/routerDirect gzip Size 66.3 kB 66.5 kB ⚠️ +148 B
Serverless pages/withRouter Size 248 kB 249 kB ⚠️ +385 B
Serverless pages/withRouter gzip Size 66.4 kB 66.5 kB ⚠️ +143 B
Build Dir Size 2.59 MB 2.6 MB ⚠️ +10.1 kB
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commons.js
@@ -1242,6 +1242,8 @@ function formatWithValidation(url, options) {
 }
 
 exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
 
 /***/ }),
 
@@ -3194,8 +3196,13 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
-        // If url and as provided as an object representation,
+        // marking route changes as a navigation start entry
+        if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+          performance.mark('routeChange');
+        } // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
 let isInitialRender = typeof _reactDom.default.hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom.default.hydrate(reactEl, domEl);
+    _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom.default.render(reactEl, domEl);
+    _reactDom.default.render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterRender'); // mark end of render
+
+  const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -761,6 +761,8 @@ function formatWithValidation(url, options) {
 }
 
 exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
 
 /***/ }),
 
@@ -2675,8 +2677,13 @@ class Router {
 
   change(method, _url, _as, options) {
     return new _promise.default((resolve, reject) => {
-      // If url and as provided as an object representation,
+      // marking route changes as a navigation start entry
+      if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+        performance.mark('routeChange');
+      } // If url and as provided as an object representation,
       // we'll format them into the string version here.
+
+
       const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
       let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
       // "<page>/index.html" directly for the SSR page.
@housseindjirdeh housseindjirdeh force-pushed the housseindjirdeh:next-user-timings branch from 0d98a7c to 7a8b880 Aug 8, 2019
@ijjk

This comment has been minimized.

Copy link
Member

ijjk commented Aug 8, 2019

Stats from current PR

Click to expand stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 22.8s 22.1s -709ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +3.01 kB
Total Bundle (main, webpack, commons) Size 207 kB 208 kB ⚠️ +938 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.4 kB ⚠️ +317 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +950 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.2 kB ⚠️ +296 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 301 B 301 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +677 B
Client main gzip Size 5.46 kB 5.7 kB ⚠️ +245 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +689 B
Client main Modern gzip Size 4.83 kB 5.04 kB ⚠️ +209 B
Client commons Size 188 kB 188 kB ⚠️ +261 B
Client commons gzip Size 61.3 kB 61.4 kB ⚠️ +72 B
Client commons Modern Size 169 kB 169 kB ⚠️ +261 B
Client commons Modern gzip Size 55.1 kB 55.2 kB ⚠️ +87 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Base Rendered Size 2.76 kB 2.76 kB
Build Dir Size 1.39 MB 1.4 MB ⚠️ +7.76 kB
Click to expand serverless stats ⚠️ Total Bundle Size Increase ⚠️
zeit/next.js canary housseindjirdeh/next.js next-user-timings Change
Build Duration 23.8s 23.2s -576ms
node_modules Size 43.6 MB 43.6 MB ⚠️ +3.01 kB
Total Bundle (main, webpack, commons) Size 207 kB 208 kB ⚠️ +938 B
Total Bundle (main, webpack, commons) gzip Size 68.1 kB 68.4 kB ⚠️ +316 B
Total Bundle (main, webpack, commons) Modern Size 182 kB 182 kB ⚠️ +950 B
Total Bundle (main, webpack, commons) Modern gzip Size 59.9 kB 60.2 kB ⚠️ +296 B
Client _app Size 2.39 kB 2.39 kB
Client _app gzip Size 1.08 kB 1.08 kB ⚠️ +1 B
Client _app Modern Size 1.83 kB 1.83 kB
Client _app gzip Modern Size 890 B 890 B
Client _error Size 8.22 kB 8.22 kB
Client _error gzip Size 3.16 kB 3.16 kB
Client _error Modern Size 5.85 kB 5.85 kB
Client _error gzip Modern Size 2.33 kB 2.33 kB
Client pages/index Size 343 B 343 B
Client pages/index gzip Size 246 B 246 B
Client pages/index Modern Size 319 B 319 B
Client pages/index gzip Modern Size 254 B 254 B
Client pages/link Size 4.08 kB 4.08 kB
Client pages/link gzip Size 1.8 kB 1.8 kB
Client pages/link Modern Size 3.7 kB 3.7 kB
Client pages/link gzip Modern Size 1.7 kB 1.7 kB
Client pages/routerDirect Size 423 B 423 B
Client pages/routerDirect gzip Size 306 B 306 B
Client pages/routerDirect Modern Size 411 B 411 B
Client pages/routerDirect gzip Modern Size 314 B 314 B
Client pages/withRouter Size 435 B 435 B
Client pages/withRouter gzip Size 300 B 301 B ⚠️ +1 B
Client pages/withRouter Modern Size 423 B 423 B
Client pages/withRouter gzip Modern Size 309 B 309 B
Client main Size 15.8 kB 16.5 kB ⚠️ +677 B
Client main gzip Size 5.46 kB 5.7 kB ⚠️ +243 B
Client main Modern Size 12.8 kB 13.5 kB ⚠️ +689 B
Client main Modern gzip Size 4.83 kB 5.04 kB ⚠️ +209 B
Client commons Size 188 kB 188 kB ⚠️ +261 B
Client commons gzip Size 61.3 kB 61.4 kB ⚠️ +72 B
Client commons Modern Size 169 kB 169 kB ⚠️ +261 B
Client commons Modern gzip Size 55.1 kB 55.2 kB ⚠️ +87 B
Client webpack Size 1.53 kB 1.53 kB
Client webpack gzip Size 778 B 778 B
Client webpack Modern Size 1.53 kB 1.53 kB
Client webpack Modern gzip Size 785 B 785 B
Serverless pages/link Size 255 kB 255 kB ⚠️ +385 B
Serverless pages/link gzip Size 68.6 kB 68.7 kB ⚠️ +157 B
Serverless pages/index Size 248 kB 248 kB ⚠️ +385 B
Serverless pages/index gzip Size 66.4 kB 66.5 kB ⚠️ +147 B
Serverless pages/_error Size 247 kB 248 kB ⚠️ +385 B
Serverless pages/_error gzip Size 66.1 kB 66.3 kB ⚠️ +145 B
Serverless pages/routerDirect Size 248 kB 249 kB ⚠️ +385 B
Serverless pages/routerDirect gzip Size 66.3 kB 66.5 kB ⚠️ +145 B
Serverless pages/withRouter Size 248 kB 249 kB ⚠️ +385 B
Serverless pages/withRouter gzip Size 66.4 kB 66.5 kB ⚠️ +142 B
Build Dir Size 2.59 MB 2.6 MB ⚠️ +10.1 kB
Diff for main.js
@@ -771,14 +771,48 @@ function _renderError() {
 var isInitialRender = typeof _reactDom["default"].hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom["default"].hydrate(reactEl, domEl);
+    _reactDom["default"].hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom["default"].render(reactEl, domEl);
+    _reactDom["default"].render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterRender'); // mark end of render
+
+  var navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commons.js
@@ -1242,6 +1242,8 @@ function formatWithValidation(url, options) {
 }
 
 exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
 
 /***/ }),
 
@@ -3194,8 +3196,13 @@ function () {
       var _this2 = this;
 
       return new _promise["default"](function (resolve, reject) {
-        // If url and as provided as an object representation,
+        // marking route changes as a navigation start entry
+        if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+          performance.mark('routeChange');
+        } // If url and as provided as an object representation,
         // we'll format them into the string version here.
+
+
         var url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
         var as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
         // "<page>/index.html" directly for the SSR page.
Diff for mainModern.js
@@ -599,14 +599,48 @@ function _renderError() {
 let isInitialRender = typeof _reactDom.default.hydrate === 'function';
 
 function renderReactElement(reactEl, domEl) {
-  // The check for `.hydrate` is there to support React alternatives like preact
+  // mark start of hydrate/render
+  if (_utils.SUPPORTS_PERFORMANCE_USER_TIMING) {
+    performance.mark('beforeRender');
+  } // The check for `.hydrate` is there to support React alternatives like preact
+
+
   if (isInitialRender) {
-    _reactDom.default.hydrate(reactEl, domEl);
+    _reactDom.default.hydrate(reactEl, domEl, markHydrateComplete);
 
     isInitialRender = false;
   } else {
-    _reactDom.default.render(reactEl, domEl);
+    _reactDom.default.render(reactEl, domEl, markRenderComplete);
+  }
+}
+
+function markHydrateComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterHydrate'); // mark end of hydration
+
+  performance.measure('Next.js-before-hydration', null, 'beforeRender');
+  performance.measure('Next.js-hydration', 'beforeRender', 'afterHydrate');
+  clearMarks();
+}
+
+function markRenderComplete() {
+  if (!_utils.SUPPORTS_PERFORMANCE_USER_TIMING) return;
+  performance.mark('afterRender'); // mark end of render
+
+  const navStartEntries = performance.getEntriesByName('routeChange', 'mark');
+
+  if (!navStartEntries.length) {
+    return;
   }
+
+  performance.measure('Next.js-route-change-to-render', navStartEntries[0].name, 'beforeRender');
+  performance.measure('Next.js-render', 'beforeRender', 'afterRender');
+  clearMarks();
+}
+
+function clearMarks() {
+  performance.clearMarks();
+  performance.clearMeasures();
 }
 
 function AppContainer(_ref4) {
Diff for commonsModern.js
@@ -761,6 +761,8 @@ function formatWithValidation(url, options) {
 }
 
 exports.formatWithValidation = formatWithValidation;
+exports.SUPPORTS_PERFORMANCE = typeof performance !== 'undefined';
+exports.SUPPORTS_PERFORMANCE_USER_TIMING = exports.SUPPORTS_PERFORMANCE && typeof performance.mark === 'function' && typeof performance.measure === 'function';
 
 /***/ }),
 
@@ -2675,8 +2677,13 @@ class Router {
 
   change(method, _url, _as, options) {
     return new _promise.default((resolve, reject) => {
-      // If url and as provided as an object representation,
+      // marking route changes as a navigation start entry
+      if (utils_1.SUPPORTS_PERFORMANCE_USER_TIMING) {
+        performance.mark('routeChange');
+      } // If url and as provided as an object representation,
       // we'll format them into the string version here.
+
+
       const url = typeof _url === 'object' ? utils_1.formatWithValidation(_url) : _url;
       let as = typeof _as === 'object' ? utils_1.formatWithValidation(_as) : _as; // Add the ending slash to the paths. So, we can serve the
       // "<page>/index.html" directly for the SSR page.
@Timer
Timer approved these changes Aug 9, 2019
@Timer Timer merged commit d190f2e into zeit:canary Aug 9, 2019
3 of 4 checks passed
3 of 4 checks passed
continuous-integration/travis-ci/pr The Travis CI build could not complete due to an error
Details
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: test Your tests passed on CircleCI!
Details
zeit.next.js #20190808.9 succeeded
Details
@Timer Timer added this to the 9.0.4 milestone Aug 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.