diff --git a/lib/plugins/crux/pug/index.pug b/lib/plugins/crux/pug/index.pug index 439c46d8b2..ec35eb4f8c 100644 --- a/lib/plugins/crux/pug/index.pug +++ b/lib/plugins/crux/pug/index.pug @@ -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 = {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 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)', interaction_to_next_paint: 'Interaction to next paint (INP)', experimental_time_to_first_byte: 'Time to first byte (TTFB)'}; - const experiences = ['loadingExperience','originLoadingExperience']; if experiences @@ -69,7 +69,7 @@ if experiences - 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)]; + - 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)]; script(type='text/javascript'). document.addEventListener("DOMContentLoaded", function() { @@ -114,12 +114,12 @@ if experiences .ct-chart(id='chartFID' + experience + formFactor) tr th #{metrics['cumulative_layout_shift']} - th #{metrics['experimental_interaction_to_next_paint']} + th #{metrics['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']) + td(data-title=metrics['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) diff --git a/lib/plugins/crux/repackage.js b/lib/plugins/crux/repackage.js index 6e19087726..21402b426c 100644 --- a/lib/plugins/crux/repackage.js +++ b/lib/plugins/crux/repackage.js @@ -45,17 +45,16 @@ export function repackage(cruxResult) { }; } - if (cruxResult.record.metrics.experimental_interaction_to_next_paint) { + if (cruxResult.record.metrics.interaction_to_next_paint) { result.INTERACTION_TO_NEXT_PAINT_MS = { - p75: cruxResult.record.metrics.experimental_interaction_to_next_paint - .percentiles.p75, - fast: cruxResult.record.metrics.experimental_interaction_to_next_paint - .histogram[0].density, + p75: cruxResult.record.metrics.interaction_to_next_paint.percentiles.p75, + fast: cruxResult.record.metrics.interaction_to_next_paint.histogram[0] + .density, moderate: - cruxResult.record.metrics.experimental_interaction_to_next_paint - .histogram[1].density, - slow: cruxResult.record.metrics.experimental_interaction_to_next_paint - .histogram[2].density + cruxResult.record.metrics.interaction_to_next_paint.histogram[1] + .density, + slow: cruxResult.record.metrics.interaction_to_next_paint.histogram[2] + .density }; }