browsertime 23.3.3 → 23.4.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 23.4.1 -  2024-11-23
+### Fixed
+* Cleanuo of the extra timings that is added to the timeline for Chrome [#2218](https://github.com/sitespeedio/browsertime/pull/2218)
+
+## 23.4.0 -  2024-11-22
+
+### Added
+* Collect more information about the largest contentful paint [#2206](https://github.com/sitespeedio/browsertime/pull/2206)
+* Add extra timings and new custom timeline to the Chrome timeline [#2217](https://github.com/sitespeedio/browsertime/pull/2217). Inspired by [
+Andy Davies](https://github.com/andydavies) cool [https://github.com/andydavies/perf-timeline-to-devtools-profile](https://github.com/andydavies/perf-timeline-to-devtools-profile).
+
+### Fixed
+* More configuration tuning for Firefox [#2216](https://github.com/sitespeedio/browsertime/pull/2216).
+
+
 ## 23.3.3 - 2024-11-22
 ### Fixed
 * Disable search suggestion requests for Firefox [#2215](https://github.com/sitespeedio/browsertime/pull/2215)

package/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;

package/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;
 })();

package/browserscripts/timings/userTimings.js

@@ -8,10 +8,14 @@
     );
 
     for (const mark of myMarks) {
-      marks.push({
-        name: mark.name,
-        startTime: mark.startTime
-      });
+      if (mark.detail && mark.detail.devtools) {
+        continue;
+      } else {
+        marks.push({
+          name: mark.name,
+          startTime: mark.startTime
+        });
+      }
     }
 
     const myMeasures = Array.prototype.slice.call(
@@ -19,11 +23,15 @@
     );
 
     for (const measure of myMeasures) {
-      measures.push({
-        name: measure.name,
-        duration: measure.duration,
-        startTime: measure.startTime
-      });
+      if (measure.detail && measure.detail.devtools) {
+        continue;
+      } else {
+        measures.push({
+          name: measure.name,
+          duration: measure.duration,
+          startTime: measure.startTime
+        });
+      }
     }
   }
 

package/lib/chrome/webdriver/chromium.js

@@ -18,6 +18,14 @@ import { ChromeDevtoolsProtocol } from '../chromeDevtoolsProtocol.js';
 import { NetworkManager } from '../networkManager.js';
 import { Android, isAndroidConfigured } from '../../android/index.js';
 import { getRenderBlocking } from './traceUtilities.js';
+import { loafTimeLine } from './devtools/loaf.js';
+import { lcpTimeLine } from './devtools/lcp.js';
+import { fcpTimeLine } from './devtools/fcp.js';
+import { ttfbTimeLine } from './devtools/ttfb.js';
+import { elementTimeLine } from './devtools/element.js';
+import { longtaskTimeLine } from './devtools/longtask.js';
+import { domCompleteTimeLine } from './devtools/domComplete.js';
+import { loadEventEndTimeLine } from './devtools/loadEventEnd.js';
 const unlink = promisify(_unlink);
 const rm = promisify(_rm);
 
@@ -192,6 +200,16 @@ export class Chromium {
       this.isTracing &&
       this.options.chrome.timelineRecordingType !== 'custom'
     ) {
+      if (this.options.chrome.timelineExtras != false) {
+        await runner.runScript(ttfbTimeLine, 'TTFB_SCRIPT');
+        await runner.runScript(loafTimeLine, 'LOAF_SCRIPT');
+        await runner.runScript(fcpTimeLine, 'FCP_SCRIPT');
+        await runner.runScript(lcpTimeLine, 'LCP_SCRIPT');
+        await runner.runScript(elementTimeLine, 'ELEMENT_SCRIPT');
+        await runner.runScript(longtaskTimeLine, 'LONGTASK_SCRIPT');
+        await runner.runScript(domCompleteTimeLine, 'DOMCOMPLETE_SCRIPT');
+        await runner.runScript(loadEventEndTimeLine, 'LOADEVENTEND_SCRIPT');
+      }
       // We are ready and can stop collecting events
       this.isTracing = false;
       this.events = await this.cdpClient.stopTrace();

package/lib/chrome/webdriver/devtools/domComplete.js

@@ -0,0 +1,21 @@
+// https://developer.chrome.com/docs/devtools/performance/extension
+
+export const domCompleteTimeLine = `
+(function () {
+    performance.mark('DOM Complete', {
+        startTime: window.performance.getEntriesByType('navigation')[0].domComplete,
+        detail: {
+            devtools: {
+                dataType: 'marker',
+                trackGroup: 'Browsertime Timeline',
+                track: 'Metrics',
+                color: 'tertiary-dark',
+                tooltipText: 'DOM Complete',
+                properties: [
+                ['DOMComplete', window.performance.getEntriesByType('navigation')[0].domComplete]
+                ]
+            }
+        }
+    });
+})();
+`;

package/lib/chrome/webdriver/devtools/element.js

@@ -0,0 +1,29 @@
+// https://developer.chrome.com/docs/devtools/performance/extension
+
+export const elementTimeLine = `
+(function () {
+    const observer = new PerformanceObserver(list => { });
+    observer.observe({ type: 'element', buffered: true });
+    const entries = observer.takeRecords();
+    for (let entry of entries) {
+        performance.mark(entry.identifier, {
+            startTime: entry.renderTime,
+            detail: {
+                devtools: {
+                dataType: 'marker',
+                track: 'Metrics',
+                trackGroup: 'Browsertime Timeline',
+                color: 'primary',
+                tooltipText: entry.identifier + ' element',
+                properties: [
+                    ['tagName', '' + entry.element ? entry.element.tagName:''],
+                    ['className', '' + entry.element ? entry.element.className:''],
+                    ['URL', '' + entry.url]
+                    ['Render', entry.renderTime]
+                    ],
+                }
+            }
+        });
+    }
+})();
+`;

package/lib/chrome/webdriver/devtools/fcp.js

@@ -0,0 +1,23 @@
+// https://developer.chrome.com/docs/devtools/performance/extension
+
+export const fcpTimeLine = `
+(function () {
+    const observer = new PerformanceObserver(list => { });
+    observer.observe({ type: 'paint', buffered: true });
+    const entries = observer.takeRecords();
+    for (let entry of entries) {
+        performance.mark(entry.name === 'first-contentful-paint' ? 'FCP': 'FP', {
+            startTime: entry.startTime,
+            detail: {
+                devtools: {
+                dataType: 'marker',
+                track: 'Metrics',
+                trackGroup: 'Browsertime Timeline',
+                color: 'primary',
+                tooltipText: entry.name
+                }
+            }
+        });
+    }
+})();
+`;

package/lib/chrome/webdriver/devtools/inp.js

@@ -0,0 +1,70 @@
+// Adopted from https://github.com/andydavies/perf-timeline-to-devtools-profile
+// https://developer.chrome.com/docs/devtools/performance/extension
+
+export const inpTimeLine = `
+(function() {
+    const observer = new PerformanceObserver(list => {});
+    for (const type of ['event']) {
+        observer.observe({ type, buffered: true, durationThreshold: 0});
+    }
+    let inpEventCount = 0;
+    const entries = observer.takeRecords();
+    for (const entry of entries) {
+        if(entry.entryType == 'event' && entry.interactionId > 0) {
+            inpEventCount++;
+            performance.measure('Input Delay', {
+                start: entry.startTime,
+                end: entry.processingStart, 
+                detail: {
+                    devtools: {
+                        dataType: 'track-entry',
+                        track: 'INP.' + inpEventCount,
+                        trackGroup: 'Browsertime Timeline',
+                        color: 'primary',
+                        tooltipText: 'Input Delay',
+                        properties: [
+                            ['name', '' + entry.name],
+                            ['target', '' + entry.target.tagName]
+                        ]
+                    }
+                }
+            });
+            performance.measure('Processing Time', {
+                start: entry.processingStart,
+                end: entry.processingEnd, 
+                detail: {
+                    devtools: {
+                        
+                        dataType: 'track-entry',
+                        track: 'INP.' + inpEventCount,
+                        trackGroup: 'Browsertime Timeline',
+                        color: 'primary',
+                        tooltipText: 'Processing Time',
+                        properties: [
+                            ['name', '' + entry.name],
+                            ['target', '' + entry.target.tagName]
+                        ]
+                    }
+                }
+            });
+            performance.measure('Presentation Delay', {
+                start: entry.processingEnd,
+                end: entry.startTime + entry.duration, 
+                detail: {
+                    devtools: {
+                        dataType: 'track-entry',
+                        track: 'INP.' + inpEventCount,
+                        trackGroup: 'Browsertime Timeline',
+                        color: 'primary',
+                        tooltipText: 'Presentation Delay',
+                        properties: [
+                            ['name', '' + entry.name],
+                            ['target', '' + entry.target.tagName]
+                        ]
+                    }
+                }
+            });
+        }                 
+    }
+  })();
+`;

package/lib/chrome/webdriver/devtools/lcp.js

@@ -0,0 +1,53 @@
+// https://developer.chrome.com/docs/devtools/performance/extension
+
+export const lcpTimeLine = `
+(function () {
+    const observer = new PerformanceObserver(list => { });
+    observer.observe({ type: 'largest-contentful-paint', buffered: true });
+    const entries = observer.takeRecords();
+    entries.forEach((entry, index) => {
+        if (index === entries.length - 1) {
+            // This is the LCP
+            performance.mark('LCP', {
+                startTime: Math.max(entry.renderTime, entry.loadTime),
+                detail: {
+                    devtools: {
+                        dataType: 'marker',
+                        track: 'Metrics',
+                        trackGroup: 'Browsertime Timeline',
+                        color: 'primary-dark',
+                        tooltipText: 'LCP ' + (entry.element?.tagName || ''),
+                        properties: [
+                            ['size', '' + entry.size],
+                            ['tagName', '' + (entry.element?.tagName || '')],
+                            ['className', '' + (entry.element?.className || '')],
+                            ['URL', '' + entry.url],
+                            ['Render', Math.max(entry.renderTime, entry.loadTime)]
+                        ],
+                    }
+                }
+            });
+        } else {
+            // LCP candidates
+            performance.mark('LCP candidate', {
+                startTime: Math.max(entry.renderTime, entry.loadTime),
+                detail: {
+                    devtools: {
+                        dataType: 'marker',
+                        track: 'LCP',
+                        trackGroup: 'Browsertime Timeline',
+                        color: 'primary-dark',
+                        tooltipText: 'LCP Candidate ' + (entry.element?.tagName || ''),
+                        properties: [
+                            ['size', '' + entry.size],
+                            ['tagName', '' + (entry.element?.tagName || '')],
+                            ['className', '' + (entry.element?.className || '')],
+                            ['URL', '' + entry.url]
+                        ],
+                    }
+                }
+            });
+        }
+    });
+})();
+`;

package/lib/chrome/webdriver/devtools/loadEventEnd.js

@@ -0,0 +1,21 @@
+// https://developer.chrome.com/docs/devtools/performance/extension
+
+export const loadEventEndTimeLine = `
+(function () {
+    performance.mark('Load Event End', {
+        startTime: performance.getEntriesByType('navigation')[0].loadEventEnd,
+        detail: {
+            devtools: {
+                dataType: 'marker',
+                trackGroup: 'Browsertime Timeline',
+                track: 'Metrics',
+                color: 'secondary',
+                tooltipText: 'Load Event End',
+                properties: [
+                 ['LoadEventEnd', window.performance.getEntriesByType('navigation')[0].loadEventEnd]
+                ]
+            }
+        }
+    });
+})();
+`;

package/lib/chrome/webdriver/devtools/loaf.js

@@ -0,0 +1,60 @@
+// Adopted from https://github.com/andydavies/perf-timeline-to-devtools-profile
+// https://developer.chrome.com/docs/devtools/performance/extension
+
+export const loafTimeLine = `
+(function () {
+    const observer = new PerformanceObserver(list => { });
+    observer.observe({ type: 'long-animation-frame', buffered: true,  durationThreshold: 0 });
+    const entries = observer.takeRecords();
+    for (let entry of entries) {
+         
+            // Set script entries before LoAF so Chrome can display them in the right order
+            for(const script of entry.scripts) {
+                performance.measure('script', {
+                    start: script.startTime,
+                    end: script.startTime + script.duration, 
+                    detail: {
+                        devtools: {
+                        dataType: 'track-entry',
+                        track: 'LoAF',
+                        trackGroup: 'Browsertime Timeline',
+                        color: 'secondary',
+                        tooltipText: script.sourceURL
+                        }
+                    }
+                });
+            }
+
+            performance.measure('LoAF', {
+              start: entry.startTime,
+              end: entry.startTime + entry.duration, 
+              detail: {
+                devtools: {
+                  dataType: 'track-entry',
+                  track: 'LoAF',
+                  trackGroup: 'Browsertime Timeline',
+                  color: 'primary',
+                  tooltipText: 'LoAF'
+                }
+              }
+            });
+
+            if(entry.styleAndLayoutStart > 0) {
+                performance.measure('Layout + Paint', {
+                    start: entry.styleAndLayoutStart,
+                    end: entry.startTime + entry.duration, 
+                    detail: {
+                    devtools: {
+                        
+                        dataType: 'track-entry',
+                        track: 'LoAF',
+                        trackGroup: 'Browsertime Timeline',
+                        color: 'secondary-light',
+                        tooltipText: 'Layout + Paint'
+                    }
+                    }
+                });
+            }
+    }
+})();
+`;

package/lib/chrome/webdriver/devtools/longtask.js

@@ -0,0 +1,24 @@
+// https://developer.chrome.com/docs/devtools/performance/extension
+
+export const longtaskTimeLine = `
+(function () {
+    const observer = new PerformanceObserver(list => { });
+    observer.observe({ type: 'longtask', buffered: true,  durationThreshold: 0 });
+    const entries = observer.takeRecords();
+    for (let entry of entries) {
+         performance.measure('Long Task', {
+                start: entry.startTime,
+                end: entry.startTime + entry.duration, 
+                detail: {
+                    devtools: {
+                        dataType: 'track-entry',
+                        track: 'Long Task',
+                        trackGroup: 'Browsertime Timeline',
+                        color: 'error',
+                        tooltipText: 'Long Task'
+                    }
+                }
+            });
+    }
+})();
+`;

package/lib/chrome/webdriver/devtools/ttfb.js

@@ -0,0 +1,21 @@
+// https://developer.chrome.com/docs/devtools/performance/extension
+
+export const ttfbTimeLine = `
+(function () {
+    performance.mark('TTFB', {
+        startTime: window.performance.getEntriesByType('navigation')[0].responseStart,
+        detail: {
+            devtools: {
+                dataType: 'marker',
+                trackGroup: 'Browsertime Timeline',
+                track: 'Metrics',
+                color: 'tertiary-light',
+                tooltipText: 'Time To First Byte (TTFB)',
+                properties: [
+                 ['TTFB', window.performance.getEntriesByType('navigation')[0].responseStart]
+                ]
+            }
+        }
+    });
+})();
+`;

package/lib/firefox/settings/firefoxPreferences.js

@@ -57,7 +57,7 @@ export const defaultFirefoxPreferences = {
   'security.turn_off_all_security_so_that_viruses_can_take_over_this_computer': true,
   'xpinstall.signatures.required': false,
   // Prevent Remote Settings to issue non local connections.
-  'services.settings.server': 'http://localhost/remote-settings-dummy/v1',
+  'services.settings.server': 'data:,#remote-settings-dummy/v1',
   // Ensure autoplay is enabled for all platforms.
   'media.autoplay.default': 0, // 0=Allowed, 1=Blocked, 2=Prompt
   'media.autoplay.enabled.user-gestures-needed': true,
@@ -198,5 +198,11 @@ export const defaultFirefoxPreferences = {
   'browser.newtabpage.activity-stream.showSponsoredTopSites': false,
   // See https://bugzilla.mozilla.org/show_bug.cgi?id=1930110
   // See https://github.com/sitespeedio/browsertime/issues/2211
-  'browser.search.serpEventTelemetryCategorization.enabled': false
+  'browser.search.serpEventTelemetryCategorization.enabled': false,
+  // Default Glean to "record but don't report" mode, and to never trigger
+  // activity-based ping submission. Docs:
+  // https://firefox-source-docs.mozilla.org/toolkit/components/glean/dev/preferences.html
+  'telemetry.fog.test.localhost_port': -1,
+  'telemetry.fog.test.activity_limit': -1,
+  'telemetry.fog.test.inactivity_limit': -1
 };

package/lib/support/cli.js

@@ -288,6 +288,13 @@ export function parseCommandLine() {
       type: 'boolean',
       group: 'chrome'
     })
+    .option('chrome.timelineExtras', {
+      describe:
+        'If you collect the timeline using --chrome.timeline or --enableProfileRun this will add some extra timings and tracks to your timeline.',
+      type: 'boolean',
+      default: true,
+      group: 'chrome'
+    })
     .option('chrome.timelineRecordingType', {
       alias: 'chrome.traceRecordingType',
       describe: 'Expose the start/stop commands for the chrome trace',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "browsertime",
   "description": "Get performance metrics from your web page using Browsertime.",
-  "version": "23.3.3",
+  "version": "23.4.1",
   "bin": "./bin/browsertime.js",
   "type": "module",
   "types": "./types/scripting.d.ts",