diff --git a/lib/plugins/html/templates/url/metrics/inp.pug b/lib/plugins/html/templates/url/metrics/inp.pug index 74d8e6f349..6f22399d65 100644 --- a/lib/plugins/html/templates/url/metrics/inp.pug +++ b/lib/plugins/html/templates/url/metrics/inp.pug @@ -1,11 +1,30 @@ if browsertime.pageinfo && browsertime.pageinfo.interactionToNextPaintInfo!== undefined a#interactionToNextPaint h3 Interaction to Next Paint - p Interaction to Next Paint (INP) is a metric that try to measure responsiveness. It's useful if you are testing user journeys Read more about + p Interaction to Next Paint (INP) is a metric that try to measure responsiveness. It's useful if you are testing user journeys. Read more about a(href='https://web.dev/inp/') Interaction to Next Paint | . .row - p The measured latency was #{h.time.ms(browsertime.pageinfo.interactionToNextPaintInfo.latency)}. And the events that contributed to the latency was: - ul - each entry in browsertime.pageinfo.interactionToNextPaintInfo.entries - li #{entry.name} - #{h.time.ms(entry.duration)} + p The measured latency was #{h.time.ms(browsertime.pageinfo.interactionToNextPaintInfo.latency)}. + table + if timings.largestContentfulPaint.tagName + tr + td + b Event type + td #{browsertime.pageinfo.interactionToNextPaintInfo.eventType} + tr + td + b Element type + td #{browsertime.pageinfo.interactionToNextPaintInfo.tagName} + tr + td + b Element class name + td #{browsertime.pageinfo.interactionToNextPaintInfo.className} + tr + td + b Event target + td #{browsertime.pageinfo.interactionToNextPaintInfo.eventTarget} + tr + td + b Load state when the event happened + td #{browsertime.pageinfo.interactionToNextPaintInfo.loadState}