mirror
/
sitespeed.io
mirror of https://github.com/sitespeedio/sitespeed.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add handy links on all tabs (#3213)

This commit is contained in:
Peter Hedenskog 2020-12-15 22:42:32 +01:00 committed by GitHub
parent 07f7ed03d1
commit 88e890999b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 213 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
lib/plugins/crux/pug/index.pug
View File

@ -10,14 +10,21 @@ mixin numberCell(title, number)
mixin sizeCell(title, size)
td.number(data-title=title, data-value= size)= h.size.format(size)
a
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.
- 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 experiences = ['loadingExperience','originLoadingExperience'];
small
|| 
each experience in experiences
each formFactor in Object.keys(crux[experience])
a(href='#' + experience + '-' + formFactor) #{experience} #{formFactor} |
|  | 
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.
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.
@ -28,6 +35,7 @@ each experience in experiences
if crux[experience]
each formFactor in Object.keys(crux[experience])
if (crux[experience][formFactor] && crux[experience][formFactor].data)
a(id=experience + '-' + formFactor)
h3 Form Factor #{formFactor}
table
thead

15
lib/plugins/html/templates/url/coach/index.pug
View File

@ -40,6 +40,21 @@ mixin adviceInfo(name, id, perfectScore, node)
- const advice = pageInfo.data.coach.run ? pageInfo.data.coach.run.advice : pageInfo.data.coach.pageSummary.advice;
small
if advice
||
a(href='#coach-perf') Performance advice
|  | 
a(href='#coach-bestpractice') Best practice advice
|  | 
a(href='#coach-privacy') Privacy advice
|  | 
a(href='#page-info') Page info
|  | 
if advice.info.technology && advice.info.technology.length > 0 ||  (advice.info.thirdparty && Object.keys(advice.info.thirdparty.toolsByCategory).length > 0)
a(href='#technology') Technologies
|  | 
h2 Coach
p.small
a(href='https://github.com/sitespeedio/coach') The coach

2
lib/plugins/html/templates/url/coach/pageInfo.pug
View File

@ -1,4 +1,4 @@
a#info
a#page-info
h2 Page info
.row
.one-half.column

2
lib/plugins/html/templates/url/coach/technology.pug
View File

@ -1,4 +1,4 @@
a#info
a#technology
h2 Technologies used to build the page.
p Data collected using
a(href='https://github.com/AliasIO/wappalyzer') Wappalyzer.

26
lib/plugins/html/templates/url/cpu/index.pug
View File

@ -1,5 +1,24 @@
- const browsertime = medianRun ? (pageInfo.data.browsertime ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1]: undefined) : pageInfo.data.browsertime.run
a
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
|  | 
a#cpu
h2 CPU
if browsertime && browsertime.cpu && browsertime.cpu.events
@ -17,6 +36,7 @@ if options.browsertime && options.browsertime.firefox && options.browsertime.fir
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
@ -75,6 +95,7 @@ if browsertime && browsertime.cpu && browsertime.cpu.longTasks
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
@ -93,6 +114,7 @@ if browsertime && browsertime.timings && browsertime.timings.firstInput !== unde
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.
@ -120,6 +142,7 @@ if browsertime && browsertime.cpu && browsertime.cpu.categories
td #{event.value.toFixed(0)}
if browsertime && browsertime.cpu && browsertime.cpu.urls && browsertime.cpu.urls.length > 0
a#cpu-time-spent-per-request
h3 Time spent per request
table
tr
@ -135,6 +158,7 @@ if browsertime && browsertime.cpu && browsertime.cpu.categories
- 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

6
lib/plugins/html/templates/url/filmstrip/index.pug
View File

@ -7,7 +7,11 @@ mixin frame(filmstrip, iteration)
span.videoframetext !{timing.name ? timing.name : timing.metric}
b  #{h.time.ms(timing.duration || timing.value)}
a
small
||
a(href='#filmstrip') Filmstrip
|  | 
a#filmstrip
h2 Filmstrip
- const videoIndex = medianRun ? medianRun.runIndex : iteration;

