Use Browsertime 16.7.0 and show the new metrics (#3656)

* Use Browsertime 16.7.0 and show the new metrics

docs/_includes/version/browsertime.txt

@@ -1 +1 @@
-16.6.0
+16.7.0

lib/plugins/browsertime/aggregator.js

@@ -52,6 +52,15 @@ module.exports = {
       );
     }
 
+    if (browsertimeRunData.timings.interactionToNextPaint) {
+      statsHelpers.pushGroupStats(
+        this.statsPerType,
+        this.groups[group],
+        ['timings', 'interactionToNextPaint'],
+        browsertimeRunData.timings.interactionToNextPaint
+      );
+    }
+
     if (browsertimeRunData.pageinfo.cumulativeLayoutShift) {
       statsHelpers.pushGroupStats(
         this.statsPerType,

lib/plugins/html/templates/url/iteration/index.pug

@@ -93,6 +93,11 @@ block content
             if lcp
               tr
                 th(colspan='2') Google Web Vitals
+            - ttfb = get(d, 'browsertime.run.timings.pageTimings.backEndTime') 
+            if ttfb
+              tr
+                td TTFB
+                td #{h.time.ms(ttfb)}
             if fcp
               tr
                 td First Contentful Paint (FCP) 
@@ -106,6 +111,10 @@ block content
                 tr
                   td Cumulative Layout Shift (CLS) 
                   td #{cls.toFixed(2)}
+            - inp = get(d, 'browsertime.run.timings.interactionToNextPaint')
+            if inp
+              tr
+                td #{h.time.ms(inp)}
             - tbt = get(d, 'browsertime.run.cpu.longTasks.totalBlockingTime')
             if tbt  
               tr
@@ -128,6 +137,12 @@ block content
               tr
                 td CPU longest task duration
                 td #{h.time.ms(maxLongTask)}
+            - lastLongTask= get(d, 'browsertime.run.cpu.longTasks.lastLongTask') 
+            if lastLongTask 
+              tr
+                td CPU last long task happens at
+                td #{h.time.ms(lastLongTask)}
+
             - firstVisualChange = get(d, 'browsertime.run.visualMetrics.FirstVisualChange')
             if firstVisualChange
               tr

lib/plugins/html/templates/url/metrics/index.pug

@@ -16,6 +16,9 @@ if browsertime
     if browsertime.pageinfo && browsertime.pageinfo.cumulativeLayoutShift !== undefined
       a(href='#cumulativeLayoutShift') Cumulative Layout Shift
       |  | 
+    if timings.interactionToNextPaint
+      a(href='#interactionToNextPaint') Interaction To Next Paint
+      |  | 
     if browsertime.timings.elementTimings && Object.keys(browsertime.timings.elementTimings).length > 0
       a(href='#elementTimings') Element Timings
       |  | 
@@ -90,6 +93,11 @@ if browsertime
               td
                 a(href=baseHelpURL + 'LastMeaningfulPaint') Last Meaningful Paint
               td.number #{h.time.ms(visualMetrics.LastMeaningfulPaint.toFixed(0))}
+          if visualMetrics.LargestContentfulPaint
+            tr
+              td
+                a(href=baseHelpURL + 'LargestContentfulPaint') Largest Contentful Paint
+              td.number #{h.time.ms(visualMetrics.LargestContentfulPaint.toFixed(0))}
           tr
             td
               a(href=baseHelpURL + 'VisualComplete85') Visual Complete 85%
@@ -132,6 +140,11 @@ if browsertime
         table
           tr
             th(colspan='2') Google Web Vitals
+          if (timings.ttfb)
+            tr
+              td
+                a(href=baseHelpURL + 'ttfb') Time to first byte (TTFB)
+              td.number #{h.time.ms(timings.ttfb.toFixed(0))}
           if (timings.paintTiming && timings.paintTiming['first-contentful-paint'])
             tr
               td
@@ -147,6 +160,11 @@ if browsertime
               td
                 a(href='#cumulativeLayoutShift') Cumulative Layout Shift (CLS)
               td.number #{browsertime.pageinfo.cumulativeLayoutShift.toFixed(2)}
+          if (timings.interactionToNextPaint) 
+           tr
+              td
+                a(href='#interactionToNextPaint') Interaction to next paint (INP)
+              td.number #{h.time.ms(timings.interactionToNextPaint)}
           if browsertime.timings.firstInput !== undefined
             tr 
               td
@@ -238,6 +256,7 @@ if browsertime
   include ./lcp.pug
   include ./firstInput.pug
   include ./layoutShift.pug
+  include ./inp.pug
   include ./elementTimings.pug
   include ./serverTimings.pug
 

lib/plugins/html/templates/url/metrics/inp.pug

@@ -0,0 +1,11 @@
+if browsertime.pageinfo && browsertime.pageinfo.interactionToNextPaintInfo!== undefined
+  a#interactionToNextPaint
+  h3 Interaction to Next Paint
+  p Interaction to Next Paint (INP) is an experimental metric that try to measure responsiveness. It's useful if you are testing user journeys. The metric is really new and we try to measure it as good as possible.  Read more about 
+    a(href='https://web.dev/inp/') Interaction to Next Paint
+    | .
+  .row
+    p The measured latency was #{h.time.ms(browsertime.pageinfo.interactionToNextPaintInfo.latency)}. And the events that contributed to the latency was:
+      ul
+        each entry in browsertime.pageinfo.interactionToNextPaintInfo.entries
+          li #{entry.name} - #{h.time.ms(entry.duration)}

lib/plugins/html/templates/url/summary/index.pug

@@ -117,9 +117,15 @@ block content
                 td #{h.time.ms(fullyLoaded)}
             - fcp = get(d, 'browsertime.pageSummary.statistics.timings.paintTiming["first-contentful-paint"].median') 
             - lcp = get(d, 'browsertime.pageSummary.statistics.timings.largestContentfulPaint.renderTime.median')
+            - ttfb = get(d, 'browsertime.pageSummary.statistics.timings.pageTimings.backEndTime.median')
+            - inp = get(d, 'browsertime.pageSummary.statistics.timings.interactionToNextPaint.median')
             if lcp
               tr
-                th(colspan='2') Google Web Vitals
+                th(colspan='2') Google Web Vitals     
+            if ttfb
+              tr
+                td TTFB [median]
+                td #{h.time.ms(ttfb)}
             if fcp
               tr
                 td First Contentful Paint (FCP) [median]
@@ -134,6 +140,11 @@ block content
                   td Cumulative Layout Shift (CLS) [median]
                   td #{cls.toFixed(2)}
             - tbt = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime.median')
+            if inp
+                tr
+                  td Interaction To Next Paint (INP) [median]
+                  td #{h.time.ms(inp)}
+            - tbt = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime.median')
             if tbt  
               tr
                 td Total Blocking Time [median]
@@ -155,6 +166,11 @@ block content
               tr
                 td CPU longest task duration
                 td #{h.time.ms(maxLongTask)}
+            - lastLongTask = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.lastLongTask.median') 
+            if lastLongTask 
+              tr
+                td CPU last long task happens at
+                td #{h.time.ms(lastLongTask)}
             - firstVisualChange = get(d, 'browsertime.pageSummary.statistics.visualMetrics.FirstVisualChange.median')
             if firstVisualChange
               tr

lib/plugins/html/templates/url/summary/summaryBox.pug

@@ -91,4 +91,5 @@ if btStatistics
         +getRow('Total Blocking Time', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime' , pageInfo.data.browsertime.pageSummary.browserScripts, 'cpu.longTasks.totalBlockingTime', h.time.ms)
         +getRow('Max Potential FID', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.maxPotentialFid', pageInfo.data.browsertime.pageSummary.browserScripts, 'cpu.longTasks.maxPotentialFid', h.time.ms)
         +getRow('CPU long tasks ', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.tasks' , pageInfo.data.browsertime.pageSummary.browserScripts, 'cpu.longTasks.tasks', h.noop)
-        +getRow(' CPU longest task duration ', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.durations.max' , pageInfo.data.browsertime.pageSummary.browserScripts, 'cpu.longTasks.durations.max', h.time.ms)
+        +getRow('CPU longest task duration ', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.durations.max' , pageInfo.data.browsertime.pageSummary.browserScripts, 'cpu.longTasks.durations.max', h.time.ms)
+        +getRow('CPU last long task happens at', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.lastLongTask' , pageInfo.data.browsertime.pageSummary.browserScripts, 'cpu.longTasks.lastLongTask', h.time.ms)

lib/support/friendlynames.js

@@ -4,6 +4,13 @@ const { noop, size, time, co2, httpErrors, decimals } = require('./helpers');
 module.exports = {
   browsertime: {
     googleWebVitals: {
+      timeToFirstByte: {
+        path: 'statistics.timings.pageTimings.backEndTime.median',
+        summaryPath: 'pageTimings.backEndTime',
+        runPath: 'timings.pageTimings.backEndTime',
+        name: 'Time to First Byte',
+        format: time.ms
+      },
       firstContentfulPaint: {
         path: "statistics.timings.paintTiming['first-contentful-paint'].median",
         summaryPath: "timings.paintTiming['first-contentful-paint']",
@@ -18,6 +25,13 @@ module.exports = {
         name: 'Largest Contentful Paint',
         format: time.ms
       },
+      interactionToNextPaint: {
+        path: 'statistics.timings.interactionToNextPaint.median',
+        summaryPath: 'timings.interactionToNextPaint',
+        runPath: 'timings.interactionToNextPaint',
+        name: 'Interaction to Next Paint',
+        format: time.ms
+      },
       totalBlockingTime: {
         path: 'statistics.cpu.longTasks.totalBlockingTime.median',
         summaryPath: 'cpu.longTasks.totalBlockingTime',

npm-shrinkwrap.json

@@ -13,7 +13,7 @@
         "@tgwf/co2": "0.8.0",
         "aws-sdk": "2.1121.0",
         "axe-core": "4.4.1",
-        "browsertime": "16.5.0",
+        "browsertime": "16.7.0",
         "cli-color": "2.0.2",
         "coach-core": "7.1.2",
         "concurrent-queue": "7.0.2",
@@ -1681,9 +1681,9 @@
       }
     },
     "node_modules/browsertime": {
-      "version": "16.5.0",
-      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-16.5.0.tgz",
-      "integrity": "sha512-4RacX8OOb7MsnMSsNMGDGyiFj8EyFIBiiXS92M4nRmKaBawiKFWtgXJxyDdynRb3TT9VsSSXFBOqqGC4/Lp5+Q==",
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-16.7.0.tgz",
+      "integrity": "sha512-AenR2/6ZQOR7tE18e/03wmxHznAsLbg4vcyqAflJKVGSKbH9G6LbsYADpW2Ynf+NORpHrJ0LXqAbrpOFhIWKhQ==",
       "dependencies": {
         "@cypress/xvfb": "1.2.4",
         "@devicefarmer/adbkit": "2.11.3",
@@ -9761,9 +9761,9 @@
       }
     },
     "browsertime": {
-      "version": "16.5.0",
-      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-16.5.0.tgz",
-      "integrity": "sha512-4RacX8OOb7MsnMSsNMGDGyiFj8EyFIBiiXS92M4nRmKaBawiKFWtgXJxyDdynRb3TT9VsSSXFBOqqGC4/Lp5+Q==",
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-16.7.0.tgz",
+      "integrity": "sha512-AenR2/6ZQOR7tE18e/03wmxHznAsLbg4vcyqAflJKVGSKbH9G6LbsYADpW2Ynf+NORpHrJ0LXqAbrpOFhIWKhQ==",
       "requires": {
         "@cypress/xvfb": "1.2.4",
         "@devicefarmer/adbkit": "2.11.3",

package.json

@@ -80,7 +80,7 @@
     "@tgwf/co2": "0.8.0",
     "aws-sdk": "2.1121.0",
     "axe-core": "4.4.1",
-    "browsertime": "16.5.0",
+    "browsertime": "16.7.0",
     "coach-core": "7.1.2",
     "cli-color": "2.0.2",
     "concurrent-queue": "7.0.2",