From acab4cd37a7bd0c77cd6722f487d1f349daeaa71 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Wed, 15 May 2024 10:10:32 -0400 Subject: [PATCH 1/3] Upgrade to web-vitals v4 --- package-lock.json | 14 +++--- package.json | 2 +- src/js/send-web-vitals.js | 98 ++++++++++++++++----------------------- templates/base.html | 1 - 4 files changed, 47 insertions(+), 68 deletions(-) diff --git a/package-lock.json b/package-lock.json index 54087612..c7e54c0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "node-fetch": "3.3.2", "recursive-readdir": "2.2.3", "run-script-os": "1.1.6", - "web-vitals": "3.5.2", + "web-vitals": "4.0.0", "webpack": "5.91.0", "webpack-cli": "5.1.4", "xml-js": "1.6.11" @@ -1520,9 +1520,9 @@ } }, "node_modules/web-vitals": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz", - "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.0.0.tgz", + "integrity": "sha512-8wQd4jkwFRwY5q3yAmHZAJ5MjnKR1vRACK+g2OEC8nUqi0WOxBrXfOxGNlJ+QtxzzSn/TkQO58wkW0coE68n0Q==", "dev": true }, "node_modules/webpack": { @@ -2802,9 +2802,9 @@ "dev": true }, "web-vitals": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz", - "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.0.0.tgz", + "integrity": "sha512-8wQd4jkwFRwY5q3yAmHZAJ5MjnKR1vRACK+g2OEC8nUqi0WOxBrXfOxGNlJ+QtxzzSn/TkQO58wkW0coE68n0Q==", "dev": true }, "webpack": { diff --git a/package.json b/package.json index 2386ce9b..a6dbe3ce 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "node-fetch": "3.3.2", "recursive-readdir": "2.2.3", "run-script-os": "1.1.6", - "web-vitals": "3.5.2", + "web-vitals": "4.0.0", "webpack": "5.91.0", "webpack-cli": "5.1.4", "xml-js": "1.6.11" diff --git a/src/js/send-web-vitals.js b/src/js/send-web-vitals.js index 33abfb33..52ab56e8 100644 --- a/src/js/send-web-vitals.js +++ b/src/js/send-web-vitals.js @@ -1,17 +1,7 @@ function sendWebVitals() { function getLoafAttribution(attribution) { - if (!attribution) { - return {}; - } - - const entry = attribution.eventEntry; - - if (!entry) { - return {}; - } - - if (!PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) { + if (!attribution?.longAnimationFrameEntries) { return {}; } @@ -19,42 +9,37 @@ function sendWebVitals() { debug_loaf_script_total_duration: 0 }; - const longAnimationFrames = performance.getEntriesByType('long-animation-frame'); - longAnimationFrames.filter(loaf => { - // LoAFs that intersect with the event. - return entry.startTime < (loaf.startTime + loaf.duration) && loaf.startTime < (entry.startTime + entry.duration); - }).forEach(loaf => { - const loafEndTime = loaf.startTime + loaf.duration; - loaf.scripts.forEach(script => { - if (script.duration <= loafAttribution.debug_loaf_script_total_duration) { - return; - } - loafAttribution = { - // Stats for the LoAF entry itself. - debug_loaf_entry_start_time: loaf.startTime, - debug_loaf_entry_end_time: loafEndTime, - debug_loaf_entry_work_duration: loaf.renderStart ? loaf.renderStart - loaf.startTime : loaf.duration, - debug_loaf_entry_render_duration: loaf.renderStart ? loafEndTime - loaf.renderStart : 0, - debug_loaf_entry_total_forced_style_and_layout_duration: loaf.scripts.reduce((sum, script) => sum + script.forcedStyleAndLayoutDuration, 0), - debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart ? loaf.styleAndLayoutStart - loaf.renderStart : 0, - debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart ? loafEndTime - loaf.styleAndLayoutStart : 0, - - // Stats for the longest script in the LoAF entry. - debug_loaf_script_total_duration: script.duration, - debug_loaf_script_compile_duration: script.executionStart - script.startTime, - debug_loaf_script_exec_duration: script.startTime + script.duration - script.executionStart, - debug_loaf_script_source: script.sourceLocation || script.invoker || script.name, // TODO: remove after Chrome 123 - debug_loaf_script_type: script.invokerType || script.type, // TODO: remove `|| script.type` after Chrome 123 - // New in Chrome 122/123 (will be null until then) - debug_loaf_script_invoker: script.invoker, - debug_loaf_script_source_url: script.sourceURL, - debug_loaf_script_source_function_name: script.sourceFunctionName, - debug_loaf_script_source_char_position: script.sourceCharPosition, - - // LoAF metadata. - debug_loaf_meta_length: longAnimationFrames.length, - } - }); + // The last LoAF entry is the most relevant. + const loaf = attribution.longAnimationFrameEntries.at(-1) + const loafEndTime = loaf.startTime + loaf.duration; + loaf.scripts.forEach(script => { + if (script.duration <= loafAttribution.debug_loaf_script_total_duration) { + return; + } + loafAttribution = { + // Stats for the LoAF entry itself. + debug_loaf_entry_start_time: loaf.startTime, + debug_loaf_entry_end_time: loafEndTime, + debug_loaf_entry_work_duration: loaf.renderStart ? loaf.renderStart - loaf.startTime : loaf.duration, + debug_loaf_entry_render_duration: loaf.renderStart ? loafEndTime - loaf.renderStart : 0, + debug_loaf_entry_total_forced_style_and_layout_duration: loaf.scripts.reduce((sum, script) => sum + script.forcedStyleAndLayoutDuration, 0), + debug_loaf_entry_pre_layout_duration: loaf.styleAndLayoutStart ? loaf.styleAndLayoutStart - loaf.renderStart : 0, + debug_loaf_entry_style_and_layout_duration: loaf.styleAndLayoutStart ? loafEndTime - loaf.styleAndLayoutStart : 0, + + // Stats for the longest script in the LoAF entry. + debug_loaf_script_total_duration: script.duration, + debug_loaf_script_compile_duration: script.executionStart - script.startTime, + debug_loaf_script_exec_duration: script.startTime + script.duration - script.executionStart, + debug_loaf_script_forced_style_and_layout_duration: script.forcedStyleAndLayoutDuration, + debug_loaf_script_type: script.invokerType, + debug_loaf_script_invoker: script.invoker, + debug_loaf_script_source_url: script.sourceURL, + debug_loaf_script_source_function_name: script.sourceFunctionName, + debug_loaf_script_source_char_position: script.sourceCharPosition, + + // LoAF metadata. + debug_loaf_meta_length: attribution.longAnimationFrameEntries.length, + } }); if (!loafAttribution.debug_loaf_script_total_duration) { @@ -91,18 +76,15 @@ function sendWebVitals() { case 'INP': const loafAttribution = getLoafAttribution(attribution); overrides = { - debug_event: attribution.eventType, - debug_time: Math.round(attribution.eventTime), + debug_event: attribution.interactionType, + debug_time: Math.round(attribution.interactionTime), debug_load_state: attribution.loadState, - debug_target: attribution.eventTarget || '(not set)', + debug_target: attribution.interactionTarget || '(not set)', + debug_interaction_delay: Math.round(attribution.inputDelay), + debug_processing_duration: Math.round(attribution.processingDuration), + debug_presentation_delay: Math.round(attribution.presentationDelay), ...loafAttribution }; - if (!attribution.eventEntry) { - break; - } - overrides.debug_interaction_delay = Math.round(attribution.eventEntry.processingStart - attribution.eventEntry.startTime); - overrides.debug_processing_time = Math.round(attribution.eventEntry.processingEnd - attribution.eventEntry.processingStart); - overrides.debug_presentation_delay = Math.round(attribution.eventEntry.duration + attribution.eventEntry.startTime - attribution.eventEntry.processingEnd); break; case 'LCP': overrides = { @@ -161,11 +143,9 @@ function sendWebVitals() { prefers_reduced_motion: prefersReducedMotion, prefers_color_scheme: prefersColorScheme, navigation_type: navigationType, - - // TODO(rviscomi): Remove this after A/B testing the INP optimization. - debug_version: 'defer-chart', }, overrides); + console.log(name, {params}) gtag('event', name, params); } diff --git a/templates/base.html b/templates/base.html index dbedc442..956b0b7a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,7 +3,6 @@ - {% block head %} {% block title %}HTTP Archive{% endblock %} From 809ccbd59ebf5521c3a8cce97b29c33043d792b1 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Wed, 15 May 2024 10:14:17 -0400 Subject: [PATCH 2/3] rm console log --- src/js/send-web-vitals.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/send-web-vitals.js b/src/js/send-web-vitals.js index 52ab56e8..b03ded3a 100644 --- a/src/js/send-web-vitals.js +++ b/src/js/send-web-vitals.js @@ -145,7 +145,6 @@ function sendWebVitals() { navigation_type: navigationType, }, overrides); - console.log(name, {params}) gtag('event', name, params); } From da1cd1f6a99a6dd9e3e02ff64b7a1078a45a9d79 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Mon, 20 May 2024 15:22:21 -0400 Subject: [PATCH 3/3] Update src/js/send-web-vitals.js Co-authored-by: Barry Pollard --- src/js/send-web-vitals.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/send-web-vitals.js b/src/js/send-web-vitals.js index b03ded3a..56716892 100644 --- a/src/js/send-web-vitals.js +++ b/src/js/send-web-vitals.js @@ -9,7 +9,7 @@ function sendWebVitals() { debug_loaf_script_total_duration: 0 }; - // The last LoAF entry is the most relevant. + // The last LoAF entry is usually the most relevant. const loaf = attribution.longAnimationFrameEntries.at(-1) const loafEndTime = loaf.startTime + loaf.duration; loaf.scripts.forEach(script => {