From a8c131dada0a31691a7245e3f9af4aa015a42f4f Mon Sep 17 00:00:00 2001 From: soulgalore Date: Sat, 20 Jul 2024 15:35:02 +0200 Subject: [PATCH 1/2] Add link to geckoprofiler https://github.com/sitespeedio/sitespeed.io/issues/4233 --- lib/plugins/html/templates/url/cpu/index.pug | 207 +++++++++---------- 1 file changed, 102 insertions(+), 105 deletions(-) diff --git a/lib/plugins/html/templates/url/cpu/index.pug b/lib/plugins/html/templates/url/cpu/index.pug index aaa43703ce..19137b6fff 100644 --- a/lib/plugins/html/templates/url/cpu/index.pug +++ b/lib/plugins/html/templates/url/cpu/index.pug @@ -4,53 +4,52 @@ if cpu small - || if cpu.longTasks - a(href='#long-tasks') CPU Long Tasks - |  |  + a(href='#long-tasks') CPU Long Tasks + |  |  if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined - a(href='#first-input-delay') First Input Delay - |  |  + a(href='#first-input-delay') First Input Delay + |  |  if cpu.categories - a(href='#cpu-time-spent') CPU Time Spent - |  |  + 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 - |  |  + 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(href='#cpu-time-per-tool') CPU Time Per Tool/Domain + |  |  - a#cpu - h2 CPU +a#cpu +h2 CPU - 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 cpu && 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.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 options.browsertime && options.browsertime.firefox && options.browsertime.firefox.geckoProfiler && options.browser === 'firefox' && !options.browsertime.enableProfileRun +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 + 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 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 + - 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 - if cpu.longTasks +if cpu && 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. @@ -109,81 +108,79 @@ if cpu 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! + td #{task.attribution[0].containerType} - 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.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 cpu.categories - a#cpu-time-spent - h3 CPU time spent - p Calculated using Tracium. +if cpu && cpu.categories + a#cpu-time-spent + h3 CPU time spent + p Calculated using Tracium. - .row - .one-half.column - if cpu.categories - table + .row + .one-half.column + if cpu.categories + table + tr + th(colspan='2') Categories (ms) + each value, name in cpu.categories 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 + 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 - 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)} + td #{event.name} + td #{event.value.toFixed(0)} - if cpu.urls && cpu.urls.length > 0 - a#cpu-time-spent-per-request - h3 Time spent per request - table + if cpu.urls && cpu.urls.length > 0 + a#cpu-time-spent-per-request + h3 Time spent per request + table + tr + th URL + th CPU time (ms) + each data in cpu.urls tr - 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)} + 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 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)} + 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)} From 138f51ee5534e2f1de34525b529575a29c28e20f Mon Sep 17 00:00:00 2001 From: soulgalore Date: Sat, 20 Jul 2024 15:38:04 +0200 Subject: [PATCH 2/2] fix --- lib/plugins/html/templates/url/cpu/index.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/plugins/html/templates/url/cpu/index.pug b/lib/plugins/html/templates/url/cpu/index.pug index 19137b6fff..f18cdddbe7 100644 --- a/lib/plugins/html/templates/url/cpu/index.pug +++ b/lib/plugins/html/templates/url/cpu/index.pug @@ -40,7 +40,7 @@ if options.browsertime && options.browsertime.firefox && options.browsertime.fir 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 + 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