Add safe check for missing CRUX data
This commit is contained in:
soulgalore
parent
bcd576bc35
commit
b1af7857d0
|
|
@ -14,108 +14,111 @@ mixin sizeCell(title, size)
|
|||
- const metrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)',experimental_interaction_to_next_paint: 'Interaction to next paint (INP)', experimental_time_to_first_byte: 'Time to first byte (TTFB)'};
|
||||
- const experiences = ['loadingExperience','originLoadingExperience'];
|
||||
|
||||
small
|
||||
||
|
||||
if experiences
|
||||
small
|
||||
||
|
||||
each experience in experiences
|
||||
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
|
||||
each formFactor in Object.keys(crux[experience])
|
||||
a(href='#' + experience + '-' + formFactor) #{experience} #{formFactor} |
|
||||
| |
|
||||
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.
|
||||
|
||||
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}
|
||||
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)}
|
||||
|
||||
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 FIDs = [Number(get(crux, `${cruxus}.first_input_delay.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.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}.experimental_interaction_to_next_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.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('#chartFID#{experience + formFactor}', [#{FIDs}], ['Fast: #{FIDs[0]}%', 'Moderate #{FIDs[1]}%', 'Slow: #{FIDs[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]}%']);
|
||||
|
||||
|
||||
});
|
||||
.responsive
|
||||
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}
|
||||
table
|
||||
tr
|
||||
th #{metrics['first_contentful_paint']}
|
||||
th #{metrics['largest_contentful_paint']}
|
||||
th #{metrics['first_input_delay']}
|
||||
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)
|
||||
td(data-title=metrics['first_input_delay'])
|
||||
.ct-chart(id='chartFID' + experience + formFactor)
|
||||
tr
|
||||
th #{metrics['cumulative_layout_shift']}
|
||||
th #{metrics['experimental_interaction_to_next_paint']}
|
||||
th #{metrics['experimental_time_to_first_byte']}
|
||||
tr
|
||||
td(data-title=metrics['cumulative_layout_shift'])
|
||||
.ct-chart(id='chartCLS' + experience + formFactor)
|
||||
td(data-title=metrics['experimental_interaction_to_next_paint'])
|
||||
.ct-chart(id='chartITNP' + experience + formFactor)
|
||||
td(data-title=metrics['experimental_time_to_first_byte'])
|
||||
.ct-chart(id='chartTTFB' + experience + formFactor)
|
||||
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)}
|
||||
|
||||
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 FIDs = [Number(get(crux, `${cruxus}.first_input_delay.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_input_delay.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}.experimental_interaction_to_next_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.experimental_interaction_to_next_paint.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('#chartFID#{experience + formFactor}', [#{FIDs}], ['Fast: #{FIDs[0]}%', 'Moderate #{FIDs[1]}%', 'Slow: #{FIDs[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]}%']);
|
||||
|
||||
|
||||
});
|
||||
.responsive
|
||||
table
|
||||
tr
|
||||
th #{metrics['first_contentful_paint']}
|
||||
th #{metrics['largest_contentful_paint']}
|
||||
th #{metrics['first_input_delay']}
|
||||
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)
|
||||
td(data-title=metrics['first_input_delay'])
|
||||
.ct-chart(id='chartFID' + experience + formFactor)
|
||||
tr
|
||||
th #{metrics['cumulative_layout_shift']}
|
||||
th #{metrics['experimental_interaction_to_next_paint']}
|
||||
th #{metrics['experimental_time_to_first_byte']}
|
||||
tr
|
||||
td(data-title=metrics['cumulative_layout_shift'])
|
||||
.ct-chart(id='chartCLS' + experience + formFactor)
|
||||
td(data-title=metrics['experimental_interaction_to_next_paint'])
|
||||
.ct-chart(id='chartITNP' + experience + formFactor)
|
||||
td(data-title=metrics['experimental_time_to_first_byte'])
|
||||
.ct-chart(id='chartTTFB' + experience + formFactor)
|
||||
else
|
||||
p No data availible in the Chrome User Experience report.
|
||||
Loading…
Reference in New Issue