INP optimization and reporting improvements (#824)

* loaf * textContent * Remove chart img export option * table toggle responsiveness * undo pointerdown * fast date * loafEndTime
HTTPArchive · Mar 14, 2024 · f9e9ee8 · f9e9ee8
1 parent 9dcb60d
commit f9e9ee8
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 38 deletions.
diff --git a/src/js/histogram.js b/src/js/histogram.js
@@ -24,7 +24,7 @@ function histogram(metric, date, options) {
       drawHistogramTable(data, `${metric}-table-desktop`, `${metric}-table-mobile`, options.type);
     }).catch(e => {
       const chart = document.getElementById(`${metric}-chart`);
-      chart.innerText = `Error loading data: ${e}. Try a more recent start date.`;
+      chart.textContent = `Error loading data: ${e}. Try a more recent start date.`;
     });
 }
 

diff --git a/src/js/report.js b/src/js/report.js
@@ -51,11 +51,12 @@ class Report {
         return;
       }
 
-      const isHidden = e.target.innerText.startsWith('Show');
-      Array.from(e.target.parentNode.querySelectorAll('table')).forEach(table => {
+      const toggleButton = e.target;
+      const isHidden = toggleButton.textContent.startsWith('Show');
+      Array.from(toggleButton.parentNode.querySelectorAll('table')).forEach(table => {
         table.classList.toggle('hidden', !isHidden);
       });
-      e.target.innerText = e.target.innerText.replace(isHidden ? 'Show' : 'Hide', isHidden ? 'Hide' : 'Show');
+      toggleButton.textContent = toggleButton.textContent.replace(isHidden ? 'Show' : 'Hide', isHidden ? 'Hide' : 'Show');
     });
   }
 
@@ -122,8 +123,8 @@ class Report {
 
   makeDatesPretty() {
     Array.from(document.querySelectorAll('.yyyy_mm_dd')).forEach(option => {
-      const date = prettyDate(option.innerText.trim());
-      option.innerText = date;
+      const date = prettyDate(option.textContent.trim());
+      option.textContent = date;
     });
   }
 

diff --git a/src/js/send-web-vitals.js b/src/js/send-web-vitals.js
@@ -24,34 +24,35 @@ function sendWebVitals() {
       // 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 => {
-        const totalDuration = script.startTime + script.duration;
-        if (totalDuration > loafAttribution.debug_loaf_script_total_duration) {
-          loafAttribution = {
-            // Stats for the LoAF entry itself.
-            debug_loaf_entry_start_time: loaf.startTime,
-            debug_loaf_entry_end_time: loaf.startTime + loaf.duration,
-            debug_loaf_entry_work_duration: loaf.renderStart ? loaf.renderStart - loaf.startTime : loaf.duration,
-            debug_loaf_entry_render_duration: loaf.renderStart ? loaf.startTime + loaf.duration - 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 ? loaf.startTime + loaf.duration - loaf.styleAndLayoutStart : 0,
-
-            // Stats for the longest script in the LoAF entry.
-            debug_loaf_script_total_duration: totalDuration,
-            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,
-          }
+        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,
         }
       });
     });

diff --git a/src/js/utils.js b/src/js/utils.js
@@ -1,13 +1,20 @@
 export const el = tagName => document.createElement(tagName);
 
+const prettyDateFormatter = new Intl.DateTimeFormat(undefined, {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  timeZone: 'UTC'
+});
+
 export const prettyDate = YYYY_MM_DD => {
   const [YYYY, MM, DD] = YYYY_MM_DD.split('_');
   const d = new Date(Date.UTC(YYYY, MM - 1, DD));
   return getFullDate(d);
 };
 
 export const getFullDate = d => {
-  return d.toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC'});
+  return prettyDateFormatter.format(d);
 }
 
 export const chartExportOptions = {
@@ -22,12 +29,12 @@ export const chartExportOptions = {
         }
         window.open(url, '_blank');
       },
-      text: 'Show Query'
+      text: 'Show query'
     }
   },
   buttons: {
     contextButton: {
-      menuItems: ['showQuery', 'downloadPNG']
+      menuItems: ['showQuery']
     }
   }
 };
@@ -48,11 +55,11 @@ export const drawMetricSummary = (options, client, value, isMedian=true, change=
     metric && metric.classList.add('hidden');
   }
 
-  summary.querySelector('.primary').innerText = value;
+  summary.querySelector('.primary').textContent = value;
 
   if (change) {
     const changeEl = summary.querySelector('.change');
-    changeEl.innerText = formatChange(change);
+    changeEl.textContent = formatChange(change);
     changeEl.classList.remove('good', 'bad', 'neutral'); // Reset the classes.
     changeEl.classList.add(getChangeSentiment(change, options));
   }