42
lib/plugins/html/templates/url/metrics/index.pug
View File

@ -1,8 +1,46 @@
- const browsertime = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1] : pageInfo.data.browsertime.run
if browsertime
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.layoutShift !== undefined
a(href='#layoutShift') 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 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
|  | 
- baseHelpURL = rootPath + 'help.html#';
- const defaultVisualMetrics = ['SpeedIndex','FirstVisualChange','LastVisualChange','VisualProgress', 'PerceptualSpeedIndexProgress', 'ContentfulSpeedIndexProgress', 'videoRecordingStart', 'PerceptualSpeedIndex', 'ContentfulSpeedIndex', 'LastMeaningfulPaint', 'LargestImage', 'Heading' ,'VisualReadiness','VisualComplete85', 'VisualComplete95','VisualComplete99'];
@ -202,7 +240,7 @@ if browsertime
else
p There are no custom configured scripts.
a#extras-metrics
a#extra-metrics
h3 Extra metrics collected using scripting
if browsertime.extras && Object.keys(browsertime.extras).length > 0
table

4
lib/plugins/html/templates/url/metrics/lcp.pug
View File

@ -21,7 +21,9 @@ if timings.largestContentfulPaint
td #{timings.largestContentfulPaint.id}
if timings.largestContentfulPaint.url !== ''
td
a(href=timings.largestContentfulPaint.url) #{timings.largestContentfulPaint.url}
a(href=timings.largestContentfulPaint.url)
img.screenshot(src=timings.largestContentfulPaint.url, alt='LCP', style='width:200px')
| #{timings.largestContentfulPaint.url}
if timings.largestContentfulPaint.tagName
td #{timings.largestContentfulPaint.tagName}
td #{h.time.ms(timings.largestContentfulPaint.renderTime)}

1
lib/plugins/html/templates/url/pagexray/after.pug
View File

@ -1,4 +1,5 @@
if pagexray.afterOnLoad.requests > 0
a#requests-after-onload
h3 Requests loaded after onLoad event
table(data-sortable, id='contentSizeAfterOnload')
+rowHeading(['Content', 'Transfer Size', 'Requests'])

1
lib/plugins/html/templates/url/pagexray/console.pug
View File

@ -1,5 +1,6 @@
h3 Console log
if pageInfo.data.browsertime.console.length > 0
a#console-log
p The page logs the following messages to the console.
.responsive
table

25
lib/plugins/html/templates/url/pagexray/index.pug
View File

@ -1,8 +1,29 @@
include ../../_tableMixins
- const pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary;
small
||
a(href='#pagexray-summary') Summary |
|  | 
a(href='#largest-assets') Largest responses |
|  | 
a(href='#requests-and-sizes-per-content-type') Requests and sizes per content type |
|  | 
a(href='#sizes-per-domain') Size and requests per domain |
|  | 
a(href='#expires-and-last-modified-stats') Expires and last modified statistics |
|  | 
if pageInfo.data.browsertime && pageInfo.data.browsertime.console
a(href='#console-log') Console log |
|  | 
if pagexray.afterOnLoad.requests > 0
a(href='#requests-after-onload') Requests loaded after onLoad event |
|  | 
h3
a
h2 PageXray
- const pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary;
p.small How the page is built.
a#pagexray-summary
.row
@ -49,7 +70,7 @@ include ./perContentType.pug
include ./perDomain.pug
a#expires-and-last-modified-stats
h3 Expires, last modified and cookies stats
h3 Expires and last modified statistics
- expire = pagexray.expireStats
- lastModified = pagexray.lastModifiedStats
.responsive

1
lib/plugins/html/templates/url/pagexray/largest.pug
View File

@ -3,6 +3,7 @@ include ../../_tableMixins
- pagexray.assets.sort(function(a, b){return b.transferSize-a.transferSize})
a#largest-assets
h3 Largest assets on the page (by transfer size)
.responsive
table(data-sortable, id='largestAssetsOnThePage')

