229 lines
8.3 KiB
Plaintext
229 lines
8.3 KiB
Plaintext
- 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;
|
||
- baseHelpURL = rootPath + 'help.html#';
|
||
|
||
- const defaultVisualMetrics = ['SpeedIndex','FirstVisualChange','LastVisualChange','VisualProgress', 'PerceptualSpeedIndexProgress', 'ContentfulSpeedIndexProgress', 'videoRecordingStart', 'PerceptualSpeedIndex', 'ContentfulSpeedIndex', 'LastMeaningfulPaint', 'LargestImage', 'Heading' ,'VisualReadiness','VisualComplete85', 'VisualComplete95','VisualComplete99'];
|
||
if (options.browsertime.visualMetrics || (options.cpu && options.browsertime.chrome && options.browsertime.chrome.visualMetricsUsingTrace && options.browsertime.chrome.enableTraceScreenshots)) && visualMetrics
|
||
a#visualmetrics
|
||
h3 Visual Metrics
|
||
.row
|
||
.one-half.column
|
||
table
|
||
tr
|
||
th(colspan='2') Visual Metrics
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'FirstVisualChange') First Visual Change
|
||
td.number #{h.time.ms(visualMetrics.FirstVisualChange.toFixed(0))}
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'SpeedIndex') Speed Index
|
||
td.number #{h.time.ms(visualMetrics.SpeedIndex.toFixed(0))}
|
||
if visualMetrics.PerceptualSpeedIndex
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'PerceptualSpeedIndex') Perceptual Speed Index
|
||
td.number #{h.time.ms(visualMetrics.PerceptualSpeedIndex.toFixed(0))}
|
||
if visualMetrics.ContentfulSpeedIndex
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'ContentfulSpeedIndex') Contentful Speed Index
|
||
td.number #{h.time.ms(visualMetrics.ContentfulSpeedIndex.toFixed(0))}
|
||
if visualMetrics.LargestImage
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'LargestImage') Largest Image
|
||
td.number #{h.time.ms(visualMetrics.LargestImage.toFixed(0))}
|
||
if visualMetrics.Heading
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'Heading') Heading
|
||
td.number #{h.time.ms(visualMetrics.Heading.toFixed(0))}
|
||
each name in Object.keys(visualMetrics)
|
||
if (!defaultVisualMetrics.includes(name))
|
||
tr
|
||
td #{name}
|
||
td.number #{h.time.ms(visualMetrics[name].toFixed(0))}
|
||
if visualMetrics.LastMeaningfulPaint
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'LastMeaningfulPaint') Last Meaningful Paint
|
||
td.number #{h.time.ms(visualMetrics.LastMeaningfulPaint.toFixed(0))}
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'VisualComplete85') Visual Complete 85%
|
||
td.number #{h.time.ms(visualMetrics.VisualComplete85.toFixed(0))}
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'VisualComplete95') Visual Complete 95%
|
||
td.number #{h.time.ms(visualMetrics.VisualComplete95.toFixed(0))}
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'VisualComplete99') Visual Complete 99%
|
||
td.number #{h.time.ms(visualMetrics.VisualComplete99.toFixed(0))}
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'LastVisualChange') Last Visual Change
|
||
td.number #{h.time.ms(visualMetrics.LastVisualChange.toFixed(0))}
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'VisualReadiness') Visual Readiness
|
||
td.number #{h.time.ms(visualMetrics.VisualReadiness.toFixed(0))}
|
||
.one-half.column
|
||
.ct-chart.ct-minor-sixth#ct-visualprogress
|
||
include ./visualProgress.pug
|
||
|
||
a#browsermetrics
|
||
h3 Browser Metrics
|
||
.row
|
||
.one-half.column
|
||
table
|
||
tr
|
||
th(colspan='2') Navigation Timing
|
||
each value, name in timings.pageTimings
|
||
tr
|
||
- url = baseHelpURL + name
|
||
td
|
||
a(href=url) #{name}
|
||
td.number #{h.time.ms(value)}
|
||
.one-half.column
|
||
table
|
||
tr
|
||
th(colspan='2') Extra timings
|
||
if (timings.paintTiming && Object.keys(timings.paintTiming).length > 0)
|
||
each value, name in timings.paintTiming
|
||
tr
|
||
td #{name}
|
||
td.number #{h.time.ms(value.toFixed(0))}
|
||
else if timings.firstPaint > -1
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'firstPaint') First paint
|
||
td.number #{h.time.ms(timings.firstPaint.toFixed(0))}
|
||
if timings.timeToDomContentFlushed
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'timeToDomContentFlushed') DOM Content Flushed
|
||
td.number #{h.time.ms(timings.timeToDomContentFlushed.toFixed(0))}
|
||
if timings.timeToContentfulPaint
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'timeToContentfulPaint') Time To Contentful Paint
|
||
td.number #{h.time.ms(timings.timeToContentfulPaint.toFixed(0))}
|
||
if timings.timeToFirstInteractive
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'timeToFirstInteractive') Time To First Interactive
|
||
td.number #{h.time.ms(timings.timeToFirstInteractive.toFixed(0))}
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'loadEventEnd') Load Event End
|
||
td.number #{h.time.ms(timings.loadEventEnd.toFixed(0))}
|
||
if (timings.largestContentfulPaint)
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'largestContentfulPaint') Largest Contentful Paint
|
||
td.number #{h.time.ms(Math.max(timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.renderTime, timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.loadTime))}
|
||
if (timings.fullyLoaded)
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'fullyLoaded') Fully loaded
|
||
td.number #{h.time.ms(timings.fullyLoaded.toFixed(0))}
|
||
else if (browsertime.fullyLoaded)
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'fullyLoaded') Fully loaded
|
||
td.number #{h.time.ms(browsertime.fullyLoaded.toFixed(0))}
|
||
if (Object.keys(timings.userTimings.marks).length > 0)
|
||
table
|
||
tr
|
||
th(colspan='2') User Timing marks
|
||
if (Object.keys(timings.userTimings.marks).length > 0)
|
||
each value, name in timings.userTimings.marks
|
||
tr
|
||
td #{value.name}
|
||
td.number #{h.time.ms(value.startTime.toFixed(0))}
|
||
if (Object.keys(timings.userTimings.measures).length > 0)
|
||
table
|
||
tr
|
||
th(colspan='3') User Timing measures
|
||
tr
|
||
th Name
|
||
th Start time
|
||
th Duration
|
||
each value, name in timings.userTimings.measures
|
||
tr
|
||
td #{value.name}
|
||
td.number #{h.time.ms(value.startTime.toFixed(0))}
|
||
td.number #{h.time.ms(value.duration.toFixed(0))}
|
||
include ./lcp.pug
|
||
include ./firstInput.pug
|
||
include ./layoutShift.pug
|
||
include ./elementTimings.pug
|
||
include ./serverTimings.pug
|
||
|
||
a#custom-scripts
|
||
h3 Custom metrics collected through JavaScript
|
||
if browsertime.custom
|
||
table
|
||
tr
|
||
th name
|
||
th value
|
||
each value, name in browsertime.custom
|
||
tr
|
||
td #{name}
|
||
td #{value}
|
||
else
|
||
p There are no custom configured scripts.
|
||
|
||
a#extras-metrics
|
||
h3 Extra metrics collected using scripting
|
||
if browsertime.extras
|
||
table
|
||
tr
|
||
th name
|
||
th value
|
||
each value, name in browsertime.extras
|
||
tr
|
||
td #{name}
|
||
td #{value}
|
||
else
|
||
p There are no custom extra metrics from scripting.
|
||
|
||
if browsertime.cdp && browsertime.cdp.performance
|
||
a#cdp-performance
|
||
h3 CDP Performance
|
||
table
|
||
tr
|
||
th name
|
||
th value
|
||
each value, name in browsertime.cdp.performance
|
||
tr
|
||
td #{name}
|
||
td #{value.toFixed(0)}
|
||
|
||
if options.browsertime.visualElements
|
||
a#visual-elements
|
||
h3 Visual Elements
|
||
table
|
||
tr
|
||
th name
|
||
th x
|
||
th y
|
||
th width
|
||
th height
|
||
each element in browsertime.pageinfo.visualElements.heroes
|
||
tr
|
||
td #{element.name}
|
||
if (element.filename)
|
||
| (#{element.filename})
|
||
td #{element.x}
|
||
td #{element.y}
|
||
td #{element.width}
|
||
td #{element.height}
|
||
else
|
||
p Missing data from Browsertime.
|