Add LCP type to LUX Sidecar

Author: csswizardry

_layouts/default.html

@@ -71,4 +71,4 @@
     }
   </script>
 
-  <script src=/js/obs.speedcurve.js?v=0012 type=module></script>
+  <script src=/js/obs.speedcurve.js?v=0013 type=module></script>

js/obs.speedcurve.js

@@ -40,6 +40,7 @@
   // Keep source identifiers descriptive while limiting their beacon cost.
   const CUSTOM_DATA_KEYS = {
     cpuTier: 'cpu',
+    lcpContentType: 'lcpt',
     fromCache: 'fc',
     contentEncoding: 'ce',
     responseStatus: 'rs',
@@ -66,6 +67,26 @@
     }
   }
 
+  // Record whether the latest Largest Contentful Paint candidate has a URL.
+  if (
+    typeof PerformanceObserver === 'function' &&
+    Array.isArray(PerformanceObserver.supportedEntryTypes) &&
+    PerformanceObserver.supportedEntryTypes.indexOf(
+      'largest-contentful-paint'
+    ) !== -1
+  ) {
+    new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      const entry = entries[entries.length - 1];
+      if (entry) {
+        lux.addData(
+          CUSTOM_DATA_KEYS.lcpContentType,
+          entry.url ? 'image' : 'text'
+        );
+      }
+    }).observe({ type: 'largest-contentful-paint', buffered: true });
+  }
+
   const navigation = performance.getEntriesByType('navigation')[0];
 
   if (!navigation) return;