311 lines
12 KiB
Plaintext
311 lines
12 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;
|
||
small
|
||
| |
|
||
a(href='#browsermetrics') Browser metrics
|
||
| |
|
||
if (options.browsertime.visualMetrics)
|
||
a(href='#visualmetrics') Visual Metrics
|
||
| |
|
||
if timings.largestContentfulPaint
|
||
a(href='#largestContentfulPaint') Largest Contentful Paint
|
||
| |
|
||
if browsertime.pageinfo && browsertime.pageinfo.cumulativeLayoutShift !== undefined
|
||
a(href='#cumulativeLayoutShift') Cumulative Layout Shift
|
||
| |
|
||
if browsertime.timings.elementTimings && Object.keys(browsertime.timings.elementTimings).length > 0
|
||
a(href='#elementTimings') Element Timings
|
||
| |
|
||
if browsertime.custom
|
||
a(href='#custom-scripts') Custom scripts
|
||
| |
|
||
if browsertime.extras && Object.keys(browsertime.extras).length > 0
|
||
a(href='#extra-metrics') Extra metrics
|
||
| |
|
||
if options.browsertime.visualElements
|
||
a(href='#visual-elements') Visual Elements
|
||
| |
|
||
if browsertime.timings.firstInput !== undefined
|
||
a(href='#firstInput') First Input Delay
|
||
| |
|
||
if browsertime.cdp && browsertime.cdp.performance
|
||
a(href='#cdp-performance') Metrics from CDP
|
||
| |
|
||
if timings.serverTimings && timings.serverTimings.length > 0
|
||
a(href='#server-timings') Server timings
|
||
| |
|
||
|
||
p
|
||
small #{ medianRun ? 'Data from run ' + medianRun.runIndex : ''}
|
||
|
||
- 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 && 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
|
||
if (browsertime.googleWebVitals)
|
||
table
|
||
tr
|
||
th(colspan='2') Google Web Vitals
|
||
if (timings.paintTiming && timings.paintTiming['first-contentful-paint'])
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'firstContentfulPaint') First Contentful Paint (FCP)
|
||
td.number #{h.time.ms(timings.paintTiming['first-contentful-paint'])}
|
||
if (timings.largestContentfulPaint)
|
||
tr
|
||
td
|
||
a(href='#largestContentfulPaint') Largest Contentful Paint (LCP)
|
||
td.number #{h.time.ms(Math.max(timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.renderTime, timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.loadTime))}
|
||
tr
|
||
td
|
||
a(href='#cumulativeLayoutShift') Cumulative Layout Shift (CLS)
|
||
td.number #{browsertime.pageinfo.cumulativeLayoutShift.toFixed(2)}
|
||
if browsertime.timings.firstInput !== undefined
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'firstInputDelay') First Input Delay (FID)
|
||
td.number #{h.time.ms(browsertime.timings.firstInput.delay)}
|
||
else
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'totalBlockingTime') Total Blocking Time (TBT)
|
||
td.number #{h.time.ms(browsertime.cpu.longTasks.totalBlockingTime)}
|
||
table
|
||
tr
|
||
th(colspan='2') Extra timings
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'ttfb') TTFB
|
||
td.number #{h.time.ms(timings.ttfb.toFixed(0))}
|
||
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
|
||
// do nada
|
||
else
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + paintTimingHelper[name].friendly) #{paintTimingHelper[name].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))}
|
||
if (!browsertime.googleWebVitals && timings.largestContentfulPaint)
|
||
tr
|
||
td
|
||
a(href=baseHelpURL + 'largestContentfulPaint') Largest Contentful Paint (LCP)
|
||
td.number #{h.time.ms(Math.max(timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.renderTime, timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.loadTime))}
|
||
tr
|
||
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)
|
||
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#extra-metrics
|
||
h3 Extra metrics collected using scripting
|
||
if browsertime.extras && Object.keys(browsertime.extras).length > 0
|
||
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 Display Time
|
||
th X
|
||
th Y
|
||
th Width
|
||
th Height
|
||
each element in browsertime.pageinfo.visualElements.heroes
|
||
tr
|
||
td #{element.name}
|
||
if (element.filename)
|
||
| (#{element.filename})
|
||
if element && visualMetrics && visualMetrics[element.name]
|
||
td #{visualMetrics[element.name] ? h.time.ms(visualMetrics[element.name].toFixed(0)): ''}
|
||
else
|
||
td
|
||
td #{element.x}
|
||
td #{element.y}
|
||
td #{element.width}
|
||
td #{element.height}
|
||
tr
|
||
td.url.pagesurl(colspan=6) #{element.html}
|
||
else
|
||
p Missing data from Browsertime.
|