sitespeed.io 36.3.0 → 36.4.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
+
 # CHANGELOG - sitespeed.io  (we use [semantic versioning](https://semver.org))
 
+## 36.4.0 - 2025-02-14
+### Added
+* Crux update: Get fractions for RTT [#4436](https://github.com/sitespeedio/sitespeed.io/pull/4436), that extra LCP information [#4437](https://github.com/sitespeedio/sitespeed.io/pull/4437) and make sure LCP resource type fraction is sent to TSDB [#4438](https://github.com/sitespeedio/sitespeed.io/pull/4438).
+
 ## 36.3.0 - 2025-02-08
 ### Added
 * Chrome 133 and Firefox 135 in the Docker container [#4431](https://github.com/sitespeedio/sitespeed.io/pull/4431).

package/lib/plugins/crux/index.js

@@ -23,7 +23,8 @@ const DEFAULT_METRICS_PAGESUMMARY = [
   'loadingExperience.*.INTERACTION_TO_NEXT_PAINT_MS.*',
   'loadingExperience.*.ROUND_TRIP_TIME_MS.*',
   'loadingExperience.*.NAVIGATION_TYPES_FRACTIONS.*',
-  'loadingExperience.*.FORM_FACTORS_FRACTIONS.*'
+  'loadingExperience.*.FORM_FACTORS_FRACTIONS.*',
+  'loadingExperience.*.LCP_RESOURCE_TYPES_FRACTIONS.*'
 ];
 const DEFAULT_METRICS_SUMMARY = [
   'originLoadingExperience.*.FIRST_CONTENTFUL_PAINT_MS.*',
@@ -33,7 +34,8 @@ const DEFAULT_METRICS_SUMMARY = [
   'originLoadingExperience.*.INTERACTION_TO_NEXT_PAINT_MS.*',
   'originLoadingExperience.*.ROUND_TRIP_TIME_MS.*',
   'originLoadingExperience.*.NAVIGATION_TYPES_FRACTIONS.*',
-  'originLoadingExperience.*.FORM_FACTORS_FRACTIONS.*'
+  'originLoadingExperience.*.FORM_FACTORS_FRACTIONS.*',
+  'originLoadingExperience.*.LCP_RESOURCE_TYPES_FRACTIONS.*'
 ];
 
 function wait(ms) {

package/lib/plugins/crux/pug/index.pug

@@ -11,7 +11,7 @@ mixin sizeCell(title, size)
   td.number(data-title=title, data-value= size)= h.size.format(size)
 
 - const crux = pageInfo.data.crux.pageSummary;
-- const metrics = {round_trip_time: 'Round trip time', experimental_time_to_first_byte: 'Time to first byte (TTFB)', first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)', interaction_to_next_paint: 'Interaction to next paint (INP)'}; 
+- const metrics = {round_trip_time: 'Round Trip Time (RTT)', experimental_time_to_first_byte: 'Time To First Byte (TTFB)', first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', cumulative_layout_shift: 'Cumulative Layout Shift (CLS)', interaction_to_next_paint: 'Interaction to Next Paint (INP)'}; 
 - const experiences = ['loadingExperience','originLoadingExperience'];
 
 if experiences
@@ -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)];
@@ -118,6 +158,8 @@ if experiences
 
           - let ITNPs = [Number(get(crux, `${cruxus}.interaction_to_next_paint.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.interaction_to_next_paint.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.interaction_to_next_paint.histogram[2].density`, 0)*100).toFixed(2)];
 
+          - let RTTs = [Number(get(crux, `${cruxus}.round_trip_time.histogram[0].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.round_trip_time.histogram[1].density`, 0) * 100).toFixed(2), Number(get(crux, `${cruxus}.round_trip_time.histogram[2].density`, 0)*100).toFixed(2)];
+
           script(type='text/javascript').
             document.addEventListener("DOMContentLoaded", function() {   
 
@@ -143,33 +185,35 @@ if experiences
                   drawPie('#chartCLS#{experience + formFactor}', [#{CLSs}], ['Good: #{CLSs[0]}%', 'Need improvement: #{CLSs[1]}%', 'Poor: #{CLSs[2]}%']);
                   drawPie('#chartTTFB#{experience + formFactor}', [#{TTFBs}], ['Good: #{TTFBs[0]}%', 'Need improvement: #{TTFBs[1]}%', 'Poor: #{TTFBs[2]}%']);
                   drawPie('#chartITNP#{experience + formFactor}', [#{ITNPs}], ['Good: #{ITNPs[0]}%', 'Need improvement: #{ITNPs[1]}%', 'Poor: #{ITNPs[2]}%']);
-
+                  drawPie('#chartRTT#{experience + formFactor}', [#{RTTs}], ['Low: #{RTTs[0]}%', 'Medium: #{RTTs[1]}%', 'High: #{RTTs[2]}%']);
 
             });
           .responsive  
             table
               tr
+                th #{metrics['round_trip_time']}
                 th #{metrics['experimental_time_to_first_byte']}
-                th #{metrics['first_contentful_paint']}
               tr 
+                td(data-title=metrics['round_trip_time'])
+                  .ct-chart(id='chartRTT' + experience + formFactor)
                 td(data-title=metrics['experimental_time_to_first_byte']) 
                   .ct-chart(id='chartTTFB' + experience + formFactor) 
-                td(data-title=metrics['first_contentful_paint'])  
-                  .ct-chart(id='chartFCP' + experience + formFactor)
               tr
+                th #{metrics['first_contentful_paint']}
                 th #{metrics['largest_contentful_paint']}            
-                th #{metrics['cumulative_layout_shift']}  
               tr 
+                td(data-title=metrics['first_contentful_paint'])  
+                  .ct-chart(id='chartFCP' + experience + formFactor)
                 td(data-title=metrics['largest_contentful_paint']) 
                   .ct-chart(id='chartLCP' + experience + formFactor)
-                td(data-title=metrics['cumulative_layout_shift']) 
-                  .ct-chart(id='chartCLS' + experience + formFactor)
               tr
                 th #{metrics['interaction_to_next_paint']}
-                th
+                th #{metrics['cumulative_layout_shift']}
               tr
                 td(data-title=metrics['interaction_to_next_paint']) 
-                  .ct-chart(id='chartITNP' + experience + formFactor) 
-                td
+                  .ct-chart(id='chartITNP' + experience + formFactor)
+                td(data-title=metrics['cumulative_layout_shift']) 
+                  .ct-chart(id='chartCLS' + experience + formFactor)
+                
 else 
   p No data availible in the Chrome User Experience report.

package/lib/plugins/crux/repackage.js

@@ -65,7 +65,48 @@ export function repackage(cruxResult) {
 
   if (cruxResult.record.metrics.round_trip_time) {
     result.ROUND_TRIP_TIME_MS = {
-      p75: cruxResult.record.metrics.round_trip_time.percentiles.p75
+      p75: cruxResult.record.metrics.round_trip_time.percentiles.p75,
+      low: cruxResult.record.metrics.round_trip_time.histogram[0].density,
+      medium: cruxResult.record.metrics.round_trip_time.histogram[1].density,
+      high: cruxResult.record.metrics.round_trip_time.histogram[2].density
+    };
+  }
+
+  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
     };
   }
 
@@ -80,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

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "sitespeed.io",
-  "version": "36.3.0",
+  "version": "36.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sitespeed.io",
-      "version": "36.3.0",
+      "version": "36.4.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package/package.json

@@ -5,7 +5,7 @@
     "sitespeed.io": "./bin/sitespeed.js",
     "sitespeed.io-wpr": "./bin/browsertimeWebPageReplay.js"
   },
-  "version": "36.3.0",
+  "version": "36.4.0",
   "description": "sitespeed.io is an open-source tool for comprehensive web performance analysis, enabling you to test, monitor, and optimize your website’s speed using real browsers in various environments.",
   "keywords": [
     "performance",