Upgrade to web-vitals v4 (#856)

* Upgrade to web-vitals v4 * rm console log * Update src/js/send-web-vitals.js Co-authored-by: Barry Pollard <[email protected]> --------- Co-authored-by: Barry Pollard <[email protected]>
HTTPArchive · May 20, 2024 · f06d163 · f06d163
1 parent aceb456
commit f06d163
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -1,60 +1,45 @@
 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 {};
     }
 
     let loafAttribution = {
       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
@@ -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>