Track FPP

csswizardry · csswizardry · commit fb80caf47878 · 2025-11-12T13:24:06.000Z
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,4 +1,4 @@
-<script>performance.mark('headStart');</script>
+<script>performance.mark('HEAD_Start');</script>
 <meta charset=UTF-8>
 <meta name=viewport content="width=device-width, minimum-scale=1.0">
 
@@ -50,7 +50,7 @@
   //# sourceURL=debugbear.inline.js
 </script>
 
-<script>performance.mark('cssStart');</script>
+<script>performance.mark('CSS_Start');</script>
 <style>
 
   {% include css/csswizardry.min.css %}
@@ -63,11 +63,11 @@
 
 </style>
 <script>
-  performance.mark('cssEnd');
+  performance.mark('CSS_End');
 
-  performance.measure('cssTime', {
-    start: 'cssStart',
-    end: 'cssEnd',
+  performance.measure('CSS_Time', {
+    start: 'CSS_Start',
+    end: 'CSS_End',
     detail: {
       devtools: {
         dataType: 'track-entry',
@@ -163,11 +163,11 @@
 {% endif %}
 
 <script>
-  performance.mark('headEnd');
+  performance.mark('HEAD_End');
 
-  performance.measure('headTime', {
-    start: 'headStart',
-    end: 'headEnd',
+  performance.measure('HEAD_Time', {
+    start: 'HEAD_Start',
+    end: 'HEAD_End',
     detail: {
       devtools: {
         dataType: 'track-entry',
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=0003 type=module></script>
+  <script src=/js/obs.speedcurve.js?v=0004 type=module></script>
diff --git a/js/obs.speedcurve.js b/js/obs.speedcurve.js
@@ -72,5 +72,15 @@
     }
   }
 
+  /**
+   * 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 });
 
 })();

Original file line number	Diff line number	Diff line change
`@@ -72,5 +72,15 @@`
`72`	`72`	`}`
`73`	`73`	`}`
`74`	`74`
	`75`	`+ /**`
	`76`	`+ * Compute new ‘First Potential Paint’ (FPP) metric. This is the time,`
	`77`	`+ * relative to navigation start, at which the browser finished parsing the`
	`78`	+ * `<head>` and could potentially start rendering the `<body>`.
	`79`	`+ */`
	`80`	`+ const navEntry = performance.getEntriesByType('navigation')[0];`
	`81`	`+ const headEndMark = performance.getEntriesByName('HEAD_End')[0];`
	`82`	`+ const fpp = headEndMark.startTime - navEntry.startTime;`
	`83`	+ // Assign FPP to a new `measure`.
	`84`	`+ performance.measure('fpp', { start: navEntry.startTime, end: headEndMark.startTime });`
`75`	`85`
`76`	`86`	`})();`