14
lib/plugins/html/templates/url/screenshots/index.pug
View File

@ -1,11 +1,17 @@
a
h2 Screenshots
if pageInfo.data.browsertime.run && pageInfo.data.browsertime.run.screenshots
each screenshot in pageInfo.data.browsertime.run.screenshots
small
|| 
each screenshot in pageInfo.data.browsertime.run.screenshots
- filename = screenshot.substring(screenshot.lastIndexOf('/') + 1, screenshot.length)
a(href='#' + filename) #{filename}
|  | 
a
h2 Screenshots
each screenshot in pageInfo.data.browsertime.run.screenshots
- filename = screenshot.substring(screenshot.lastIndexOf('/') + 1, screenshot.length)
- screenshotName = rootPath + screenshot
- style = options.mobile || options.android || (options.safari && options.safari.ios) ? 'max-width: 50%' : 'max-width: 100%'
a(id=filename)
a(href=screenshotName)
img.screenshot(src=screenshotName, alt=filename, style=style)
p #{filename}

3
lib/plugins/html/templates/url/summary/downloads.pug
View File

@ -1,3 +1,4 @@
a#downloads
if options.html.logDownloadLink
a.button.button-download(href=rootPath + 'logs/sitespeed.io.log', download) Download run log
if options.browsertime.video
@ -6,7 +7,7 @@ if options.browsertime.video
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 timeline
if d.browsertime && d.browsertime.har
if d.browsertime && d.browsertime.har
- const harEnding = options.gzipHAR ? '.har.gz' : '.har'
- const harName = 'data/browsertime' + harEnding
- const harDownloadName = downloadName + harEnding

24
lib/plugins/html/templates/url/summary/index.pug
View File

@ -36,6 +36,29 @@ block content
#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
|  | 
a#summary
h2 Summary
.row
.one-half.column
@ -173,6 +196,7 @@ block content
img.screenshot(src='data/screenshots/wpt-1-firstView.png', alt='Screenshot of run 1')
include ./summaryBox.pug
#downloads
.downloads
include ./downloads.pug
include ./tcpdump.pug

1
lib/plugins/html/templates/url/summary/summaryBox.pug
View File

@ -45,6 +45,7 @@ mixin getRow(name, object, path, runPath, metric, f)
- btStatistics = h.get(pageInfo.data, 'browsertime.pageSummary.statistics')
if btStatistics
a#browsertime-timing-statistics
h2 Timings Summary
- timingMetrics = ['firstPaint', 'loadEventEnd']
.responsive

1
lib/plugins/html/templates/url/summary/tcpdump.pug
View File

@ -1,4 +1,5 @@
if options.browsertime.tcpdump
a#tcpdump
- const tcpDumpPath = 'data/' + (runNumber? runNumber : 1) + '.pcap'
a.button.button-download(href=tcpDumpPath, download) Download tcpdump
if process.env.SSLKEYLOGFILE

2
lib/plugins/html/templates/url/thirdparty/firstParty.pug vendored
View File

@ -1,4 +1,4 @@
a#first-party
a#first-vs-third
h3 First party requests and sizes per content type
p Calculated using #{pagexray.firstPartyRegEx} (use
code --firstParty

25
lib/plugins/html/templates/url/thirdparty/index.pug vendored
View File

