sitespeed.io 36.2.5 → 36.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
+
 # 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).
+* Browsertime 24.2.0 with Chromedriver 133 [#4432](https://github.com/sitespeedio/sitespeed.io/pull/4432).
+
+### Fixed
+* Extra guard against missing HARs [#4430](https://github.com/sitespeedio/sitespeed.io/pull/4430).
+* Log missing green domain info as info instead of error [#4433](https://github.com/sitespeedio/sitespeed.io/pull/4433).
+
 ## 36.2.5 - 2025-02-03
 ### Fixed
 * The check for sending Android test through APIs was broken in 36.2.4, fixed in [#4428](https://github.com/sitespeedio/sitespeed.io/pull/4428).

package/Dockerfile

@@ -1,4 +1,4 @@
-FROM sitespeedio/webbrowsers:chrome-132.0-firefox-134.0-edge-132.0
+FROM sitespeedio/webbrowsers:chrome-133.0-firefox-135.0-edge-132.0
 
 ARG TARGETPLATFORM=linux/amd64
 

package/docs/README.md

@@ -0,0 +1,10 @@
+Documentation for sitespeed.io
+================
+
+First make sure you have Bundler: <code>gem install bundler</code>
+
+If you run on a Mac OS make sure you have xcode-select installed: <code>xcode-select --install</code>
+
+To run it locally: <code>bundle install && bundle exec jekyll serve --baseurl ''</code>
+
+Checkout http://localhost:4000/

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/lib/plugins/domains/aggregator.js

@@ -80,40 +80,45 @@ export class DomainsAggregator {
     if (this.groups[mainDomain] === undefined) {
       this.groups[mainDomain] = {};
     }
-    const firstPageId = har.log.pages[0].id;
 
-    for (const entry of har.log.entries) {
-      if (entry.pageref !== firstPageId) {
-        // Only pick the first request out of multiple runs.
-        continue;
-      }
-
-      const domainName = parseDomainName(entry.request.url),
-        domain = this.domains[domainName] || getDomain(domainName),
-        groupDomain =
-          this.groups[mainDomain][domainName] || getDomain(domainName),
-        totalTime = entry.time;
+    if (har.log.pages.length > 0) {
+      const firstPageId = har.log.pages[0].id;
 
-      domain.requestCount++;
-      groupDomain.requestCount++;
+      for (const entry of har.log.entries) {
+        if (entry.pageref !== firstPageId) {
+          // Only pick the first request out of multiple runs.
+          continue;
+        }
 
-      if (isValidTiming(totalTime)) {
-        domain.totalTime.push(totalTime);
-        groupDomain.totalTime.push(totalTime);
-      } else {
-        log.debug('Missing time from har entry for url: ' + entry.request.url);
-      }
+        const domainName = parseDomainName(entry.request.url),
+          domain = this.domains[domainName] || getDomain(domainName),
+          groupDomain =
+            this.groups[mainDomain][domainName] || getDomain(domainName),
+          totalTime = entry.time;
+
+        domain.requestCount++;
+        groupDomain.requestCount++;
+
+        if (isValidTiming(totalTime)) {
+          domain.totalTime.push(totalTime);
+          groupDomain.totalTime.push(totalTime);
+        } else {
+          log.debug(
+            'Missing time from har entry for url: ' + entry.request.url
+          );
+        }
 
-      for (const name of timingNames) {
-        const timing = entry.timings[name];
+        for (const name of timingNames) {
+          const timing = entry.timings[name];
 
-        if (isValidTiming(timing)) {
-          domain[name].push(timing);
-          groupDomain[name].push(timing);
+          if (isValidTiming(timing)) {
+            domain[name].push(timing);
+            groupDomain[name].push(timing);
+          }
         }
+        this.domains[domainName] = domain;
+        this.groups[mainDomain][domainName] = groupDomain;
       }
-      this.domains[domainName] = domain;
-      this.groups[mainDomain][domainName] = groupDomain;
     }
   }
   summarize() {

package/lib/plugins/sustainable/index.js

@@ -94,8 +94,8 @@ export default class SustainablePlugin extends SitespeedioPlugin {
       try {
         this.data = await loadJSON(greenDomainJSONpath);
       } catch {
-        log.error('Green domain local file is missing on disk.');
-        log.error(
+        log.info('Green domain local file is missing on disk.');
+        log.info(
           'Run `DOWNLOAD_URL2GREEN=true npm install sitespeed.io` when you install to install the file locally or use the online API using `--sustainable.useGreenWebHostingAPI true` to check if a domain is green hosted.'
         );
         this.data = {};

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "sitespeed.io",
-  "version": "36.2.5",
+  "version": "36.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sitespeed.io",
-      "version": "36.2.5",
+      "version": "36.4.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -18,7 +18,7 @@
         "@slack/webhook": "7.0.4",
         "@tgwf/co2": "0.16.4",
         "axe-core": "4.10.2",
-        "browsertime": "24.1.1",
+        "browsertime": "24.2.0",
         "coach-core": "8.1.1",
         "dayjs": "1.11.11",
         "fast-crc32c": "2.0.0",
@@ -1821,9 +1821,9 @@
       }
     },
     "node_modules/@sitespeed.io/chromedriver": {
-      "version": "132.0.6834-83",
-      "resolved": "https://registry.npmjs.org/@sitespeed.io/chromedriver/-/chromedriver-132.0.6834-83.tgz",
-      "integrity": "sha512-JHyO6MHW8t6fZwkpTpSqSk1w18YRJxg0Joym00GHlnB6uH15+//PBYeKuvnjdZTROlp/6FK3Pqo4hTE2Kql45g==",
+      "version": "133.0.6943-53",
+      "resolved": "https://registry.npmjs.org/@sitespeed.io/chromedriver/-/chromedriver-133.0.6943-53.tgz",
+      "integrity": "sha512-AnzM2FoKEkdjCFAiC/zIJSjoHZmMxHL1utNyBAggXz+RsazC0v09RIGOS8cF2tmGEwJP9I47z56l98w4pGaS9w==",
       "hasInstallScript": true,
       "dependencies": {
         "node-downloader-helper": "2.1.9",
@@ -3329,12 +3329,12 @@
       }
     },
     "node_modules/browsertime": {
-      "version": "24.1.1",
-      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-24.1.1.tgz",
-      "integrity": "sha512-VD5oeD5mxwqqlw18laZOUn0NKMP7k9kVE0ZMea2whNcyzAAclzaPFPhac5OGDE7ZRGwpLFIFryXPZSx9haXxwg==",
+      "version": "24.2.0",
+      "resolved": "https://registry.npmjs.org/browsertime/-/browsertime-24.2.0.tgz",
+      "integrity": "sha512-qC4sLm1tf18xdc5Hirpd6RRd4mz8T2dv+/7iImHG3U6BC8GoIio0picEBbtdB8dFXp0VgCBQwg1nFeSIf/HXBA==",
       "dependencies": {
         "@devicefarmer/adbkit": "3.3.8",
-        "@sitespeed.io/chromedriver": "132.0.6834-83",
+        "@sitespeed.io/chromedriver": "133.0.6943-53",
         "@sitespeed.io/edgedriver": "132.0.2957-115",
         "@sitespeed.io/geckodriver": "0.35.0-1",
         "@sitespeed.io/log": "0.2.6",

package/package.json

@@ -5,7 +5,7 @@
     "sitespeed.io": "./bin/sitespeed.js",
     "sitespeed.io-wpr": "./bin/browsertimeWebPageReplay.js"
   },
-  "version": "36.2.5",
+  "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",
@@ -89,7 +89,7 @@
     "@tgwf/co2": "0.16.4",
     "@slack/webhook": "7.0.4",
     "axe-core": "4.10.2",
-    "browsertime": "24.1.1",
+    "browsertime": "24.2.0",
     "coach-core": "8.1.1",
     "dayjs": "1.11.11",
     "fast-crc32c": "2.0.0",