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

Show more valuable info for LCP (#3367)

This commit is contained in:
Peter Hedenskog 2021-05-02 12:21:22 +02:00 committed by GitHub
parent b96e633175
commit 8ac9c36eb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -141,11 +141,11 @@ if browsertime
if (timings.largestContentfulPaint)
tr
td
a(href=baseHelpURL + 'largestContentfulPaint') Largest Contentful Paint (LCP)
a(href='#largestContentfulPaint') Largest Contentful Paint (LCP)
td.number #{h.time.ms(Math.max(timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.renderTime, timings.largestContentfulPaint.loadTime,timings.largestContentfulPaint.loadTime))}
tr
td
a(href=baseHelpURL + 'cumulativeLayoutShift') Cumulative Layout Shift (CLS)
a(href='#cumulativeLayoutShift') Cumulative Layout Shift (CLS)
td.number #{browsertime.pageinfo.cumulativeLayoutShift.toFixed(2)}
if browsertime.timings.firstInput !== undefined
tr

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

@ -1,41 +1,53 @@
if timings.largestContentfulPaint
a#largestContentfulPaint
h3 Largest Contentful Paint
p Read more about
a#largestContentfulPaint
h3 Largest Contentful Paint
p When in time the page main content is rendered (collected using the Largest Contentful Paint API). Read more about
a(href='https://web.dev/largest-contentful-paint') Largest Contentful Paint
| .
table
tr
if timings.largestContentfulPaint.id !== ''
th Id
if timings.largestContentfulPaint.url !== ''
th URL
th Image
else
th Element
if timings.largestContentfulPaint.tagName
th Tag
th Render time
th Load time
if timings.largestContentfulPaint.size
th Size
tr
if timings.largestContentfulPaint.id !== ''
td #{timings.largestContentfulPaint.id}
if timings.largestContentfulPaint.url !== ''
td
a(href=timings.largestContentfulPaint.url) #{timings.largestContentfulPaint.url}
td
a(href=timings.largestContentfulPaint.url)
img.screenshot(src=timings.largestContentfulPaint.url, alt='LCP', style='width:200px')
else
td
- const screenshotNo = medianRun ? medianRun.runIndex : 1
- const screenshotName = 'data/screenshots/' + screenshotNo + '/largestContentfulPaint.' + screenShotType
a(href=screenshotName)
img.screenshot(src=screenshotName, alt='LCP', style='width:200px')
if timings.largestContentfulPaint.tagName
td #{timings.largestContentfulPaint.tagName}
td #{h.time.ms(timings.largestContentfulPaint.renderTime)}
td #{h.time.ms(timings.largestContentfulPaint.loadTime)}
td #{h.size.format(timings.largestContentfulPaint.size)}
.row
.one-half.column
table
if timings.largestContentfulPaint.tagName
tr
td
b Element/tag
td #{timings.largestContentfulPaint.tagName}
tr
td
b Render time
td #{h.time.ms(timings.largestContentfulPaint.renderTime)}
if timings.largestContentfulPaint.id !== ''
tr
td
b Element id
td #{timings.largestContentfulPaint.id}
tr
td
b Load time
td #{h.time.ms(timings.largestContentfulPaint.loadTime)}
if timings.largestContentfulPaint.url !== ''
tr
td
b URL
td
a(href=timings.largestContentfulPaint.url) #{h.shortAsset(timings.largestContentfulPaint.url)}
tr
td(colspan='2')
img.screenshot(src=timings.largestContentfulPaint.url, alt='LCP', style='width:200px')
if timings.largestContentfulPaint.size
tr
td
b Size (width*height)
td #{timings.largestContentfulPaint.size}
tr
td(colspan='2')
b DOM path
tr
td(colspan='2')
#{timings.largestContentfulPaint.domPath}
.one-half.column
- const screenshotNo = medianRun ? medianRun.runIndex : 1
- const screenshotName = 'data/screenshots/' + screenshotNo + '/largestContentfulPaint.' + screenShotType
a(href=screenshotName)
img.screenshot(src=screenshotName, alt='LCP', style='max-width:100%; height: auto')
p.small The largest contentful paint is highlighted in the image. If no element is highlighted the element was removed before the screenshot or the LCP API couldn't find the element.