diff --git a/lib/plugins/html/templates/url/iteration/index.pug b/lib/plugins/html/templates/url/iteration/index.pug index 7cbf36a99..38091543b 100644 --- a/lib/plugins/html/templates/url/iteration/index.pug +++ b/lib/plugins/html/templates/url/iteration/index.pug @@ -49,6 +49,8 @@ block content tr th Metric th Value + tr + th(colspan='2') Page metrics - performanceScore = get(d, 'coach.run.advice.performance.score') if performanceScore tr @@ -70,40 +72,40 @@ block content td Requests td #{requests} - ttfb = get(d, 'browsertime.run.timings.pageTimings.backEndTime') + tr + th(colspan='2') Timing metrics if ttfb tr td TTFB td #{h.time.ms(ttfb)} + - firstPaint = get(d, 'browsertime.run.timings.firstPaint') + if firstPaint + tr + td First Paint + td #{h.time.ms(firstPaint)} - fullyLoaded = get(d, 'browsertime.run.fullyLoaded') if fullyLoaded tr td Fully Loaded - td #{h.time.ms(fullyLoaded.toFixed(0))} - - firstVisualChange = get(d, 'browsertime.run.visualMetrics.FirstVisualChange') - - firstPaint = get(d, 'browsertime.run.timings.firstPaint') - if firstVisualChange - tr - td First Visual Change - td #{h.time.ms(firstVisualChange)} - else if firstPaint - tr - td First Paint - td #{h.time.ms(firstPaint)} + td #{h.time.ms(fullyLoaded.toFixed(0))} - fcp = get(d, 'browsertime.run.timings.paintTiming["first-contentful-paint"]') - if fcp - tr - td FCP - td #{h.time.ms(fcp)} - lcp = get(d, 'browsertime.run.timings.largestContentfulPaint.renderTime') if lcp tr - td LCP + th(colspan='2') Google Web Vitals + if fcp + tr + td First Contentful Paint (FCP) + td #{h.time.ms(fcp)} + if lcp + tr + td Largest Contentful Paint (LCP) td #{h.time.ms(lcp)} - cls = get(d, 'browsertime.run.pageinfo.cumulativeLayoutShift') if cls || cls === 0 tr - td CLS - td #{cls} + td Cumulative Layout Shift (CLS) + td #{cls.toFixed(2)} - tbt = get(d, 'browsertime.run.cpu.longTasks.totalBlockingTime') if tbt tr @@ -116,6 +118,8 @@ block content td #{h.time.ms(mpFID)} - longTasks = get(d, 'browsertime.run.cpu.longTasks.tasks') if longTasks + tr + th(colspan='2') CPU metrics tr td CPU long tasks td #{longTasks} @@ -124,6 +128,13 @@ block content tr td CPU longest task duration td #{h.time.ms(maxLongTask)} + - firstVisualChange = get(d, 'browsertime.run.visualMetrics.FirstVisualChange') + if firstVisualChange + tr + th(colspan='2') Visual Metrics + tr + td First Visual Change + td #{h.time.ms(firstVisualChange)} - speedIndex = get(d, 'browsertime.run.visualMetrics.SpeedIndex') if speedIndex tr @@ -145,6 +156,8 @@ block content td Last Visual Change td #{h.time.ms(lastVisualChange)} if !d.browsertime && d.webpagetest + tr + th(colspan='2') WebPageTest tr td Render (first view) td #{d.webpagetest.run.firstView.render} diff --git a/lib/plugins/html/templates/url/summary/index.pug b/lib/plugins/html/templates/url/summary/index.pug index 900aebc31..dfff12931 100644 --- a/lib/plugins/html/templates/url/summary/index.pug +++ b/lib/plugins/html/templates/url/summary/index.pug @@ -77,6 +77,8 @@ block content th Metric th Value - performanceScore = get(d, 'coach.pageSummary.advice.performance.score') + tr + th(colspan='2') Page metrics if performanceScore tr td Performance Score @@ -96,32 +98,32 @@ block content tr td Requests td #{requests} - - ttfb = get(d, 'browsertime.pageSummary.statistics.timings.pageTimings.backEndTime.median') + - 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)} - - firstVisualChange = get(d, 'browsertime.pageSummary.statistics.visualMetrics.FirstVisualChange.median') - - firstPaint = get(d, 'browsertime.pageSummary.statistics.timings.firstPaint.median') - if firstVisualChange - tr - td First Visual Change [median] - td #{h.time.ms(firstVisualChange)} - else if firstPaint - tr - td First Paint [median] - td #{h.time.ms(firstPaint)} - fcp = get(d, 'browsertime.pageSummary.statistics.timings.paintTiming["first-contentful-paint"].median') + - lcp = get(d, 'browsertime.pageSummary.statistics.timings.largestContentfulPaint.renderTime.median') + if lcp + tr + th(colspan='2') Google Web Vitals if fcp tr td First Contentful Paint (FCP) [median] td #{h.time.ms(fcp)} - - lcp = get(d, 'browsertime.pageSummary.statistics.timings.largestContentfulPaint.renderTime.median') if lcp tr td Largest Contentful Paint (LCP) [median] @@ -143,6 +145,8 @@ block content 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} @@ -151,6 +155,13 @@ block content tr td CPU longest task duration td #{h.time.ms(maxLongTask)} + - 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 @@ -194,6 +205,8 @@ block content td Cumulative Layout Shift (CLS) [p75] td #{cruxFCP} if !d.browsertime && d.webpagetest + tr + th(colspan='2') WebPageTest tr td Render (first view) td #{d.webpagetest.pageSummary.data.median.firstView.render}