Refactor FPP to a similar pattern to TTLB

csswizardry · csswizardry · commit de7486d4e87b · 2025-11-12T14:13:11.000Z
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -102,4 +102,4 @@
     //# sourceURL=sw.inline.js
   </script>
 
-  <script src=/js/obs.speedcurve.js?v=0004 type=module></script>
+  <script src=/js/obs.speedcurve.js?v=0005 type=module></script>
diff --git a/js/obs.speedcurve.js b/js/obs.speedcurve.js
@@ -72,15 +72,14 @@
     }
   }
 
-  /**
-   * Compute new ‘First Potential Paint’ (FPP) metric. This is the time,
-   * relative to navigation start, at which the browser finished parsing the
-   * `<head>` and could potentially start rendering the `<body>`.
-   */
-  const navEntry = performance.getEntriesByType('navigation')[0];
-  const headEndMark = performance.getEntriesByName('HEAD_End')[0];
-  const fpp = headEndMark.startTime - navEntry.startTime;
-  // Assign FPP to a new `measure`.
-  performance.measure('fpp', { start: navEntry.startTime, end: headEndMark.startTime });
+  // First Potential Paint (FPP)
+  if (navigation.startTime >= 0) {
+    const headEnd = performance.getEntriesByName('HEAD_End')[0];
+    const fpp = Math.round(headEnd.startTime - navigation.startTime);
+    if (Number.isFinite(fpp) && fpp >= 0) {
+      LUX.addData('fpp', fpp);
+    }
+  }
+
 
 })();
