sitespeed.io/lib/plugins/html/templates/toplist.pug

64 lines
2.5 KiB
Plaintext

extends ./layout.pug
include _tableMixins
mixin rows(assets, showTiming)
each asset in assets
tr
td.url.assetsurl(data-title='URL')
a(href=asset.url)= h.shortAsset(asset.url)
|  
a(href=asset.runPage + '.html') ↺
+durationCell('last modified',asset.lastModification)
+durationCell('cache time',asset.cacheTime)
+kbSizeCell('transfer', asset.transferSize)
+kbSizeCell('size', asset.contentSize)
if showTiming
+numberCell('timing', asset.totalTime.toFixed(0))
block content
include runInfo
if (assetsBySize)
- const topLists = ['javascript', 'image', 'css', 'html'];
- const contentTypeNames = {javascript: 'JavaScript', image: 'image' , css: 'CSS', html : 'HTML'}
ul
li.group-item.active Quick links
each type in topLists
if (assetsBySize[type] && assetsBySize[type].length > 1)
li.group-item
a(href='#' + type) Largest #{contentTypeNames[type]} files
li.group-item
a(href='#slowest') Slowest responses
if options.firstParty
li.group-item
a(href='#slowestThirdParty') Slowest third party responses
li.group-item
a(href='#largestThirdParty') Largest third party responses
each type in topLists
if (assetsBySize[type] && assetsBySize[type].length > 1)
h3(id=type) Largest #{contentTypeNames[type]} files
.responsive
table(data-sortable)
+rowHeading(['url', 'time since last modified', 'cache time', 'transfer (kb)', 'size (kb)'])
+rows(assetsBySize[type], false)
h3 Slowest responses
p These are the assets that took the longest time to download.
.responsive
table(data-sortable, id='slowest')
+rowHeading(['url', 'time since last modified', 'cache time', 'transfer (kb)', 'size (kb)', 'timing (ms)'])
+rows(slowestAssets, true)
if options.firstParty
h3 3rd party largest responses
.responsive
table(data-sortable, id='largestThirdParty')
+rowHeading(['url', 'time since last modified', 'cache time', 'transfer (kb)', 'size (kb)'])
+rows(thirdPartyAssetsBySize, false)
h3 3rd party slowest responses
p These are the 3rd party assets that took the longest time to download.
.responsive
table(data-sortable, id='slowestThirdParty')
+rowHeading(['url', 'time since last modified', 'cache time', 'transfer (kb)', 'size (kb)', 'timing (ms)'])
+rows(thirdPartySlowestAssets, true)