Add subset info for LCP (#2206)

sitespeedio · Nov 22, 2024 · d1eec64 · d1eec64
1 parent f29946e
commit d1eec64
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 5 deletions.
diff --git a/browserscripts/pageinfo/largestContentfulPaintInfo.js b/browserscripts/pageinfo/largestContentfulPaintInfo.js
@@ -35,24 +35,59 @@
     const observer = new PerformanceObserver(list => {});
     observer.observe({ type: 'largest-contentful-paint', buffered: true });
     const entries = observer.takeRecords();
+
+    const navEntries = performance.getEntriesByType('navigation');
+    const navEntry = navEntries.length > 0 ? navEntries[0] : null;
+    const ttfb = navEntry ? navEntry.responseStart : 0;
+
     const candidates = [];
     for (let entry of entries) {
         const element = entry.element; 
+        const lcpTime = Math.max(entry.renderTime,entry.loadTime);
+        let resourceLoadDelay = 0;
+        let resourceLoadDuration = 0;
+        let elementRenderDelay = 0;
+
+        if (navEntry) {
+          if (entry.url) {
+              const resourceEntries = performance.getEntriesByName(entry.url);
+              const resourceEntry = resourceEntries.length > 0 ? resourceEntries[resourceEntries.length - 1] : null;
+              if (resourceEntry) {
+                resourceLoadDelay = resourceEntry.startTime - ttfb;
+                resourceLoadDuration = resourceEntry.responseEnd - resourceEntry.startTime;
+                elementRenderDelay = lcpTime - resourceEntry.responseEnd;
+              } else {
+                  // If resource entry not found, set delays appropriately
+                  resourceLoadDelay = 0;
+                  resourceLoadDuration = 0;
+                  elementRenderDelay = lcpTime - ttfb;
+              }
+          } else {
+              // For inline resources (text elements or inline images)
+              resourceLoadDelay = 0;
+              resourceLoadDuration = 0;
+              elementRenderDelay = lcpTime - ttfb;
+          }
+        }
+
         candidates.push(
             {
                 duration: entry.duration,
                 id: entry.id,
                 url: entry.url,
                 loadTime: Number(entry.loadTime.toFixed(0)),
-                renderTime: Number(Math.max(entry.renderTime,entry.loadTime).toFixed(0)),
+                renderTime: Number(lcpTime.toFixed(0)),
                 size: entry.size,
                 startTime: Number(entry.startTime.toFixed(0)),
                 tagName: element ? element.tagName : '',
                 className: element ? element.className : '',
                 domPath:  element ? (getDomPath(element)).join( ' > ') : '',
-                tag: element ? (element.cloneNode(false)).outerHTML : ''
+                tag: element ? (element.cloneNode(false)).outerHTML : '',
+                ttfb: Number(ttfb.toFixed(0)),
+                resourceLoadDelay: Number(resourceLoadDelay.toFixed(0)),
+                resourceLoadDuration: Number(resourceLoadDuration.toFixed(0)),
+                elementRenderDelay: Number(elementRenderDelay.toFixed(0))
               }
-
         )
     }
     return candidates;

diff --git a/browserscripts/timings/largestContentfulPaint.js b/browserscripts/timings/largestContentfulPaint.js
@@ -34,20 +34,53 @@
   const observer = new PerformanceObserver(list => {});
   observer.observe({ type: 'largest-contentful-paint', buffered: true });
   const entries = observer.takeRecords();
+  const navEntries = performance.getEntriesByType('navigation');
+  const navEntry = navEntries.length > 0 ? navEntries[0] : null;
+  const ttfb = navEntry ? navEntry.responseStart : 0;
   if (entries.length > 0) {
     const largestEntry = entries[entries.length - 1];
+    const lcpTime = Math.max(largestEntry.renderTime,largestEntry.loadTime);
+        let resourceLoadDelay = 0;
+        let resourceLoadDuration = 0;
+        let elementRenderDelay = 0;
+
+        if (navEntry) {
+          if (largestEntry.url) {
+              const resourceEntries = performance.getEntriesByName(largestEntry.url);
+              const resourceEntry = resourceEntries.length > 0 ? resourceEntries[resourceEntries.length - 1] : null;
+              if (resourceEntry) {
+                resourceLoadDelay = resourceEntry.startTime - ttfb;
+                resourceLoadDuration = resourceEntry.responseEnd - resourceEntry.startTime;
+                elementRenderDelay = lcpTime - resourceEntry.responseEnd;
+              } else {
+                  // If resource entry not found, set delays appropriately
+                  resourceLoadDelay = 0;
+                  resourceLoadDuration = 0;
+                  elementRenderDelay = lcpTime - ttfb;
+              }
+          } else {
+              // For inline resources (text elements or inline images)
+              resourceLoadDelay = 0;
+              resourceLoadDuration = 0;
+              elementRenderDelay = lcpTime - ttfb;
+          }
+        }
     return {
       duration: largestEntry.duration,
       id: largestEntry.id,
       url: largestEntry.url,
       loadTime: Number(largestEntry.loadTime.toFixed(0)),
-      renderTime: Number(Math.max(largestEntry.renderTime,largestEntry.loadTime).toFixed(0)),
+      renderTime: Number(lcpTime.toFixed(0)),
       size: largestEntry.size,
       startTime: Number(largestEntry.startTime.toFixed(0)),
       tagName: largestEntry.element ? largestEntry.element.tagName : '',
       className :largestEntry.element ? largestEntry.element.className : '',
       domPath:  largestEntry.element ? (getDomPath(largestEntry.element)).join( ' > ') : '',
-      tag: largestEntry.element ? (largestEntry.element.cloneNode(false)).outerHTML : ''
+      tag: largestEntry.element ? (largestEntry.element.cloneNode(false)).outerHTML : '',
+      ttfb: Number(ttfb.toFixed(0)),
+      resourceLoadDelay: Number(resourceLoadDelay.toFixed(0)),
+      resourceLoadDuration: Number(resourceLoadDuration.toFixed(0)),
+      elementRenderDelay: Number(elementRenderDelay.toFixed(0))
     };
   } else return;
 })();