From 55fb15bd9ada8eb3334fa54329b16c48e55291e1 Mon Sep 17 00:00:00 2001 From: soulgalore Date: Thu, 22 Jun 2023 12:16:23 +0200 Subject: [PATCH] Cleanup to fix the pug missing metrics. --- lib/plugins/html/templates/url/cpu/index.pug | 329 +++++++++--------- .../html/templates/url/metrics/index.pug | 54 +-- .../templates/url/metrics/visualProgress.pug | 2 +- .../html/templates/url/summary/index.pug | 2 +- .../html/templates/url/summary/summaryBox.pug | 23 +- 5 files changed, 208 insertions(+), 202 deletions(-) diff --git a/lib/plugins/html/templates/url/cpu/index.pug b/lib/plugins/html/templates/url/cpu/index.pug index e4c761e262..aaa43703ce 100644 --- a/lib/plugins/html/templates/url/cpu/index.pug +++ b/lib/plugins/html/templates/url/cpu/index.pug @@ -1,186 +1,189 @@ - const browsertime = medianRun ? (pageInfo.data.browsertime ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1]: undefined) : pageInfo.data.browsertime.run -small - || - if browsertime && browsertime.cpu && browsertime.cpu.longTasks - a(href='#long-tasks') CPU Long Tasks - |  |  - if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined - a(href='#first-input-delay') First Input Delay - |  |  - if browsertime && browsertime.cpu && browsertime.cpu.categories - a(href='#cpu-time-spent') CPU Time Spent - |  |  - if browsertime && browsertime.cpu && browsertime.cpu.urls && browsertime.cpu.urls.length > 0 - a(href='#cpu-time-spent-per-request') CPU Time Spent Per Request - |  |  - if pageInfo.data.thirdparty - a(href='#cpu-time-per-tool') CPU Time Per Tool/Domain - |  |  +- const cpu = medianRun ? (pageInfo.data.browsertime ? pageInfo.data.browsertime.pageSummary.cpu[medianRun.runIndex - 1]: undefined) : pageInfo.data.browsertime.run.cpu -a#cpu -h2 CPU +if cpu + small + || + if cpu.longTasks + a(href='#long-tasks') CPU Long Tasks + |  |  + if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined + a(href='#first-input-delay') First Input Delay + |  |  + if cpu.categories + a(href='#cpu-time-spent') CPU Time Spent + |  |  + if cpu.urls && cpu.urls.length > 0 + a(href='#cpu-time-spent-per-request') CPU Time Spent Per Request + |  |  + if pageInfo.data.thirdparty + a(href='#cpu-time-per-tool') CPU Time Per Tool/Domain + |  |  -if browsertime && browsertime.cpu && browsertime.cpu.events && !options.browsertime.enableProfileRun - p Download the Chrome trace log and drag and drop it into Developer Tools / Performance in Chrome. - .downloads - if options.browsertime.chrome && options.browsertime.chrome.timeline - - const tracePath = 'data/trace-' + (runNumber? runNumber : 1) + '.json.gz' - a.button.button-download(href=tracePath, download=downloadName + '-timeline.json.gz') Download trace log + a#cpu + h2 CPU -if options.browsertime && options.browsertime.firefox && options.browsertime.firefox.geckoProfiler && options.browser === 'firefox' && !options.browsertime.enableProfileRun - p Download the Firefox Geckoprofiler trace and drag and drop it into - a(href='https://profiler.firefox.com') https://profiler.firefox.com - .downloads - - const tracePath = 'data/geckoProfile-' + (runNumber? runNumber : 1) + '.json.gz' - a.button.button-download(href=tracePath, download=downloadName + '-geckoProfile.json.gz') Download trace + if cpu.events && !options.browsertime.enableProfileRun + p Download the Chrome trace log and drag and drop it into Developer Tools / Performance in Chrome. + .downloads + if options.browsertime.chrome && options.browsertime.chrome.timeline + - const tracePath = 'data/trace-' + (runNumber? runNumber : 1) + '.json.gz' + a.button.button-download(href=tracePath, download=downloadName + '-timeline.json.gz') Download trace log -if options.browsertime && options.browsertime.enableProfileRun - if options.browser === 'firefox' + if options.browsertime && options.browsertime.firefox && options.browsertime.firefox.geckoProfiler && options.browser === 'firefox' && !options.browsertime.enableProfileRun p Download the Firefox Geckoprofiler trace and drag and drop it into - a(href='https://profiler.firefox.com') https://profiler.firefox.com + a(href='https://profiler.firefox.com') https://profiler.firefox.com .downloads - - const tracePath = 'data/geckoProfile-1-extra.json.gz' - a.button.button-download(href=tracePath, download=downloadName + '-geckoProfile.json.gz') Download extra run trace log - else if options.browser === 'chrome' - p Download the Chrome trace log and drag and drop it into Developer Tools / Performance in Chrome. - - const tracePath = 'data/trace-1-extra-run.json.gz' - a.button.button-download(href=tracePath, download=downloadName + '-timeline.json.gz') Download extra run trace log + - const tracePath = 'data/geckoProfile-' + (runNumber? runNumber : 1) + '.json.gz' + a.button.button-download(href=tracePath, download=downloadName + '-geckoProfile.json.gz') Download trace -if browsertime && browsertime.cpu && browsertime.cpu.longTasks - a#long-tasks - h3 Long Tasks - p Collected using the Long Task API. A long task is a task that take 50 milliseconds or more. - if browsertime.cpu.longTasks.tasks > 0 - table - tr - th Type - th Quantity - th Total duration (ms) - tr - td Total Blocking Time - td - td #{browsertime.cpu.longTasks.totalBlockingTime} - tr - td Max Potential First Input Delay - td - td #{browsertime.cpu.longTasks.maxPotentialFid} + if options.browsertime && options.browsertime.enableProfileRun + if options.browser === 'firefox' + p Download the Firefox Geckoprofiler trace and drag and drop it into + a(href='https://profiler.firefox.com') https://profiler.firefox.com + .downloads + - const tracePath = 'data/geckoProfile-1-extra.json.gz' + a.button.button-download(href=tracePath, download=downloadName + '-geckoProfile.json.gz') Download extra run trace log + else if options.browser === 'chrome' + p Download the Chrome trace log and drag and drop it into Developer Tools / Performance in Chrome. + - const tracePath = 'data/trace-1-extra-run.json.gz' + a.button.button-download(href=tracePath, download=downloadName + '-timeline.json.gz') Download extra run trace log - tr - td Long Tasks before First Paint - td #{browsertime.cpu.longTasks.beforeFirstPaint.tasks} - td #{browsertime.cpu.longTasks.beforeFirstPaint.totalDuration.toFixed(0)} - tr - td Long Tasks before First Contentful Paint - td #{browsertime.cpu.longTasks.beforeFirstContentfulPaint.tasks} - td #{browsertime.cpu.longTasks.beforeFirstContentfulPaint.totalDuration.toFixed(0)} - tr - td Long Tasks before Largest Contentful Paint - td #{browsertime.cpu.longTasks.beforeLargestContentfulPaint.tasks} - td #{browsertime.cpu.longTasks.beforeLargestContentfulPaint.totalDuration.toFixed(0)} - tr - td Long Tasks after Load Event End - td #{browsertime.cpu.longTasks.afterLoadEventEnd.tasks} - td #{browsertime.cpu.longTasks.afterLoadEventEnd.totalDuration.toFixed(0)} - tr - td Total Long Tasks - td #{browsertime.cpu.longTasks.tasks} - td #{browsertime.cpu.longTasks.totalDuration.toFixed(0)} - p CPU last long task happened at #{h.time.ms(browsertime.cpu.longTasks.lastLongTask)} - h4 Individual Long Tasks - table - tr - th name - th startTime - th duration - th containerId - th containerName - th containerSrc - th containerType - - each task in browsertime.pageinfo.longTask + if cpu.longTasks + a#long-tasks + h3 Long Tasks + p Collected using the Long Task API. A long task is a task that take 50 milliseconds or more. + if cpu.longTasks.tasks > 0 + table tr - td #{task.name} - td #{task.startTime.toFixed(0)} - td #{task.duration.toFixed(0)} - td #{task.attribution[0].containerId} - td #{task.attribution[0].containerName} - td.url.assetsurl #{task.attribution[0].containerSrc} - td #{task.attribution[0].containerType} - else - p No long tasks on the page! - -if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined - a#first-input-delay - h3 First Input Delay - table - tr - th Name - th Delay - th Duration - th Start Time - th Processing Start - th Processing End - tr - td #{browsertime.timings.firstInput.name} - td #{h.time.ms(browsertime.timings.firstInput.delay)} - td #{h.time.ms(browsertime.timings.firstInput.duration)} - td #{h.time.ms(browsertime.timings.firstInput.startTime)} - td #{h.time.ms(browsertime.timings.firstInput.processingStart)} - td #{h.time.ms(browsertime.timings.firstInput.processingEnd)} - -if browsertime && browsertime.cpu && browsertime.cpu.categories - a#cpu-time-spent - h3 CPU time spent - p Calculated using Tracium. + th Type + th Quantity + th Total duration (ms) + tr + td Total Blocking Time + td + td #{cpu.longTasks.totalBlockingTime} + tr + td Max Potential First Input Delay + td + td #{cpu.longTasks.maxPotentialFid} - .row - .one-half.column - if browsertime && browsertime.cpu && browsertime.cpu.categories - table tr - th(colspan='2') Categories (ms) - each value, name in browsertime.cpu.categories - tr - td #{name} - td #{value.toFixed(0)} - .one-half.column - if browsertime && browsertime.cpu && browsertime.cpu.events + td Long Tasks before First Paint + td #{cpu.longTasks.beforeFirstPaint.tasks} + td #{cpu.longTasks.beforeFirstPaint.totalDuration.toFixed(0)} + tr + td Long Tasks before First Contentful Paint + td #{cpu.longTasks.beforeFirstContentfulPaint.tasks} + td #{cpu.longTasks.beforeFirstContentfulPaint.totalDuration.toFixed(0)} + tr + td Long Tasks before Largest Contentful Paint + td #{cpu.longTasks.beforeLargestContentfulPaint.tasks} + td #{cpu.longTasks.beforeLargestContentfulPaint.totalDuration.toFixed(0)} + tr + td Long Tasks after Load Event End + td #{cpu.longTasks.afterLoadEventEnd.tasks} + td #{cpu.longTasks.afterLoadEventEnd.totalDuration.toFixed(0)} + tr + td Total Long Tasks + td #{cpu.longTasks.tasks} + td #{cpu.longTasks.totalDuration.toFixed(0)} + p CPU last long task happened at #{h.time.ms(cpu.longTasks.lastLongTask)} + h4 Individual Long Tasks table tr - th(colspan='2') Events (ms) - - const cpuEvents = [] - - for (let key of Object.keys(browsertime.cpu.events)) {cpuEvents.push({name: key, value: browsertime.cpu.events[key] })} - - cpuEvents.sort((a,b)=>{return b.value - a.value}) - each event in cpuEvents + th name + th startTime + th duration + th containerId + th containerName + th containerSrc + th containerType + + each task in browsertime.pageinfo.longTask tr - td #{event.name} - td #{event.value.toFixed(0)} + td #{task.name} + td #{task.startTime.toFixed(0)} + td #{task.duration.toFixed(0)} + td #{task.attribution[0].containerId} + td #{task.attribution[0].containerName} + td.url.assetsurl #{task.attribution[0].containerSrc} + td #{task.attribution[0].containerType} + else + p No long tasks on the page! - if browsertime && browsertime.cpu && browsertime.cpu.urls && browsertime.cpu.urls.length > 0 - a#cpu-time-spent-per-request - h3 Time spent per request + if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined + a#first-input-delay + h3 First Input Delay table tr - th URL - th CPU time (ms) - each data in browsertime.cpu.urls - tr - td.url.assetsurl - a(href=data.url)= data.url - td #{data.value.toFixed(0)} + th Name + th Delay + th Duration + th Start Time + th Processing Start + th Processing End + tr + td #{browsertime.timings.firstInput.name} + td #{h.time.ms(browsertime.timings.firstInput.delay)} + td #{h.time.ms(browsertime.timings.firstInput.duration)} + td #{h.time.ms(browsertime.timings.firstInput.startTime)} + td #{h.time.ms(browsertime.timings.firstInput.processingStart)} + td #{h.time.ms(browsertime.timings.firstInput.processingEnd)} + + if cpu.categories + a#cpu-time-spent + h3 CPU time spent + p Calculated using Tracium. - if pageInfo.data.thirdparty - - const thirdparty = medianRun ? pageInfo.data.thirdparty.pageSummary.runs[medianRun.runIndex - 1] : pageInfo.data.thirdparty.run + .row + .one-half.column + if cpu.categories + table + tr + th(colspan='2') Categories (ms) + each value, name in cpu.categories + tr + td #{name} + td #{value.toFixed(0)} + .one-half.column + if cpu.events + table + tr + th(colspan='2') Events (ms) + - const cpuEvents = [] + - for (let key of Object.keys(cpu.events)) {cpuEvents.push({name: key, value: cpu.events[key] })} + - cpuEvents.sort((a,b)=>{return b.value - a.value}) + each event in cpuEvents + tr + td #{event.name} + td #{event.value.toFixed(0)} - if thirdparty && thirdparty.cpuPerTool && Object.keys(thirdparty.cpuPerTool).length > 0 - a#cpu-time-per-tool - h3 CPU time spent + if cpu.urls && cpu.urls.length > 0 + a#cpu-time-spent-per-request + h3 Time spent per request table tr - th Tool/domain - th Time (ms) - each tool in Object.keys(thirdparty.cpuPerTool) - tr - td #{tool} - td.number #{thirdparty.cpuPerTool[tool].toFixed(1)} + th URL + th CPU time (ms) + each data in cpu.urls + tr + td.url.assetsurl + a(href=data.url)= data.url + td #{data.value.toFixed(0)} + + if pageInfo.data.thirdparty + - const thirdparty = medianRun ? pageInfo.data.thirdparty.pageSummary.runs[medianRun.runIndex - 1] : pageInfo.data.thirdparty.run + + if thirdparty && thirdparty.cpuPerTool && Object.keys(thirdparty.cpuPerTool).length > 0 + a#cpu-time-per-tool + h3 CPU time spent + table + tr + th Tool/domain + th Time (ms) + each tool in Object.keys(thirdparty.cpuPerTool) + tr + td #{tool} + td.number #{thirdparty.cpuPerTool[tool].toFixed(1)} diff --git a/lib/plugins/html/templates/url/metrics/index.pug b/lib/plugins/html/templates/url/metrics/index.pug index c705c9f9cd..07d0903b36 100644 --- a/lib/plugins/html/templates/url/metrics/index.pug +++ b/lib/plugins/html/templates/url/metrics/index.pug @@ -1,8 +1,15 @@ - const browsertime = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1] : pageInfo.data.browsertime.run if browsertime - - const timings = browsertime.timings; - - const visualMetrics = browsertime.visualMetrics; + - const timings = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1].timings : pageInfo.data.browsertime.run.timings + - const visualMetrics = medianRun ? pageInfo.data.browsertime.pageSummary.visualMetrics[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.visualMetrics + - const googleWebVitals = medianRun ? pageInfo.data.browsertime.pageSummary.googleWebVitals[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.googleWebVitals + - const cpu = medianRun ? pageInfo.data.browsertime.pageSummary.cpu[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.cpu + - const fullyLoaded = medianRun ? pageInfo.data.browsertime.pageSummary.fullyLoaded[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.fullyLoaded + - const extras = medianRun ? pageInfo.data.browsertime.pageSummary.extras[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.extras + - const custom = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1].custom : pageInfo.data.browsertime.run.custom + - const cdp = medianRun ? pageInfo.data.browsertime.pageSummary.cdp[medianRun.runIndex - 1] : pageInfo.data.browsertime.run.cdp + small | | a(href='#browsermetrics') Browser metrics @@ -19,22 +26,22 @@ if browsertime if timings.interactionToNextPaint a(href='#interactionToNextPaint') Interaction To Next Paint |  |  - if browsertime.timings.elementTimings && Object.keys(browsertime.timings.elementTimings).length > 0 + if timings.elementTimings && Object.keys(timings.elementTimings).length > 0 a(href='#elementTimings') Element Timings |  |  - if browsertime.custom + if custom a(href='#custom-scripts') Custom scripts |  |  - if browsertime.extras && Object.keys(browsertime.extras).length > 0 + if extras && Object.keys(extras).length > 0 a(href='#extra-metrics') Extra metrics |  |  if options.browsertime.visualElements a(href='#visual-elements') Visual Elements |  |  - if browsertime.timings.firstInput !== undefined + if timings.firstInput !== undefined a(href='#firstInput') First Input Delay |  |  - if browsertime.cdp && browsertime.cdp.performance + if cdp a(href='#cdp-performance') Metrics from CDP |  |  if timings.serverTimings && timings.serverTimings.length > 0 @@ -136,7 +143,7 @@ if browsertime a(href=url) #{name} td.number #{h.time.ms(value)} .one-half.column - if (browsertime.googleWebVitals) + if (googleWebVitals) table tr th(colspan='2') Google Web Vitals @@ -165,16 +172,16 @@ if browsertime td a(href='#interactionToNextPaint') Interaction to next paint (INP) td.number #{h.time.ms(timings.interactionToNextPaint)} - if browsertime.timings.firstInput !== undefined + if timings.firstInput !== undefined tr td a(href=baseHelpURL + 'firstInputDelay') First Input Delay (FID) - td.number #{h.time.ms(browsertime.timings.firstInput.delay)} + td.number #{h.time.ms(timings.firstInput.delay)} else tr td a(href=baseHelpURL + 'totalBlockingTime') Total Blocking Time (TBT) - td.number #{h.time.ms(browsertime.cpu.longTasks.totalBlockingTime)} + td.number #{h.time.ms(cpu.longTasks.totalBlockingTime)} table tr th(colspan='2') Extra timings @@ -185,7 +192,7 @@ if browsertime if (timings.paintTiming && Object.keys(timings.paintTiming).length > 0) - const paintTimingHelper = { "first-contentful-paint": {"name": 'First Contentful Paint (FCP)', "friendly": "first-contentful-paint"}, "first-paint": {"name": 'First Paint', "friendly": "firstPaint" }}; each value, name in timings.paintTiming - if name === 'first-contentful-paint' && browsertime.googleWebVitals + if name === 'first-contentful-paint' && googleWebVitals // do nada else tr @@ -212,7 +219,7 @@ if browsertime td a(href=baseHelpURL + 'timeToFirstInteractive') Time To First Interactive td.number #{h.time.ms(timings.timeToFirstInteractive.toFixed(0))} - if (!browsertime.googleWebVitals && timings.largestContentfulPaint) + if (!googleWebVitals && timings.largestContentfulPaint) tr td a(href=baseHelpURL + 'largestContentfulPaint') Largest Contentful Paint (LCP) @@ -221,16 +228,11 @@ if browsertime td a(href=baseHelpURL + 'loadEventEnd') Load Event End td.number #{h.time.ms(timings.loadEventEnd.toFixed(0))} - if (timings.fullyLoaded) - tr - td - a(href=baseHelpURL + 'fullyLoaded') Fully loaded - td.number #{h.time.ms(timings.fullyLoaded.toFixed(0))} - else if (browsertime.fullyLoaded) + if (fullyLoaded) tr td a(href=baseHelpURL + 'fullyLoaded') Fully loaded - td.number #{h.time.ms(browsertime.fullyLoaded.toFixed(0))} + td.number #{h.time.ms(fullyLoaded.toFixed(0))} if (Object.keys(timings.userTimings.marks).length > 0) table tr @@ -262,12 +264,12 @@ if browsertime a#custom-scripts h3 Custom metrics collected through JavaScript - if browsertime.custom + if custom table tr th name th value - each value, name in browsertime.custom + each value, name in custom tr td #{name} td #{value} @@ -276,26 +278,26 @@ if browsertime a#extra-metrics h3 Extra metrics collected using scripting - if browsertime.extras && Object.keys(browsertime.extras).length > 0 + if extras && Object.keys(extras).length > 0 table tr th name th value - each value, name in browsertime.extras + each value, name in extras tr td #{name} td #{value} else p There are no custom extra metrics from scripting. - if browsertime.cdp && browsertime.cdp.performance + if cdp && cdp.performance a#cdp-performance h3 CDP Performance table tr th name th value - each value, name in browsertime.cdp.performance + each value, name in cdp.performance tr td #{name} td #{value.toFixed(0)} diff --git a/lib/plugins/html/templates/url/metrics/visualProgress.pug b/lib/plugins/html/templates/url/metrics/visualProgress.pug index d29899c606..f1270cb87e 100644 --- a/lib/plugins/html/templates/url/metrics/visualProgress.pug +++ b/lib/plugins/html/templates/url/metrics/visualProgress.pug @@ -1,7 +1,7 @@ - const seriesVisualProgress = []; - let oldPercent = -1; - let oldValue = -1; -each eachRow in browsertime.visualMetrics.VisualProgress +each eachRow in visualMetrics.VisualProgress - const newValue = eachRow.timestamp - const percent = eachRow.percent //- Sometimes VisualMetrics report the same percentage multiple times after each other diff --git a/lib/plugins/html/templates/url/summary/index.pug b/lib/plugins/html/templates/url/summary/index.pug index d7a76f7ea0..32a7b94156 100644 --- a/lib/plugins/html/templates/url/summary/index.pug +++ b/lib/plugins/html/templates/url/summary/index.pug @@ -292,7 +292,7 @@ block content section#pagexray-panel include ../pagexray/index.pug - if options.cpu || options.browsertime && options.browsertime.chrome && options.browsertime.chrome.collectLongTasks || (options.browsertime && options.browsertime.firefox && options.browsertime.firefox.geckoProfiler || options.browsertime &&options.browsertime.enableProfileRun) + if options.cpu || options.browsertime && options.browsertime.chrome && options.browsertime.chrome.collectLongTasks || (options.browsertime && options.browsertime.firefox && options.browsertime.firefox.geckoProfiler || options.browsertime && options.browsertime.enableProfileRun) section#cpu-panel include ../cpu/index.pug diff --git a/lib/plugins/html/templates/url/summary/summaryBox.pug b/lib/plugins/html/templates/url/summary/summaryBox.pug index 39d46c62d8..081c04b3bd 100644 --- a/lib/plugins/html/templates/url/summary/summaryBox.pug +++ b/lib/plugins/html/templates/url/summary/summaryBox.pug @@ -66,15 +66,16 @@ if btStatistics +getRow(name, pageInfo, 'data.browsertime.pageSummary.statistics.visualMetrics.' + name, pageInfo.data.browsertime.pageSummary.visualMetrics, name, h.time.ms) if btStatistics.timings && btStatistics.timings.pageTimings tr - td.extraheader(colspan='5') RUM Metrics - +getRow('TTFB', pageInfo, 'data.browsertime.pageSummary.statistics.timings.pageTimings.backEndTime' , pageInfo.data.browsertime.pageSummary.browserScripts, 'timings.pageTimings.backEndTime', h.time.ms) - +getRow('LCP', pageInfo, 'data.browsertime.pageSummary.statistics.timings.largestContentfulPaint.renderTime' , pageInfo.data.browsertime.pageSummary.browserScripts, 'timings.largestContentfulPaint.renderTime', h.time.ms) - +getRow('FCP', pageInfo, 'data.browsertime.pageSummary.statistics.timings.paintTiming["first-contentful-paint"]', pageInfo.data.browsertime.pageSummary.browserScripts, 'timings.paintTiming["first-contentful-paint"]', h.time.ms) + td.extraheader(colspan='5') Google Web Vitals + +getRow('Time To First Byte (TTFB)', pageInfo, 'data.browsertime.pageSummary.statistics.timings.pageTimings.backEndTime' , pageInfo.data.browsertime.pageSummary.browserScripts, 'timings.pageTimings.backEndTime', h.time.ms) + +getRow('Largest Contentful Paint (LCP)', pageInfo, 'data.browsertime.pageSummary.statistics.timings.largestContentfulPaint.renderTime' , pageInfo.data.browsertime.pageSummary.browserScripts, 'timings.largestContentfulPaint.renderTime', h.time.ms) + +getRow('First Contentful Paint (FCP)', pageInfo, 'data.browsertime.pageSummary.statistics.timings.paintTiming["first-contentful-paint"]', pageInfo.data.browsertime.pageSummary.browserScripts, 'timings.paintTiming["first-contentful-paint"]', h.time.ms) + +getRow('Cumulative Layout Shift (CLS)', pageInfo, 'data.browsertime.pageSummary.statistics.pageinfo.cumulativeLayoutShift' , pageInfo.data.browsertime.pageSummary.browserScripts, 'pageinfo.cumulativeLayoutShift', h.noop) + tr + td.extraheader(colspan='5') More metrics 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.cumulativeLayoutShift' , pageInfo.data.browsertime.pageSummary.browserScripts, 'pageinfo.cumulativeLayoutShift', h.noop) - if btStatistics.timings && btStatistics.timings.userTimings && btStatistics.timings.userTimings.marks tr td.extraheader(colspan='5') User Timing @@ -88,8 +89,8 @@ if btStatistics if btStatistics.cpu && btStatistics.cpu.longTasks tr td.extraheader(colspan='5') CPU - +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 last long task happens at', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.lastLongTask' , pageInfo.data.browsertime.pageSummary.browserScripts, 'cpu.longTasks.lastLongTask', h.time.ms) + +getRow('Total Blocking Time', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime' , pageInfo.data.browsertime.pageSummary.cpu, 'longTasks.totalBlockingTime', h.time.ms) + +getRow('Max Potential FID', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.maxPotentialFid', pageInfo.data.browsertime.pageSummary.cpu, 'longTasks.maxPotentialFid', h.time.ms) + +getRow('CPU long tasks ', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.tasks' , pageInfo.data.browsertime.pageSummary.cpu, 'longTasks.tasks', h.noop) + +getRow('CPU longest task duration ', pageInfo, 'data.browsertime.pageSummary.statistics.cpu.longTasks.durations.max' , pageInfo.data.browsertime.pageSummary.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.cpu, 'longTasks.lastLongTask', h.time.ms)