sitespeed.io 21.2.2 → 21.6.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # CHANGELOG - sitespeed.io  (we use [semantic versioning](https://semver.org))
 
+## 21.6.0 - 2022-01-24
+### Added
+* Updated to Edge stable release in the Docker container.
+* Remove Crux distribution table and use pie charts instead [#3537](https://github.com/sitespeedio/sitespeed.io/pull/3537)
+* Add extra sleep time between Crux calls to make sure to not overload the API limit [#3536](https://github.com/sitespeedio/sitespeed.io/pull/3536).
+* Added extra Crux enable command line `--crux.enable` to enable Crux [#3538](https://github.com/sitespeedio/sitespeed.io/pull/3538). Its default value is `true` and you also need to supply the Crux key to run Crux. The reason for the new parameter is that you can now configure the key in your configuration JSON and set the enable to false and then you enable it with the CLI parameter when you actually need to run Crux.
+* Show Crux-metrics on the Summary page [#3540](https://github.com/sitespeedio/sitespeed.io/pull/3540).
+* Updated summary metrics tables with headings to make it easier to read [#3541](https://github.com/sitespeedio/sitespeed.io/pull/3541).
+* Added [Browsertime 14.17.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14170---2022-01-23) with new Select and click.byName commands. With that Browsertime version you also need to have ffprobe installed when you run Visual Metrics but that should already be installed.
+* Added [Browsertime 14.18.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14180---2022-01-24) with a fix for Firefox [#1698](https://github.com/sitespeedio/browsertime/issues/1698)
+
+## 21.5.0 - 2022-01-14
+### Added
+* Upgraded to [Browsertime 14.15.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14150---2022-01-12) that adds support for `--appendToUserAgent` for Chrome/Edge/Firefox. And then Browsertime 14.16.0 that supports Geckodriver for Raspberry Pi.
+## 21.4.0 - 2022-01-12
+### Added
+* Updated to a new build of WebPageReplay in the Docker container
+* Updated the Ubuntu base image to latest version and latest NodeJS in the Docketr container.
+* Upgraded Browsertime [#3528](https://github.com/sitespeedio/sitespeed.io/pull/3528): 
+  * Add support for Humble as connectivity engine for mobile phone testing. Make sure to setup Humble on a Raspberry Pi 4 and the choose engine with --connectivity.engine humble and set the URL to your instance --connectivity.humble.url http://raspberrypi.local:3000. Added in #1691.
+* Upgraded to Chrome 97 and Edge 97 in the Docker container.
+* Upgraded to Chromedriver 97.
+### Fixed
+* Updated Chromedriver library that automatically picks up the Chromedriver if it's installed on Raspberry Pi.
+## 21.3.0 - 2022-01-01
+### Added
+* Updated to [Browsertime 14.13.0](https://github.com/sitespeedio/browsertime/blob/main/CHANGELOG.md#14130---2021-12-30) with the following fixes for the user agent:
+  * Append text to Chrome/Edge user agent using `--chrome.appendToUserAgent`
+  * When you use Chrome/Edge and use a "emulated device" that will use the user agent that you provide using `--userAgent`. Else it will use the user agent from your emulated device setting.
+  * You can also use Edge to run emulated mobile with the same settings as Chrome.
 ## 21.2.2 - 2021-12-23
 ### Fixed
 * Fix the error introduced in 21.2.0 for "Include page summary URL in the result JSON"
@@ -10,7 +40,7 @@
 * It turns out that Firefox 95 doesn't work with the HAR export trigger and the workaround that worked in Firefox 94 seems to not work in 95 see https://github.com/sitespeedio/browsertime/issues/1671#issuecomment-999412035. That's why we are reverting to Firefox 94 in the Docker containers.
 ## 21.2.0 - 2021-12-22
 ### Fixed
-* The catching of errors in the queue was broken and reported the error x times (x=numbert of plugins). Also when we had an error the result JSON was not stored. [#3522](https://github.com/sitespeedio/sitespeed.io/pull/3522).
+* The catching of errors in the queue was broken and reported the error x times (x=number of plugins). Also when we had an error the result JSON was not stored. [#3522](https://github.com/sitespeedio/sitespeed.io/pull/3522).
 
 ### Added
 * Updated to Firefox 95 and Edge 96 in the Docker container.

package/Dockerfile

@@ -1,4 +1,4 @@
-FROM sitespeedio/webbrowsers:chrome-96.0-firefox-94.0-edge-95.0-dev
+FROM sitespeedio/webbrowsers:chrome-97.0-firefox-94.0-edge-97.0-b
 
 ENV SITESPEED_IO_BROWSERTIME__XVFB true
 ENV SITESPEED_IO_BROWSERTIME__DOCKER true

package/lib/cli/cli.js

@@ -113,6 +113,18 @@ function validateInput(argv) {
     return 'Error: You have a miss match between number of alias for groups and URLs.';
   }
 
+  if (
+    argv.browsertime.connectivity &&
+    argv.browsertime.connectivity.engine === 'humble'
+  ) {
+    if (
+      !argv.browsertime.connectivity.humble ||
+      !argv.browsertime.connectivity.humble.url
+    ) {
+      return 'You need to specify the URL to Humble by using the --browsertime.connectivity.humble.url option.';
+    }
+  }
+
   if (
     argv.browsertime.safari &&
     argv.browsertime.safari.useSimulator &&
@@ -291,12 +303,19 @@ module.exports.parseCommandLine = function parseCommandLine() {
     .option('browsertime.connectivity.engine', {
       alias: 'connectivity.engine',
       default: 'external',
-      choices: ['external', 'throttle', 'tsproxy'],
+      choices: ['external', 'throttle', 'tsproxy', 'humble'],
       describe:
-        'The engine for connectivity. Throttle works on Mac and tc based Linux. Use external if you set the connectivity outside of Browsertime. Use tsproxy if you are using Kubernetes. More documentation at https://www.sitespeed.io/documentation/sitespeed.io/connectivity/.',
+        'The engine for connectivity. Throttle works on Mac and tc based Linux. For mobile you can use Humble if you have a Humble setup. Use external if you set the connectivity outside of Browsertime. Use tsproxy if you are using Kubernetes. More documentation at https://www.sitespeed.io/documentation/sitespeed.io/connectivity/.',
       type: 'string',
       group: 'Browser'
     })
+    .option('browsertime.connectivity.humble.url', {
+      alias: 'connectivity.humble.url',
+      type: 'string',
+      describe:
+        'The path to your Humble instance. For example http://raspberrypi:3000',
+      group: 'Browser'
+    })
     .option('browsertime.pageCompleteCheck', {
       alias: 'pageCompleteCheck',
       describe:
@@ -372,6 +391,12 @@ module.exports.parseCommandLine = function parseCommandLine() {
         'The full User Agent string, defaults to the User Agent used by the browsertime.browser option.',
       group: 'Browser'
     })
+    .option('browsertime.appendToUserAgent', {
+      alias: 'appendToUserAgent',
+      describe:
+        'Append a String to the user agent. Works in Chrome/Edge and Firefox.',
+      group: 'Browser'
+    })
     .option('browsertime.preURL', {
       alias: 'preURL',
       describe:
@@ -715,6 +740,12 @@ module.exports.parseCommandLine = function parseCommandLine() {
       default: true,
       group: 'Chrome'
     })
+    .option('browsertime.chrome.appendToUserAgent', {
+      alias: 'chrome.appendToUserAgent',
+      type: 'string',
+      describe: 'Append to the user agent.',
+      group: 'Chrome'
+    })
     .option('browsertime.chrome.android.package', {
       alias: 'chrome.android.package',
       describe:

package/lib/plugins/browsertime/analyzer.js

@@ -100,7 +100,7 @@ module.exports = {
     // set mobile options
     if (options.mobile) {
       btOptions.viewPort = '360x640';
-      if (btOptions.browser === 'chrome') {
+      if (btOptions.browser === 'chrome' || btOptions.browser === 'edge') {
         const emulation = get(
           btOptions,
           'chrome.mobileEmulation.deviceName',
@@ -109,8 +109,9 @@ module.exports = {
         btOptions.chrome.mobileEmulation = {
           deviceName: emulation
         };
+      } else {
+        btOptions.userAgent = iphone6UserAgent;
       }
-      btOptions.userAgent = iphone6UserAgent;
     }
     const scriptCategories = await browserScripts.allScriptCategories;
     let scriptsByCategory = await browserScripts.getScriptsForCategories(

package/lib/plugins/crux/cli.js

@@ -4,6 +4,12 @@ module.exports = {
       'You need to use a key to get data from CrUx. Get the key from https://developers.google.com/web/tools/chrome-user-experience-report/api/guides/getting-started#APIKey',
     group: 'CrUx'
   },
+  enable: {
+    default: true,
+    describe:
+      'Enable the CrUx plugin. This is on by defauly but you also need the Crux key. If you chose to disable it with this key, set this to false and you can still use the CrUx key in your configuration.',
+    group: 'CrUx'
+  },
   formFactor: {
     default: 'ALL',
     type: 'string',

package/lib/plugins/crux/index.js

@@ -23,6 +23,12 @@ const DEFAULT_METRICS_SUMMARY = [
   'originLoadingExperience.*.CUMULATIVE_LAYOUT_SHIFT_SCORE.*'
 ];
 
+function wait(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+const CRUX_WAIT_TIME = 300;
+
 module.exports = {
   name() {
     return path.basename(__dirname);
@@ -30,159 +36,171 @@ module.exports = {
   open(context, options) {
     this.make = context.messageMaker('crux').make;
     this.options = merge({}, defaultConfig, options.crux);
-    this.testedOrigins = {};
-    throwIfMissing(options.crux, ['key'], 'crux');
-    this.formFactors = Array.isArray(this.options.formFactor)
-      ? this.options.formFactor
-      : [this.options.formFactor];
-    this.pug = fs.readFileSync(
-      path.resolve(__dirname, 'pug', 'index.pug'),
-      'utf8'
-    );
+    if (this.options.enable === true) {
+      this.testedOrigins = {};
+      throwIfMissing(options.crux, ['key'], 'crux');
+      this.formFactors = Array.isArray(this.options.formFactor)
+        ? this.options.formFactor
+        : [this.options.formFactor];
+      this.pug = fs.readFileSync(
+        path.resolve(__dirname, 'pug', 'index.pug'),
+        'utf8'
+      );
+
+      if (this.options.collect === 'ALL' || this.options.collect === 'URL') {
+        context.filterRegistry.registerFilterForType(
+          DEFAULT_METRICS_PAGESUMMARY,
+          'crux.pageSummary'
+        );
+      }
 
-    if (this.options.collect === 'ALL' || this.options.collect === 'URL') {
       context.filterRegistry.registerFilterForType(
-        DEFAULT_METRICS_PAGESUMMARY,
-        'crux.pageSummary'
+        DEFAULT_METRICS_SUMMARY,
+        'crux.summary'
       );
     }
-
-    context.filterRegistry.registerFilterForType(
-      DEFAULT_METRICS_SUMMARY,
-      'crux.summary'
-    );
   },
   async processMessage(message, queue) {
-    const make = this.make;
-    switch (message.type) {
-      case 'sitespeedio.setup': {
-        queue.postMessage(make('crux.setup'));
-        // Add the HTML pugs
-        queue.postMessage(
-          make('html.pug', {
-            id: 'crux',
-            name: 'CrUx',
-            pug: this.pug,
-            type: 'pageSummary'
-          })
-        );
-        queue.postMessage(
-          make('html.pug', {
-            id: 'crux',
-            name: 'CrUx',
-            pug: this.pug,
-            type: 'run'
-          })
-        );
-        break;
-      }
-      case 'url': {
-        let url = message.url;
-        let group = message.group;
-        const originResult = { originLoadingExperience: {} };
-        if (
-          !this.testedOrigins[group] &&
-          (this.options.collect === 'ALL' || this.options.collect === 'ORIGIN')
-        ) {
-          this.testedOrigins[group] = true;
-          log.info(`Get CrUx data for domain ${group}`);
-          for (let formFactor of this.formFactors) {
-            originResult.originLoadingExperience[formFactor] = await send.get(
-              url,
-              this.options.key,
-              formFactor,
-              false
-            );
-
-            if (originResult.originLoadingExperience[formFactor].error) {
-              log.info(
-                `${originResult.originLoadingExperience[formFactor].error.message} for domain ${url} using ${formFactor}`
+    if (this.options.enable === true) {
+      const make = this.make;
+      switch (message.type) {
+        case 'sitespeedio.setup': {
+          queue.postMessage(make('crux.setup'));
+          // Add the HTML pugs
+          queue.postMessage(
+            make('html.pug', {
+              id: 'crux',
+              name: 'CrUx',
+              pug: this.pug,
+              type: 'pageSummary'
+            })
+          );
+          queue.postMessage(
+            make('html.pug', {
+              id: 'crux',
+              name: 'CrUx',
+              pug: this.pug,
+              type: 'run'
+            })
+          );
+          break;
+        }
+        case 'url': {
+          let url = message.url;
+          let group = message.group;
+          const originResult = { originLoadingExperience: {} };
+          if (
+            !this.testedOrigins[group] &&
+            (this.options.collect === 'ALL' ||
+              this.options.collect === 'ORIGIN')
+          ) {
+            this.testedOrigins[group] = true;
+            log.info(`Get CrUx data for domain ${group}`);
+            for (let formFactor of this.formFactors) {
+              originResult.originLoadingExperience[formFactor] = await send.get(
+                url,
+                this.options.key,
+                formFactor,
+                false
               );
 
-              queue.postMessage(
-                make(
-                  'error',
-                  `${originResult.originLoadingExperience[formFactor].error.message} for domain ${url} using ${formFactor}`,
-                  {
-                    url
-                  }
-                )
-              );
-            } else {
-              try {
-                originResult.originLoadingExperience[formFactor] = repackage(
-                  originResult.originLoadingExperience[formFactor]
+              if (originResult.originLoadingExperience[formFactor].error) {
+                log.info(
+                  `${originResult.originLoadingExperience[formFactor].error.message} for domain ${url} using ${formFactor}`
                 );
-              } catch (e) {
-                log.error(
-                  'Could not repackage the JSON for origin from CrUx, is it broken? %j',
-                  originResult.originLoadingExperience[formFactor]
+
+                queue.postMessage(
+                  make(
+                    'error',
+                    `${originResult.originLoadingExperience[formFactor].error.message} for domain ${url} using ${formFactor}`,
+                    {
+                      url
+                    }
+                  )
                 );
+              } else {
+                try {
+                  originResult.originLoadingExperience[formFactor] = repackage(
+                    originResult.originLoadingExperience[formFactor]
+                  );
+                } catch (e) {
+                  log.error(
+                    'Could not repackage the JSON for origin from CrUx, is it broken? %j',
+                    originResult.originLoadingExperience[formFactor]
+                  );
+                }
               }
+              await wait(CRUX_WAIT_TIME);
             }
+            queue.postMessage(make('crux.summary', originResult, { group }));
           }
-          queue.postMessage(make('crux.summary', originResult, { group }));
-        }
-
-        if (this.options.collect === 'ALL' || this.options.collect === 'URL') {
-          log.info(`Get CrUx data for url ${url}`);
-          const urlResult = { loadingExperience: {} };
-          for (let formFactor of this.formFactors) {
-            urlResult.loadingExperience[formFactor] = await send.get(
-              url,
-              this.options.key,
-              formFactor,
-              true
-            );
 
-            if (urlResult.loadingExperience[formFactor].error) {
-              log.info(
-                `${urlResult.loadingExperience[formFactor].error.message} for ${url} using ${formFactor}`
+          if (
+            this.options.collect === 'ALL' ||
+            this.options.collect === 'URL'
+          ) {
+            log.info(`Get CrUx data for url ${url}`);
+            const urlResult = { loadingExperience: {} };
+            for (let formFactor of this.formFactors) {
+              urlResult.loadingExperience[formFactor] = await send.get(
+                url,
+                this.options.key,
+                formFactor,
+                true
               );
 
-              queue.postMessage(
-                make(
-                  'error',
-                  `${urlResult.loadingExperience[formFactor].error.message} for ${url} using ${formFactor}`,
-                  {
-                    url
-                  }
-                )
-              );
-            } else {
-              try {
-                urlResult.loadingExperience[formFactor] = repackage(
-                  urlResult.loadingExperience[formFactor]
+              if (urlResult.loadingExperience[formFactor].error) {
+                log.info(
+                  `${urlResult.loadingExperience[formFactor].error.message} for ${url} using ${formFactor}`
                 );
-              } catch (e) {
-                log.error(
-                  'Could not repackage the JSON from CrUx, is it broken? %j',
-                  urlResult.loadingExperience[formFactor]
+
+                queue.postMessage(
+                  make(
+                    'error',
+                    `${urlResult.loadingExperience[formFactor].error.message} for ${url} using ${formFactor}`,
+                    {
+                      url
+                    }
+                  )
                 );
+              } else {
+                try {
+                  urlResult.loadingExperience[formFactor] = repackage(
+                    urlResult.loadingExperience[formFactor]
+                  );
+                } catch (e) {
+                  log.error(
+                    'Could not repackage the JSON from CrUx, is it broken? %j',
+                    urlResult.loadingExperience[formFactor]
+                  );
+                }
               }
+              await wait(CRUX_WAIT_TIME);
             }
-          }
-          // Attach origin result so we can show it in the HTML
-          urlResult.originLoadingExperience =
-            originResult.originLoadingExperience;
+            // Attach origin result so we can show it in the HTML
+            urlResult.originLoadingExperience =
+              originResult.originLoadingExperience;
 
-          queue.postMessage(
-            make('crux.pageSummary', urlResult, {
-              url,
-              group
-            })
-          );
-        } else {
-          queue.postMessage(
-            make(
-              'crux.pageSummary',
-              { originLoadingExperience: originResult.originLoadingExperience },
-              {
+            queue.postMessage(
+              make('crux.pageSummary', urlResult, {
                 url,
                 group
-              }
-            )
-          );
+              })
+            );
+          } else {
+            queue.postMessage(
+              make(
+                'crux.pageSummary',
+                {
+                  originLoadingExperience: originResult.originLoadingExperience
+                },
+                {
+                  url,
+                  group
+                }
+              )
+            );
+          }
         }
       }
     }

package/lib/plugins/crux/pug/index.pug

@@ -11,7 +11,7 @@ mixin sizeCell(title, size)
   td.number(data-title=title, data-value= size)= h.size.format(size)
 
 - const crux = pageInfo.data.crux.pageSummary;
-- const metrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift'}; 
+- const metrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)'}; 
 - const experiences = ['loadingExperience','originLoadingExperience'];
 
 small 
@@ -25,6 +25,10 @@ a#crux
 h2 CrUx
 p.small Chrome User Experience Report (CrUx) is powered by real user measurement across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled and is using Chrome.
 
+p.small The CrUx data has four different buckets (form factor) depending on device: DESKTOP, PHONE, TABLET and ALL. You can choose which data to get with 
+  code --crux.formFactor
+  | .
+
 each experience in experiences
   if experience === 'loadingExperience' && crux[experience]
     p Over the last 30 days, this is the field data for this page for Chrome users.
@@ -47,29 +51,57 @@ each experience in experiences
               if crux[experience][formFactor].data.record.metrics[key]
                 tr
                   td #{name} 75 percentile
-                  td #{crux[experience][formFactor].data.record.metrics[key].percentiles.p75} #{key.indexOf('cumulative') > -1 ? '': 'ms'}
+                  td #{key.indexOf('cumulative') > -1 ? crux[experience][formFactor].data.record.metrics[key].percentiles.p75 :  h.time.ms(crux[experience][formFactor].data.record.metrics[key].percentiles.p75)} 
         
         h4 Distribution
-        table
-          each name, key in metrics
-            if crux[experience][formFactor].data.record.metrics[key] && crux[experience][formFactor].data.record.metrics[key].histogram
-              tr
-                th #{name}
-                th Min
-                th Max
-                th Users
-              tr
-                td Fast
-                td #{crux[experience][formFactor].data.record.metrics[key].histogram[0].start}
-                td #{crux[experience][formFactor].data.record.metrics[key].histogram[0].end}
-                td #{Number(crux[experience][formFactor].data.record.metrics[key].histogram[0].density * 100).toFixed(2)} %
-              tr
-                td Moderate
-                td #{crux[experience][formFactor].data.record.metrics[key].histogram[1].start}
-                td #{crux[experience][formFactor].data.record.metrics[key].histogram[1].end}
-                td #{Number(crux[experience][formFactor].data.record.metrics[key].histogram[1].density * 100).toFixed(2)} %
-              tr
-                td Slow
-                td #{crux[experience][formFactor].data.record.metrics[key].histogram[2].start}
-                td #{crux[experience][formFactor].data.record.metrics[key].histogram[2].end}
-                td #{Number(crux[experience][formFactor].data.record.metrics[key].histogram[2].density * 100).toFixed(2)} %
+        - let cruxus = `${experience}.${formFactor}.data.record.metrics`;
+        - let FCPs = [Number(get(crux, `${cruxus}.first_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)];
+
+        - let LCPs = [Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)];
+
+        - let FIDs = [Number(get(crux, `${cruxus}.first_input_delay.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.histogram[2].density`, 0)*100).toFixed(2)];
+
+        - let CLSs = [Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[2].density`, 0)*100).toFixed(2)];
+
+        script(type='text/javascript').
+          document.addEventListener("DOMContentLoaded", function() {   
+
+                function drawPie(id, series, labels) {
+                  new Chartist.Pie(id, {
+                    series,
+                    labels,
+                  }, {
+                    showLabel: false,
+                    plugins: [
+                      Chartist.plugins.legend(
+                         { clickable: false,
+                          position: 'bottom'
+                        }
+                      )
+                  ]
+                  });
+                }     
+
+                drawPie('#chartFCP#{experience + formFactor}', [#{FCPs}], ['Fast: #{FCPs[0]}%', 'Moderate #{FCPs[1]}%', 'Slow: #{FCPs[2]}%']);
+                drawPie('#chartLCP#{experience + formFactor}', [#{LCPs}], ['Fast: #{LCPs[0]}%', 'Moderate #{LCPs[1]}%', 'Slow: #{LCPs[2]}%']);
+                drawPie('#chartFID#{experience + formFactor}', [#{FIDs}], ['Fast: #{FIDs[0]}%', 'Moderate #{FIDs[1]}%', 'Slow: #{FIDs[2]}%']);
+                drawPie('#chartCLS#{experience + formFactor}', [#{CLSs}], ['Good: #{CLSs[0]}%', 'Need improvement: #{CLSs[1]}%', 'Poor: #{CLSs[2]}%']);
+
+
+          });
+        .responsive  
+          table
+            tr 
+              th #{metrics['first_contentful_paint']}
+              th #{metrics['largest_contentful_paint']}
+              th #{metrics['first_input_delay']} 
+              th #{metrics['cumulative_layout_shift']}
+            tr 
+              td(data-title=metrics['first_contentful_paint'])  
+                .ct-chart(id='chartFCP' + experience + formFactor)
+              td(data-title=metrics['largest_contentful_paint']) 
+                .ct-chart(id='chartLCP' + experience + formFactor)
+              td(data-title=metrics['first_input_delay']) 
+                .ct-chart(id='chartFID' + experience + formFactor)
+              td(data-title=metrics['cumulative_layout_shift']) 
+                .ct-chart(id='chartCLS' + experience + formFactor)