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..56716892 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 usually 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,9 +143,6 @@ 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);
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 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <meta http-equiv="origin-trial" content="AqqBKXKVFUu6Op5aphalxMRl8CECiZ0BVlee+zWMM1E9R6oLnNQPRIXd5F8gEYxahMwEzEjOYKzA3Nf6jIc08AEAAAB0eyJvcmlnaW4iOiJodHRwczovL2h0dHBhcmNoaXZlLm9yZzo0NDMiLCJmZWF0dXJlIjoiTG9uZ0FuaW1hdGlvbkZyYW1lVGltaW5nIiwiZXhwaXJ5IjoxNzE2OTQwNzk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
{% block head %}
<title>{% block title %}HTTP Archive{% endblock %}</title>