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

crux: include crux histograms (#4436)

This commit is contained in:
Peter Hedenskog 2025-02-13 22:24:35 +01:00 committed by GitHub
parent 770b181e18
commit 6056a1d3b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
lib/plugins/crux/pug/index.pug
View File

@ -11,7 +11,7 @@ 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', 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 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
@ -118,6 +118,8 @@ if experiences
- 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() {
@ -143,33 +145,35 @@ if experiences
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']}
th #{metrics['first_contentful_paint']}
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)
tr
th #{metrics['largest_contentful_paint']}
th #{metrics['cumulative_layout_shift']}
tr
td(data-title=metrics['largest_contentful_paint'])
.ct-chart(id='chartLCP' + experience + formFactor)
td(data-title=metrics['cumulative_layout_shift'])
.ct-chart(id='chartCLS' + experience + formFactor)
tr
th #{metrics['interaction_to_next_paint']}
th
th #{metrics['cumulative_layout_shift']}
tr
td(data-title=metrics['interaction_to_next_paint'])
.ct-chart(id='chartITNP' + experience + formFactor)
td
.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.

5
lib/plugins/crux/repackage.js
View File

@ -65,7 +65,10 @@ export function repackage(cruxResult) {
if (cruxResult.record.metrics.round_trip_time) {
result.ROUND_TRIP_TIME_MS = {
p75: cruxResult.record.metrics.round_trip_time.percentiles.p75
p75: cruxResult.record.metrics.round_trip_time.percentiles.p75,
low: cruxResult.record.metrics.round_trip_time.histogram[0].density,
medium: cruxResult.record.metrics.round_trip_time.histogram[1].density,
high: cruxResult.record.metrics.round_trip_time.histogram[2].density
};
}