Updated LCP code snippets to start measuring from activation

Author: kevinfarrugia

pages/CoreWebVitals/LCP-Sub-Parts.mdx

@@ -1,6 +1,6 @@
 ###  Largest Contentful Paint Sub-Parts (LCP)
 
-This script is part of the [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) and appear on the [Optimize Largest Contentful Paint](https://web.dev/i18n/en/optimize-lcp/) post.
+This script is part of the [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) and appear on the [Optimize Largest Contentful Paint](https://web.dev/articles/optimize-lcp) post.
 
 
 #### Snippet
@@ -15,27 +15,33 @@ const LCP_SUB_PARTS = [
 
 new PerformanceObserver((list) => {
   const lcpEntry = list.getEntries().at(-1);
-  const navEntry = performance.getEntriesByType("navigation")[0];
+  const navEntry = getNavigationEntry();
   const lcpResEntry = performance
     .getEntriesByType("resource")
     .filter((e) => e.name === lcpEntry.url)[0];
 
-  const ttfb = navEntry.responseStart;
+  const activationStart = getActivationStart()
+ 
+  const ttfb = Math.max(0, navEntry.responseStart - activationStart);
   const lcpRequestStart = Math.max(
-    ttfb,
-    lcpResEntry ? lcpResEntry.requestStart || lcpResEntry.startTime : 0,
+        ttfb,
+    // Prefer `requestStart` (if TOA is set), otherwise use `startTime`.
+    lcpResEntry
+      ? (lcpResEntry.requestStart || lcpResEntry.startTime) -
+          activationStart
+      : 0,
   );
   const lcpResponseEnd = Math.max(
     lcpRequestStart,
-    lcpResEntry ? lcpResEntry.responseEnd : 0,
+    lcpResEntry ? lcpResEntry.responseEnd - activationStart : 0,
   );
   const lcpRenderTime = Math.max(
     lcpResponseEnd,
-    lcpEntry ? lcpEntry.startTime : 0,
+    lcpEntry.startTime - activationStart,
   );
-
+ 
   LCP_SUB_PARTS.forEach((part) => performance.clearMeasures(part));
-
+ 
   const lcpSubPartMeasures = [
     performance.measure(LCP_SUB_PARTS[0], {
       start: 0,
@@ -54,7 +60,7 @@ new PerformanceObserver((list) => {
       end: lcpRenderTime,
     }),
   ];
-
+ 
   // Log helpful debug information to the console.
   console.log("LCP value: ", lcpRenderTime);
   console.log("LCP element: ", lcpEntry.element, lcpEntry?.url);
@@ -63,9 +69,29 @@ new PerformanceObserver((list) => {
       "LCP sub-part": measure.name,
       "Time (ms)": measure.duration,
       "% of LCP": `${
-        Math.round((1000 * measure.duration) / lcpRenderTime) / 10
+        Math.round(((1000 * measure.duration) / lcpRenderTime) || 0) / 10
       }%`,
     })),
   );
 }).observe({ type: "largest-contentful-paint", buffered: true });
+
+function getActivationStart() {
+  const navEntry = getNavigationEntry();
+  return (navEntry && navEntry.activationStart) || 0;
+}
+
+function getNavigationEntry() {
+  const navigationEntry =
+    self.performance &&
+    performance.getEntriesByType &&
+    performance.getEntriesByType('navigation')[0];
+
+  if (
+    navigationEntry &&
+    navigationEntry.responseStart > 0 &&
+    navigationEntry.responseStart < performance.now()
+  ) {
+    return navigationEntry;
+  }
+}
 ```

pages/CoreWebVitals/LCP.mdx

@@ -19,18 +19,38 @@ const po = new PerformanceObserver((list) => {
   entries.forEach((item, i) => {
     console.dir(item);
     console.log(
-      `${i + 1} current LCP item : ${item.element}: ${item.startTime}`,
+      `${i + 1} current LCP item : ${item.element}: ${Math.max(item.startTime - getActivationStart(), 0)}`,
     );
     item.element ? (item.element.style = "border: 5px dotted lime;") : "";
   });
 
   const lastEntry = entries[entries.length - 1];
-  console.log(`LCP is: ${lastEntry.startTime}`);
+  console.log(`LCP is: ${Math.max(lastEntry.startTime - getActivationStart(), 0)}`);
 });
 
 po.observe({ type: "largest-contentful-paint", buffered: true });
 
 function dedupe(arr, key) {
   return [...new Map(arr.map((item) => [item[key], item])).values()];
 }
+
+function getActivationStart() {
+  const navEntry = getNavigationEntry();
+  return (navEntry && navEntry.activationStart) || 0;
+}
+
+function getNavigationEntry() {
+  const navigationEntry =
+    self.performance &&
+    performance.getEntriesByType &&
+    performance.getEntriesByType('navigation')[0];
+
+  if (
+    navigationEntry &&
+    navigationEntry.responseStart > 0 &&
+    navigationEntry.responseStart < performance.now()
+  ) {
+    return navigationEntry;
+  }
+}
 ```