From 8a9af743f17b815b0f26f8188e69068692fc247c Mon Sep 17 00:00:00 2001
From: Peter Hedenskog <peter@soulgalore.com>
Date: Fri, 14 Feb 2025 05:55:06 +0100
Subject: [PATCH] Extra CRUX LCP information (#4437)

---
 lib/plugins/crux/pug/index.pug | 40 ++++++++++++++++++++++++++
 lib/plugins/crux/repackage.js  | 51 ++++++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+)

diff --git a/lib/plugins/crux/pug/index.pug b/lib/plugins/crux/pug/index.pug
index 3319bed93..7ee7cda99 100644
--- a/lib/plugins/crux/pug/index.pug
+++ b/lib/plugins/crux/pug/index.pug
@@ -106,6 +106,46 @@ if experiences
                   td Prerender
                   td  #{Number(crux[experience][formFactor].NAVIGATION_TYPES_FRACTIONS.prerender *100).toFixed(2)}%
 
+          if crux[experience][formFactor].LCP_RESOURCE_TYPES_FRACTIONS
+              h4 Largest Contentful Paint resource type
+              table
+                thead
+                  tr
+                    th Element type
+                    th Value
+                tbody
+                  tr
+                    td Text
+                    td #{Number(crux[experience][formFactor].LCP_RESOURCE_TYPES_FRACTIONS.text *100).toFixed(2)}%
+                  tr
+                    td Image
+                    td #{Number(crux[experience][formFactor].LCP_RESOURCE_TYPES_FRACTIONS.image *100).toFixed(2)}%
+              h4 Largest Contentful Paint image extra information
+              table
+                thead
+                  tr
+                    th Metric
+                    th 75 p
+                tbody
+                  tr
+                    td Largest Contentful Paint
+                    td #{h.time.ms(crux[experience][formFactor].LARGEST_CONTENTFUL_PAINT_MS.p75)}
+                  if crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DURATION_MS
+                    tr
+                      td Image load duration
+                      td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DURATION_MS.p75)}
+                  if crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DELAY_MS
+                    tr
+                      td Image load delay
+                      td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_RESOURCE_LOAD_DELAY_MS.p75)}
+                  if crux[experience][formFactor].LCP_IMAGE_ELEMENT_RENDER_DELAY_MS
+                    tr
+                      td Image render delay
+                      td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_ELEMENT_RENDER_DELAY_MS.p75)}
+                  if crux[experience][formFactor].LCP_IMAGE_TTFB_MS
+                    tr
+                      td Image TTFB
+                      td #{h.time.ms(crux[experience][formFactor].LCP_IMAGE_TTFB_MS.p75)}
           h4 Distribution
           - let cruxus = `${experience}.${formFactor}.data.record.metrics`;
           - let FCPs = [Number(get(crux, `${cruxus}.first_contentful_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.first_contentful_paint.histogram[2].density`, 0)*100).toFixed(2)];
diff --git a/lib/plugins/crux/repackage.js b/lib/plugins/crux/repackage.js
index d408fa26f..d6edc8d36 100644
--- a/lib/plugins/crux/repackage.js
+++ b/lib/plugins/crux/repackage.js
@@ -72,6 +72,44 @@ export function repackage(cruxResult) {
     };
   }
 
+  if (
+    cruxResult.record.metrics
+      .largest_contentful_paint_image_resource_load_duration
+  ) {
+    result.LCP_IMAGE_RESOURCE_LOAD_DURATION_MS = {
+      p75: cruxResult.record.metrics
+        .largest_contentful_paint_image_resource_load_duration.percentiles.p75
+    };
+  }
+
+  if (
+    cruxResult.record.metrics.largest_contentful_paint_image_resource_load_delay
+  ) {
+    result.LCP_IMAGE_RESOURCE_LOAD_DELAY_MS = {
+      p75: cruxResult.record.metrics
+        .largest_contentful_paint_image_resource_load_delay.percentiles.p75
+    };
+  }
+
+  if (
+    cruxResult.record.metrics
+      .largest_contentful_paint_image_element_render_delay
+  ) {
+    result.LCP_IMAGE_ELEMENT_RENDER_DELAY_MS = {
+      p75: cruxResult.record.metrics
+        .largest_contentful_paint_image_element_render_delay.percentiles.p75
+    };
+  }
+
+  if (
+    cruxResult.record.metrics.largest_contentful_paint_image_time_to_first_byte
+  ) {
+    result.LCP_IMAGE_TTFB_MS = {
+      p75: cruxResult.record.metrics
+        .largest_contentful_paint_image_time_to_first_byte.percentiles.p75
+    };
+  }
+
   if (
     cruxResult.record.metrics.form_factors &&
     cruxResult.record.metrics.form_factors.fractions
@@ -83,6 +121,19 @@ export function repackage(cruxResult) {
     };
   }
 
+  if (
+    cruxResult.record.metrics.largest_contentful_paint_resource_type &&
+    cruxResult.record.metrics.largest_contentful_paint_resource_type.fractions
+  ) {
+    result.LCP_RESOURCE_TYPES_FRACTIONS = {
+      text: cruxResult.record.metrics.largest_contentful_paint_resource_type
+        .fractions.text,
+      image:
+        cruxResult.record.metrics.largest_contentful_paint_resource_type
+          .fractions.image
+    };
+  }
+
   if (
     cruxResult.record.metrics.navigation_types &&
     cruxResult.record.metrics.navigation_types.fractions