293 lines
12 KiB
Plaintext
293 lines
12 KiB
Plaintext
extends ./layout.pug
|
||
|
||
block content
|
||
- const d = pageInfo.data
|
||
- const daTitle = daurlAlias ? daurlAlias : daurl
|
||
- const downloadName = (daTitle + '-' + options.browser + '-' + timestamp).replace(/(https?\:\/\/)|( )|(:)/ig, '')
|
||
h1 Page summary
|
||
|
||
h5.url
|
||
a(href=daurl) #{decodeURIComponent(daTitle)}
|
||
|
||
include ../includes/pageRunInfo
|
||
|
||
if d.browsertime && d.browsertime.pageSummary
|
||
b #{d.browsertime.pageSummary.info.title}
|
||
p !{d.browsertime.pageSummary.info.description}
|
||
|
||
if d.browsertime && d.browsertime.pageSummary && d.browsertime.pageSummary.markedAsFailure
|
||
.errors
|
||
b This test was marked as a failure with the following #{h.plural(d.browsertime.pageSummary.failureMessages.length, 'message')}:
|
||
ul
|
||
each failureMessage in d.browsertime.pageSummary.failureMessages
|
||
li #{failureMessage}
|
||
|
||
p
|
||
.large#pageNavigation All runs:
|
||
each val, index in runPages
|
||
- value = Number(index) + 1
|
||
a(href='./' + value + '.html') #{value}
|
||
if (value === Object.keys(runPages).length)
|
||
| -
|
||
a(href='metrics.html') (side by side)
|
||
else
|
||
| -
|
||
|
|
||
|
||
if pageInfo.errors
|
||
.errors
|
||
b Errors
|
||
ul
|
||
each errors, tool in pageInfo.errors
|
||
each error in errors
|
||
li #{error}
|
||
b (#{tool})
|
||
include ./tabs.pug
|
||
|
||
#tabSections
|
||
section#summary-panel
|
||
small
|
||
| |
|
||
a(href='#summary') Summary |
|
||
| |
|
||
if h.get(pageInfo.data, 'browsertime.pageSummary.statistics')
|
||
a#browsertime-timing-statistics
|
||
if options.browsertime.tcpdump
|
||
a(href='#tcpdump') Download TCP dump
|
||
| |
|
||
if options.html.logDownloadLink
|
||
a(href='#downloads') Download log
|
||
| |
|
||
if options.browsertime.video
|
||
a(href='#downloads') Download Video
|
||
| |
|
||
if options.browsertime.chrome && options.browsertime.chrome.timeline
|
||
a(href='#downloads') Download Timeline Log
|
||
| |
|
||
if d.browsertime && d.browsertime.har
|
||
a(href='#downloads') Download HAR
|
||
| |
|
||
if options.browsertime.chrome && options.browsertime.chrome.collectConsoleLog
|
||
a(href='#downloads') Download Console Logs
|
||
| |
|
||
|
||
a#summary
|
||
h2 Summary
|
||
.row
|
||
.one-half.column
|
||
table
|
||
tr
|
||
th Metric
|
||
th Value
|
||
- performanceScore = get(d, 'coach.pageSummary.advice.performance.score')
|
||
tr
|
||
th(colspan='2') Page metrics
|
||
if performanceScore
|
||
tr
|
||
td Performance Score
|
||
td #{performanceScore}
|
||
- totalTransferSize = get(d, 'pagexray.pageSummary.transferSize')
|
||
if totalTransferSize
|
||
tr
|
||
td Total Page Transfer Size
|
||
td #{h.size.format(totalTransferSize)}
|
||
- memory = get(d, 'browsertime.pageSummary.memory')
|
||
if memory
|
||
tr
|
||
td Memory
|
||
td #{h.size.format(memory)}
|
||
- powerConsumption = get(d, 'browsertime.pageSummary.statistics.powerConsumption.median')
|
||
if powerConsumption
|
||
tr
|
||
td Firefox CPU Power Consumption
|
||
td #{powerConsumption} µWh
|
||
- requests = get(d, 'pagexray.pageSummary.requests')
|
||
if requests
|
||
tr
|
||
td Requests
|
||
td #{requests}
|
||
- ttfb = get(d, 'browsertime.pageSummary.statistics.timings.pageTimings.backEndTime.median')
|
||
tr
|
||
th(colspan='2') Timing metrics
|
||
if ttfb
|
||
tr
|
||
td TTFB [median]
|
||
td #{h.time.ms(ttfb)}
|
||
- firstPaint = get(d, 'browsertime.pageSummary.statistics.timings.firstPaint.median')
|
||
if firstPaint
|
||
tr
|
||
td First Paint [median]
|
||
td #{h.time.ms(firstPaint)}
|
||
- fullyLoaded = get(d, 'browsertime.pageSummary.statistics.timings.fullyLoaded.median')
|
||
if fullyLoaded
|
||
tr
|
||
td Fully Loaded [median]
|
||
td #{h.time.ms(fullyLoaded)}
|
||
- fcp = get(d, 'browsertime.pageSummary.statistics.timings.paintTiming["first-contentful-paint"].median')
|
||
- lcp = get(d, 'browsertime.pageSummary.statistics.timings.largestContentfulPaint.renderTime.median')
|
||
- ttfb = get(d, 'browsertime.pageSummary.statistics.timings.pageTimings.backEndTime.median')
|
||
- inp = get(d, 'browsertime.pageSummary.statistics.timings.interactionToNextPaint.median')
|
||
if lcp
|
||
tr
|
||
th(colspan='2') Google Web Vitals
|
||
if ttfb
|
||
tr
|
||
td TTFB [median]
|
||
td #{h.time.ms(ttfb)}
|
||
if fcp
|
||
tr
|
||
td First Contentful Paint (FCP) [median]
|
||
td #{h.time.ms(fcp)}
|
||
if lcp
|
||
tr
|
||
td Largest Contentful Paint (LCP) [median]
|
||
td #{h.time.ms(lcp)}
|
||
- cls = get(d, 'browsertime.pageSummary.statistics.pageinfo.cumulativeLayoutShift.median')
|
||
if cls || cls === 0
|
||
tr
|
||
td Cumulative Layout Shift (CLS) [median]
|
||
td #{cls.toFixed(2)}
|
||
if inp
|
||
tr
|
||
td Interaction To Next Paint (INP) [median]
|
||
td #{h.time.ms(inp)}
|
||
- tbt = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.totalBlockingTime.median')
|
||
if tbt
|
||
tr
|
||
td Total Blocking Time [median]
|
||
td #{h.time.ms(tbt)}
|
||
- mpFID = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.maxPotentialFid.median')
|
||
if mpFID
|
||
tr
|
||
td Max Potential FID [median]
|
||
td #{h.time.ms(mpFID)}
|
||
- longTasks = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.tasks.median')
|
||
if longTasks
|
||
tr
|
||
th(colspan='2') CPU metrics
|
||
tr
|
||
td CPU long tasks [median]
|
||
td #{longTasks}
|
||
- maxLongTask= get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.durations.max')
|
||
if maxLongTask
|
||
tr
|
||
td CPU longest task duration
|
||
td #{h.time.ms(maxLongTask)}
|
||
- lastLongTask = get(d, 'browsertime.pageSummary.statistics.cpu.longTasks.lastLongTask.median')
|
||
if lastLongTask
|
||
tr
|
||
td CPU last long task happens at
|
||
td #{h.time.ms(lastLongTask)}
|
||
- firstVisualChange = get(d, 'browsertime.pageSummary.statistics.visualMetrics.FirstVisualChange.median')
|
||
if firstVisualChange
|
||
tr
|
||
th(colspan='2') Visual Metrics
|
||
tr
|
||
td First Visual Change [median]
|
||
td #{h.time.ms(firstVisualChange)}
|
||
- speedIndex = get(d, 'browsertime.pageSummary.statistics.visualMetrics.SpeedIndex.median')
|
||
if speedIndex
|
||
tr
|
||
td Speed Index [median]
|
||
td #{h.time.ms(speedIndex)}
|
||
- visualComplete85 = get(d, 'browsertime.pageSummary.statistics.visualMetrics.VisualComplete85.median')
|
||
if visualComplete85
|
||
tr
|
||
td Visual Complete 85% [median]
|
||
td #{h.time.ms(visualComplete85)}
|
||
- visualComplete99 = get(d, 'browsertime.pageSummary.statistics.visualMetrics.VisualComplete99.median')
|
||
if visualComplete99
|
||
tr
|
||
td Visual Complete 99% [median]
|
||
td #{h.time.ms(visualComplete99)}
|
||
- lastVisualChange = get(d, 'browsertime.pageSummary.statistics.visualMetrics.LastVisualChange.median')
|
||
if lastVisualChange
|
||
tr
|
||
td Last Visual Change [median]
|
||
td #{h.time.ms(lastVisualChange)}
|
||
- cruxFCP = get(d, 'crux.pageSummary.loadingExperience.ALL.data.record.metrics.first_contentful_paint.percentiles.p75');
|
||
if cruxFCP
|
||
tr
|
||
th(colspan='2') Chrome User Experience Report (CRUX)
|
||
tr
|
||
td First Contentful Paint [p75]
|
||
td #{h.time.ms(cruxFCP)}
|
||
- cruxLCP = get(d, 'crux.pageSummary.loadingExperience.ALL.data.record.metrics.largest_contentful_paint.percentiles.p75');
|
||
if cruxLCP
|
||
tr
|
||
td Largest Contentful Paint (LCP) [p75]
|
||
td #{h.time.ms(cruxLCP)}
|
||
- cruxFID = get(d, 'crux.pageSummary.loadingExperience.ALL.data.record.metrics.first_input_delay.percentiles.p75');
|
||
if cruxFID
|
||
tr
|
||
td First Input Delay (FID) [p75]
|
||
td #{h.time.ms(cruxFID)}
|
||
- cruxCLS = get(d, 'crux.pageSummary.loadingExperience.ALL.data.record.metrics.cumulative_layout_shift.percentiles.p75');
|
||
if cruxCLS || cruxCLS === 0
|
||
tr
|
||
td Cumulative Layout Shift (CLS) [p75]
|
||
td #{Number(cruxCLS).toFixed(2)}
|
||
if d.crux && d.crux.pageSummary && d.crux.pageSummary.loadingExperience && d.crux.pageSummary.loadingExperience.ALL && d.crux.pageSummary.loadingExperience.ALL.data && !d.browsertime
|
||
- const cruxMetrics = {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'};
|
||
each name, key in cruxMetrics
|
||
if d.crux.pageSummary.loadingExperience.ALL.data.record.metrics[key]
|
||
tr
|
||
td Fast #{name} (CrUx overall)
|
||
td #{Number(d.crux.pageSummary.loadingExperience.ALL.data.record.metrics[key].histogram[0].density * 100).toFixed(2)} %
|
||
tr
|
||
td Moderate #{name} (CrUx overall)
|
||
td #{Number(d.crux.pageSummary.loadingExperience.ALL.data.record.metrics[key].histogram[1].density * 100).toFixed(2)} %
|
||
tr
|
||
td Slow #{name} (CrUx overall)
|
||
td #{Number(d.crux.pageSummary.loadingExperience.ALL.data.record.metrics[key].histogram[2].density * 100).toFixed(2)} %
|
||
.one-half.column
|
||
if hasScreenShots
|
||
- const width = options.mobile ? 150 : '100%';
|
||
- const screenshotNo = medianRun ? medianRun.runIndex : 1
|
||
- const screenshotName = 'data/screenshots/' + screenshotNo + '/afterPageCompleteCheck.' + screenShotType
|
||
a(href=screenshotName)
|
||
img.screenshot(src=screenshotName, width=width, alt='Screenshot of run ' + screenshotNo)
|
||
include ./summaryBox.pug
|
||
|
||
#downloads
|
||
.downloads
|
||
include ./downloads.pug
|
||
include ./tcpdump.pug
|
||
|
||
if d.browsertime && d.browsertime.har
|
||
section#waterfall-panel
|
||
include ../waterfall/index.pug
|
||
|
||
if options.browsertime.video
|
||
section#video-panel
|
||
include ../video/index.pug
|
||
|
||
if (options.browsertime.video || options.browsertime.visualMetrics) && options.videoParams.createFilmstrip || options.browsertime.chrome && options.browsertime.chrome.enableTraceScreenshots
|
||
section#filmstrip-panel
|
||
include ../filmstrip/index.pug
|
||
|
||
if d.coach && d.coach.pageSummary
|
||
section#coach-panel
|
||
include ../coach/index.pug
|
||
|
||
if d.browsertime && d.browsertime.pageSummary
|
||
section#metrics-panel
|
||
include ../metrics/index.pug
|
||
|
||
if d.pagexray && d.pagexray.pageSummary
|
||
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)
|
||
section#cpu-panel
|
||
include ../cpu/index.pug
|
||
|
||
if d.thirdparty && d.thirdparty.pageSummary
|
||
section#thirdparty-panel
|
||
include ../thirdparty/index.pug
|
||
|
||
each pageSummary in pageSummaries
|
||
- const panelName = pageSummary.id + '-panel'
|
||
section(id=panelName)
|
||
p !{pugs[pageSummary.id]}
|