@ -1,14 +1,30 @@
include ../../_tableMixins
a
- const pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary;
- const thirdparty = medianRun ? pageInfo.data.thirdparty.pageSummary.runs[medianRun.runIndex - 1] : pageInfo.data.thirdparty.run;
small
||
if thirdparty.category && Object.keys(thirdparty.category).length > 0
a(href='#third-party-categories') Categories |
|  | 
if thirdparty.assets && Object.keys(thirdparty.assets).length > 0
a(href='#third-party-tools') Tools |
|  | 
if pagexray.cookieNamesThirdParties.length > 0
a(href='#third-party-cookies') Cookies |
|  | 
if pagexray.firstParty.requests
a(href='#first-vs-third') First vs third
|  | 
a#third-party
a#third-party-categories
h2 Third party
p Third party requests categorised by
a(href='https://github.com/patrickhulce/third-party-web') Third party web
| .
- const thirdparty = medianRun ? pageInfo.data.thirdparty.pageSummary.runs[medianRun.runIndex - 1] : pageInfo.data.thirdparty.run;
if thirdparty.category && Object.keys(thirdparty.category).length > 0
.row
.one-half.column
@ -29,6 +45,7 @@ if thirdparty.category && Object.keys(thirdparty.category).length > 0
+numberCell('Tools', metric.tools ? metric.tools.median :Object.keys(thirdparty.toolsByCategory[category]).length)
if thirdparty.assets && Object.keys(thirdparty.assets).length > 0
a#third-party-tools
h3 Third party requests and tools
button.hidden-small.button.button--primary(onclick='toggleRow(this);') Show/hide third party URLs
table
@ -68,8 +85,6 @@ if thirdparty.possibileMissedThirdPartyDomains && thirdparty.possibileMissedThi
tr
td #{domain}
- const pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary;
include ./thirdPartyCookies.pug
if pagexray.firstParty.requests

1
lib/plugins/html/templates/url/thirdparty/thirdPartyCookies.pug vendored
View File

@ -2,6 +2,7 @@
include ../../_tableMixins
if pagexray.cookieNamesThirdParties.length > 0
a#third-party-cookies
h3 Third party cookies
.responsive

7
lib/plugins/html/templates/url/video/index.pug
View File

@ -1,6 +1,12 @@
- const videoIndex = medianRun ? medianRun.runIndex : iteration;
- const width = options.mobile ? 'max-width: 400px;' : h.get(options, 'browsertime.chrome.android.package') ? 'max-width: 400px;' : 'width: 100%'
small
||
a(href='#video') Video
|  | 
a(href='#download-video') Download
|  | 
a#video
h3 Video
.videoWrapper(style=width)
@ -10,5 +16,6 @@ h3 Video
script(src= assetsPath + 'js/video.novtt.min.js')
a#download-video
- const videoPath = 'data/video/' + (iteration ? iteration : medianRun.runIndex ) +'.mp4'
a.button.button-download(href=videoPath, download=downloadName + '-video.mp4') Download video

28
lib/plugins/html/templates/url/waterfall/index.pug
View File

@ -1,15 +1,12 @@
small
||
a(href='#waterfall') Waterfall |
|  | 
a(href='#download-HAR') Download HAR
|  | 
a#waterfall
h3 Waterfall
.downloads
- const harEnding = options.gzipHAR ? '.har.gz' : '.har'
- const harName = 'data/browsertime' + harEnding
- const harDownloadName = downloadName + harEnding
a.button.button-download(href=harName, download=harDownloadName) Download HAR
if (options.html && options.html.compareURL && options.resultBaseURL)
- const compareURL = options.html.compareURL + '?compare=1&har1=' + context.resultUrls.absoluteSummaryPagePath(daurl) + harName
a.button.button-download(href=compareURL) Compare
//- on the summary page, display which run that was chosen for the HAR
if medianRun
p.small Run 
@ -28,3 +25,14 @@ if options.html.fetchHARFiles
include ./fetchHAR.pug
else
include ./includeHARinHTML.pug
a#download-HAR
.downloads
- const harEnding = options.gzipHAR ? '.har.gz' : '.har'
- const harName = 'data/browsertime' + harEnding
- const harDownloadName = downloadName + harEnding
a.button.button-download(href=harName, download=harDownloadName) Download HAR
if (options.html && options.html.compareURL && options.resultBaseURL)
- const compareURL = options.html.compareURL + '?compare=1&har1=' + context.resultUrls.absoluteSummaryPagePath(daurl) + harName
a.button.button-download(href=compareURL) Compare