Sync metrics name and make sure we show them on all places. (#3004)

* Sync metrics name and make sure we show them on all places. * lint
sitespeedio · May 19, 2020 · 3b9b7fa · 3b9b7fa
1 parent 1f4c944
commit 3b9b7fa
Show file tree

Hide file tree

Showing 15 changed files with 96 additions and 17 deletions.
diff --git a/docs/documentation/sitespeed.io/metrics/index.md b/docs/documentation/sitespeed.io/metrics/index.md
@@ -131,7 +131,7 @@ The Largest Contentful Paint (LCP) metric reports the render time of the largest
 Measure when specfific elements occur on the screen. To get this metric you need to annotate your HTML element with the attribute **elementtiming**.
 
 ### Cumulative Layout Shift
-Cumulative Layout Shift (CLS) measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. This is a Chrome only metric. We report this in % (how many percentage of the layout moved).
+Cumulative Layout Shift (CLS) measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. This is a Chrome only metric.
 
 ### Time To DOM Content Flushed
 Internal Firefox metric activated by setting the preference  **dom.performance.time_to_dom_content_flushed.enabled** to true.

diff --git a/lib/plugins/browsertime/aggregator.js b/lib/plugins/browsertime/aggregator.js
@@ -23,6 +23,24 @@ module.exports = {
       );
     }
 
