219 lines
12 KiB
Plaintext
219 lines
12 KiB
Plaintext
mixin rowHeading(items)
|
||
thead
|
||
tr
|
||
each item in items
|
||
th= item
|
||
|
||
mixin numberCell(title, number)
|
||
td.number(data-title=title)= number
|
||
|
||
mixin sizeCell(title, size)
|
||
td.number(data-title=title, data-value= size)= h.size.format(size)
|
||
|
||
- const crux = pageInfo.data.crux.pageSummary;
|
||
- const metrics = {round_trip_time: 'Round Trip Time (RTT)', experimental_time_to_first_byte: 'Time To First Byte (TTFB)', first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)', interaction_to_next_paint: 'Interaction to Next Paint (INP)'};
|
||
- const experiences = ['loadingExperience','originLoadingExperience'];
|
||
|
||
if experiences
|
||
small
|
||
||
|
||
each experience in experiences
|
||
if crux[experience]
|
||
each formFactor in Object.keys(crux[experience])
|
||
a(href='#' + experience + '-' + formFactor) #{experience} #{formFactor} |
|
||
| |
|
||
|
||
a#crux
|
||
h2 CrUx
|
||
p.small Chrome User Experience Report (CrUx) is powered by real user measurement across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled and is using Chrome.
|
||
|
||
p.small The CrUx data has four different buckets (form factor) depending on device: DESKTOP, PHONE, TABLET and ALL. You can choose which data to get with
|
||
code --crux.formFactor
|
||
| .
|
||
|
||
each experience in experiences
|
||
if experience === 'loadingExperience' && crux[experience]
|
||
p Over the last 30 days, this is the field data for this page for Chrome users.
|
||
else if crux[experience]
|
||
h4 All pages served from this origin
|
||
p This is a summary of all pages served from this origin over the last 30 days for Chrome users.
|
||
|
||
if crux[experience]
|
||
each formFactor in Object.keys(crux[experience])
|
||
if (crux[experience][formFactor] && crux[experience][formFactor].data)
|
||
a(id=experience + '-' + formFactor)
|
||
h3 Form Factor #{formFactor}
|
||
- const collectionPeriod = crux[experience][formFactor].data.record.collectionPeriod;
|
||
p Data collected between #{collectionPeriod.firstDate.year}-#{collectionPeriod.firstDate.month}-#{collectionPeriod.firstDate.day} and #{collectionPeriod.lastDate.year}-#{collectionPeriod.lastDate.month}-#{collectionPeriod.lastDate.day}
|
||
table
|
||
thead
|
||
tr
|
||
th Metric
|
||
th Value
|
||
tbody
|
||
each name, key in metrics
|
||
if crux[experience][formFactor].data.record.metrics[key]
|
||
tr
|
||
td #{name} 75 percentile
|
||
td #{key.indexOf('cumulative') > -1 ? crux[experience][formFactor].data.record.metrics[key].percentiles.p75 : h.time.ms(crux[experience][formFactor].data.record.metrics[key].percentiles.p75)}
|
||
|
||
if crux[experience][formFactor].FORM_FACTORS_FRACTIONS
|
||
h4 Form factors
|
||
table
|
||
thead
|
||
tr
|
||
th Form factor
|
||
th Value
|
||
tbody
|
||
tr
|
||
td Desktop
|
||
td #{Number(crux[experience][formFactor].FORM_FACTORS_FRACTIONS.desktop *100).toFixed(2)}%
|
||
tr
|
||
td Phone
|
||
td #{Number(crux[experience][formFactor].FORM_FACTORS_FRACTIONS.phone *100).toFixed(2)}%
|
||
tr
|
||
td Tablet
|
||
td #{Number(crux[experience][formFactor].FORM_FACTORS_FRACTIONS.tablet *100).toFixed(2)}%
|
||
|
||
|
||
if crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS
|
||
h4 Navigation types
|
||
table
|
||
thead
|
||
tr
|
||
th Navigation type
|
||
th Value
|
||
tbody
|
||
tr
|
||
td Navigate
|
||
td #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.navigate *100).toFixed(2)}%
|
||
tr
|
||
td Navigate cache
|
||
td #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.navigate_cache *100).toFixed(2)}%
|
||
tr
|
||
td Reload
|
||
td #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.reload *100).toFixed(2)}%
|
||
tr
|
||
td Restore
|
||
td #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.restore *100).toFixed(2)}%
|
||
tr
|
||
td Back/Forward
|
||
td #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.back_forward *100).toFixed(2)}%
|
||
tr
|
||
td Back/Forward cache
|
||
td #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.back_forward_cache *100).toFixed(2)}%
|
||
tr
|
||
td Prerender
|
||
td #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.prerender *100).toFixed(2)}%
|
||
|
||
if crux[experience][formFactor].LCP_RESOURCE_TYPES_FRACTIONS
|
||
h4 Largest Contentful Paint resource type
|
||
table
|
||
thead
|
||
tr
|
||
th Element type
|
||
th Value
|
||
tbody
|
||
tr
|
||
td Text
|
||
td #{Number(crux[experience][formFactor].LCP_RESOURCE_TYPES_FRACTIONS.text *100).toFixed(2)}%
|
||
tr
|
||
td Image
|
||
td #{Number(crux[experience][formFactor].LCP_RESOURCE_TYPES_FRACTIONS.image *100).toFixed(2)}%
|
||
h4 Largest Contentful Paint image extra information
|
||
table
|
||
thead
|
||
tr
|
||
th Metric
|
||
th 75 p
|
||
tbody
|
||
tr
|
||
td Largest Contentful Paint
|
||
td #{h.time.ms(crux[experience][formFactor].LARGEST_CONTENTFUL_PAINT_MS.p75)}
|
||
if crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DURATION_MS
|
||
tr
|
||
td Image load duration
|
||
td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DURATION_MS.p75)}
|
||
if crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DELAY_MS
|
||
tr
|
||
td Image load delay
|
||
td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DELAY_MS.p75)}
|
||
if crux[experience][formFactor].LCP_IMAGE_ELEMENT_RENDER_DELAY_MS
|
||
tr
|
||
td Image render delay
|
||
td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_ELEMENT_RENDER_DELAY_MS.p75)}
|
||
if crux[experience][formFactor].LCP_IMAGE_TTFB_MS
|
||
tr
|
||
td Image TTFB
|
||
td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_TTFB_MS.p75)}
|
||
h4 Distribution
|
||
- let cruxus = `${experience}.${formFactor}.data.record.metrics`;
|
||
- let FCPs = [Number(get(crux, `${cruxus}.first_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)];
|
||
|
||
- let LCPs = [Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.largest_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)];
|
||
|
||
- let CLSs = [Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.cumulative_layout_shift.histogram[2].density`, 0)*100).toFixed(2)];
|
||
|
||
- let TTFBs = [Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_time_to_first_byte.histogram[2].density`, 0)*100).toFixed(2)];
|
||
|
||
- let ITNPs = [Number(get(crux, `${cruxus}.interaction_to_next_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.interaction_to_next_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.interaction_to_next_paint.histogram[2].density`, 0)*100).toFixed(2)];
|
||
|
||
- let RTTs = [Number(get(crux, `${cruxus}.round_trip_time.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.round_trip_time.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.round_trip_time.histogram[2].density`, 0)*100).toFixed(2)];
|
||
|
||
script(type='text/javascript').
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
|
||
function drawPie(id, series, labels) {
|
||
new Chartist.Pie(id, {
|
||
series,
|
||
labels,
|
||
}, {
|
||
showLabel: false,
|
||
plugins: [
|
||
Chartist.plugins.legend(
|
||
{
|
||
clickable: false,
|
||
position: 'bottom'
|
||
}
|
||
)
|
||
]
|
||
});
|
||
}
|
||
|
||
drawPie('#chartFCP#{experience + formFactor}', [#{FCPs}], ['Fast: #{FCPs[0]}%', 'Moderate #{FCPs[1]}%', 'Slow: #{FCPs[2]}%']);
|
||
drawPie('#chartLCP#{experience + formFactor}', [#{LCPs}], ['Fast: #{LCPs[0]}%', 'Moderate #{LCPs[1]}%', 'Slow: #{LCPs[2]}%']);
|
||
drawPie('#chartCLS#{experience + formFactor}', [#{CLSs}], ['Good: #{CLSs[0]}%', 'Need improvement: #{CLSs[1]}%', 'Poor: #{CLSs[2]}%']);
|
||
drawPie('#chartTTFB#{experience + formFactor}', [#{TTFBs}], ['Good: #{TTFBs[0]}%', 'Need improvement: #{TTFBs[1]}%', 'Poor: #{TTFBs[2]}%']);
|
||
drawPie('#chartITNP#{experience + formFactor}', [#{ITNPs}], ['Good: #{ITNPs[0]}%', 'Need improvement: #{ITNPs[1]}%', 'Poor: #{ITNPs[2]}%']);
|
||
drawPie('#chartRTT#{experience + formFactor}', [#{RTTs}], ['Low: #{RTTs[0]}%', 'Medium: #{RTTs[1]}%', 'High: #{RTTs[2]}%']);
|
||
|
||
});
|
||
.responsive
|
||
table
|
||
tr
|
||
th #{metrics['round_trip_time']}
|
||
th #{metrics['experimental_time_to_first_byte']}
|
||
tr
|
||
td(data-title=metrics['round_trip_time'])
|
||
.ct-chart(id='chartRTT' + experience + formFactor)
|
||
td(data-title=metrics['experimental_time_to_first_byte'])
|
||
.ct-chart(id='chartTTFB' + experience + formFactor)
|
||
tr
|
||
th #{metrics['first_contentful_paint']}
|
||
th #{metrics['largest_contentful_paint']}
|
||
tr
|
||
td(data-title=metrics['first_contentful_paint'])
|
||
.ct-chart(id='chartFCP' + experience + formFactor)
|
||
td(data-title=metrics['largest_contentful_paint'])
|
||
.ct-chart(id='chartLCP' + experience + formFactor)
|
||
tr
|
||
th #{metrics['interaction_to_next_paint']}
|
||
th #{metrics['cumulative_layout_shift']}
|
||
tr
|
||
td(data-title=metrics['interaction_to_next_paint'])
|
||
.ct-chart(id='chartITNP' + experience + formFactor)
|
||
td(data-title=metrics['cumulative_layout_shift'])
|
||
.ct-chart(id='chartCLS' + experience + formFactor)
|
||
|
||
else
|
||
p No data availible in the Chrome User Experience report. |