+    if (browsertimeRunData.timings.largestContentfulPaint) {
+      statsHelpers.pushGroupStats(
+        this.statsPerType,
+        this.groups[group],
+        ['timings', 'largestContentfulPaint'],
+        browsertimeRunData.timings.largestContentfulPaint.renderTime
+      );
+    }
+
+    if (browsertimeRunData.pageinfo.layoutShift) {
+      statsHelpers.pushGroupStats(
+        this.statsPerType,
+        this.groups[group],
+        ['pageinfo', 'layoutShift'],
+        browsertimeRunData.pageinfo.layoutShift
+      );
+    }
+
     forEach(timings, timing => {
       if (browsertimeRunData.timings[timing]) {
         statsHelpers.pushGroupStats(

diff --git a/lib/plugins/html/index.js b/lib/plugins/html/index.js
@@ -28,14 +28,17 @@ const defaultConfig = {
       'score.privacy',
       'score.performance',
       'timings.firstPaint',
+      'timings.firstContentfulPaint',
       'timings.fullyLoaded',
       'timings.pageLoadTime',
+      'timings.largestContentfulPaint',
       'timings.FirstVisualChange',
       'timings.LastVisualChange',
       'timings.SpeedIndex',
       'timings.PerceptualSpeedIndex',
       'timings.VisualReadiness',
       'timings.VisualComplete',
+      'pageinfo.layoutShift',
       'requests.total',
       'requests.javascript',
       'requests.css',

diff --git a/lib/plugins/html/setup/detailed.js b/lib/plugins/html/setup/detailed.js
@@ -20,7 +20,6 @@ module.exports = function(data) {
   if (!data) {
     return [];
   }
-
   const rows = [];
 
   const coach = data.coach;
@@ -115,13 +114,22 @@ module.exports = function(data) {
 
   if (browsertime) {
     const summary = browsertime.summary;
-
     rows.push(
       row(summary.rumSpeedIndex, 'RUMSpeed Index', 'rumSpeedIndex', h.time.ms),
-      row(summary.firstPaint, 'First Paint', 'firstPaint', h.time.ms),
-      row(summary.fullyLoaded, 'Fully Loaded', 'fullyLoaded', h.time.ms)
+      row(summary.firstPaint, 'First Paint', 'firstPaint', h.time.ms)
     );
 
+    if (summary.timings) {
+      rows.push(
+        row(
+          summary.timings.fullyLoaded,
+          'Fully Loaded',
+          'fullyLoaded',
+          h.time.ms
+        )
+      );
+    }
+
     if (summary.timeToDomContentFlushed) {
       rows.push(
         row(
@@ -133,6 +141,17 @@ module.exports = function(data) {
       );
     }
 
+    if (summary.timings && summary.timings.largestContentfulPaint) {
+      rows.push(
+        row(
+          summary.timings.largestContentfulPaint,
+          'Largest Contentful Paint',
+          'largestContentfulPaint',
+          h.time.ms
+        )
+      );
+    }
+
     if (summary.paintTiming) {
       const paintTimings = Object.keys(summary.paintTiming);
       for (let pt of paintTimings) {
@@ -151,6 +170,16 @@ module.exports = function(data) {
       }
     }
 
+    if (summary.pageinfo && summary.pageinfo.layoutShift) {
+      rows.push(
+        row(
+          summary.pageinfo.layoutShift,
+          'Cumulative Layout Shift',
+          'cumulativeLayoutShift'
+        )
+      );
+    }
+
     if (summary.visualMetrics) {
       rows.push(
         row(

diff --git a/lib/plugins/html/setup/summaryBoxesDefaultLimits.js b/lib/plugins/html/setup/summaryBoxesDefaultLimits.js
@@ -25,6 +25,8 @@ module.exports = {
   // All timings are in ms
   timings: {
     firstPaint: { green: 1000, yellow: 2000 },
+    firstContentfulPaint: {},
+    largestContenfulPaint: {},
     fullyLoaded: {},
     pageLoadTime: {},
     FirstVisualChange: { green: 1000, yellow: 2000 },
@@ -34,6 +36,9 @@ module.exports = {
     VisualReadiness: { green: 500, yellow: 1000 },
     VisualComplete: {}
   },
+  pageinfo: {
+    layoutShift: {}
+  },
   requests: {
     total: { green: 80, yellow: 200 },
     javascript: {},

diff --git a/lib/plugins/html/templates/detailed.pug b/lib/plugins/html/templates/detailed.pug
@@ -14,7 +14,7 @@ block content
           th p90
           th max
       each metric in metrics
-        if metric.node && metric.node.min
+        if metric.node && (metric.node.min  || metric.node.min === 0)
           tr
             td(data-title='Metric', data-value=metric.name)
               if (metric.metricName)

diff --git a/lib/plugins/html/templates/help.pug b/lib/plugins/html/templates/help.pug
@@ -45,7 +45,7 @@ block content
 
     h2(id='timingMetrics') Timing metrics
 
-    h5(id='backEndTime') BackEndTime
+    h5(id='backEndTime') BackEndTime / TTFB
     p The time it takes for the network and the server to generate and start sending the HTML. Collected using the Navigation Timing API with the definition: responseStart - navigationStart
 
     h5(id='frontEndTime') FrontEndTime

diff --git a/lib/plugins/html/templates/url/iteration/index.pug b/lib/plugins/html/templates/url/iteration/index.pug
@@ -98,7 +98,7 @@ block content
             if cls || cls === 0
                 tr
                   td CLS
-                  td #{cls.toFixed(2)} %
+                  td #{cls}
             - tbt = get(d, 'browsertime.run.cpu.longTasks.totalBlockingTime')
             if tbt  
               tr

diff --git a/lib/plugins/html/templates/url/metrics/layoutShift.pug b/lib/plugins/html/templates/url/metrics/layoutShift.pug
@@ -1,9 +1,9 @@
 if browsertime.pageinfo && browsertime.pageinfo.layoutShift !== undefined
     a#layoutShift
-    h3 Detected unexpected layout shifts
+    h3 Detected Cumulative Layout Shift
     if (browsertime.pageinfo.layoutShift === 0) 
       p No layout shift detected.
     else
-      p #{browsertime.pageinfo.layoutShift.toFixed(2)} % layout shift collected from the 
+      p #{browsertime.pageinfo.layoutShift.toFixed(2)} layout shift collected from the 
         a(href='https://web.dev/layout-instability-api') The Layout Instability API
         | .
diff --git a/lib/plugins/html/templates/url/summary/index.pug b/lib/plugins/html/templates/url/summary/index.pug
@@ -92,7 +92,7 @@ block content
             if cls || cls === 0
                 tr
                   td CLS [median]
-                  td #{cls.toFixed(2)} %
+                  td #{cls}
             - tbt = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime.median')
             if tbt  
               tr

diff --git a/lib/plugins/html/templates/url/summary/summaryBox.pug b/lib/plugins/html/templates/url/summary/summaryBox.pug
@@ -72,7 +72,7 @@ if btStatistics
         each timing in timingMetrics
           +getRow(timing, pageInfo, 'data.browsertime.pageSummary.statistics.timings.' + timing , pageInfo.data.browsertime.pageSummary.browserScripts, 'timings.' + timing, h.time.ms)
 
-        +getRow('CLS', pageInfo, 'data.browsertime.pageSummary.statistics.pageinfo.layoutShift' , pageInfo.data.browsertime.pageSummary.browserScripts, 'pageinfo.layoutShift', h.percent)
+        +getRow('CLS', pageInfo, 'data.browsertime.pageSummary.statistics.pageinfo.layoutShift' , pageInfo.data.browsertime.pageSummary.browserScripts, 'pageinfo.layoutShift', h.noop)
 
       if btStatistics.timings && btStatistics.timings.userTimings && btStatistics.timings.userTimings.marks
         tr 

diff --git a/lib/support/friendlynames.js b/lib/support/friendlynames.js
@@ -10,6 +10,18 @@ module.exports = {
         name: 'First Paint',
         format: time.ms
       },
+      firstContentfulPaint: {
+        path: "statistics.timings.paintTiming['first-contentful-paint'].median",
+        summaryPath: "paintTiming['first-contentful-paint']",
+        name: 'First Contentful Paint',
+        format: time.ms
+      },
+      largestContentfulPaint: {
+        path: 'statistics.timings.largestContentfulPaint.median',
+        summaryPath: 'timings.largestContentfulPaint',
+        name: 'Largest Contentful Paint',
+        format: time.ms
+      },
       loadEventEnd: {
         path: 'statistics.timings.loadEventEnd.median',
         summaryPath: 'loadEventEnd',
@@ -31,7 +43,7 @@ module.exports = {
       backEndTime: {
         path: 'statistics.timings.pageTimings.backEndTime.median',
         summaryPath: 'pageTimings.backEndTime',
-        name: 'Backend Time',
+        name: 'TTFB',
         format: time.ms
       },
       pageLoadTime: {
@@ -120,6 +132,14 @@ module.exports = {
         name: 'Total Duration of Long Tasks',
         format: time.ms
       }
+    },
+    pageinfo: {
+      layoutShift: {
+        path: 'statistics.pageinfo.layoutShift.median',
+        summaryPath: 'pageinfo.layoutShift',
+        name: 'Cumulative Layout Shift',
+        format: noop
+      }
     }
   },
   pagexray: {

diff --git a/lib/support/statsHelpers.js b/lib/support/statsHelpers.js
@@ -55,6 +55,10 @@ module.exports = {
     options = options || {};
     let percentiles = options.percentiles || [0, 90, 100];
     let decimals = options.decimals || 0;
+    if (stats.median() < 1) {
+      decimals = 4;
+    }
+
     let data = {
       median: parseFloat(stats.median().toFixed(decimals)),
       mean: parseFloat(stats.amean().toFixed(decimals))

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "@tgwf/co2": "0.6.1",
     "aws-sdk": "2.613.0",
     "axe-core": "3.5.3",
-    "browsertime": "8.12.0",
+    "browsertime": "8.12.1",
     "coach-core": "5.0.1",
     "cli-color": "1.4.0",
     "concurrent-queue": "7.0.2",