browsertime 16.3.0 → 16.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 16.6.0 - 2022-05-20
+### Added
+* Implemented experimental Interaction to next paint that's useful if you test user journeys [#1791](https://github.com/sitespeedio/browsertime/pull/1791).
+* Track when the last CPU long task happen as explained by Andy Davies of the webperf Slack channel [#1789](https://github.com/sitespeedio/browsertime/pull/1789).
+
+## 16.5.0 - 2022-05-11
+### Added
+* Make it possible to configure the max size in pixels for the filmstrip screenshots using `--videoParams.thumbsize` [#1787](https://github.com/sitespeedio/browsertime/pull/1787).
+
+### Fixed
+* Handle all boundaries when cropping image in portable script, thank you [Gregory Mierzwinski](https://github.com/gmierz) for PR [#1788](https://github.com/sitespeedio/browsertime/pull/1788).
+## 16.4.0 - 2022-05-11
+### Added
+* If we have the Largest Contentful Paint for the video, add that to the video text instead of DOMContentLoaded [#1783](https://github.com/sitespeedio/browsertime/pull/1783).
+
+### Fixed
+* Only get LCP in Visual Metrics if the LCP API gives us a element [#1786](https://github.com/sitespeedio/browsertime/pull/1786).
 ## 16.3.0 - 2022-05-07
 ### Added
 * If you use `--visualElements` and the browser supports the Largest Contentful API, we also record 

package/browserscripts/pageinfo/interactionToNextPaintInfo.js

@@ -0,0 +1,117 @@
+(function () {
+  // This is an updated version of
+  // https://github.com/GoogleChrome/web-vitals/blob/next/src/onINP.ts
+
+  const supported = PerformanceObserver.supportedEntryTypes;
+  if (!supported || supported.indexOf('event') === -1) {
+    return;
+  }
+
+  const observer = new PerformanceObserver(list => {});
+  // Event Timing entries have their durations rounded to the nearest 8ms,
+  // so a duration of 40ms would be any event that spans 2.5 or more frames
+  // at 60Hz. This threshold is chosen to strike a balance between usefulness
+  // and performance. Running this callback for any interaction that spans
+  // just one or two frames is likely not worth the insight that could be
+  // gained.
+  observer.observe({type: 'event', buffered: true, durationThreshold: 40});
+  const entries = observer.takeRecords();
+
+  // To prevent unnecessary memory usage on pages with lots of interactions,
+  // store at most 10 of the longest interactions to consider as INP candidates.
+  const MAX_INTERACTIONS_TO_CONSIDER = 10;
+
+  // A list of longest interactions on the page (by latency) sorted so the
+  // longest one is first. The list is as most MAX_INTERACTIONS_TO_CONSIDER long.
+  let longestInteractionList = [];
+
+  // A mapping of longest interactions by their interaction ID.
+  // This is used for faster lookup.
+  const longestInteractionMap = {};
+
+  const getInteractionCountForNavigation = () => {
+    // I guess the interactionCount is coming in Chrome later on
+    if (performance.interactionCount) {
+      return performance.interactionCount;
+    } else {
+      const observerForAll = new PerformanceObserver(list => {});
+      observerForAll.observe({
+        type: 'event',
+        buffered: true,
+        durationThreshold: 0
+      });
+      const allEntries = observerForAll.takeRecords();
+      let interactionCountEstimate = 0;
+      let minKnownInteractionId = Infinity;
+      let maxKnownInteractionId = 0;
+
+      for (let e of allEntries) {
+        if (e.interactionId) {
+          minKnownInteractionId = Math.min(
+            minKnownInteractionId,
+            e.interactionId
+          );
+          maxKnownInteractionId = Math.max(
+            maxKnownInteractionId,
+            e.interactionId
+          );
+
+          interactionCountEstimate = maxKnownInteractionId
+            ? (maxKnownInteractionId - minKnownInteractionId) / 7 + 1
+            : 0;
+        }
+      }
+      return interactionCountEstimate;
+    }
+  };
+
+  const estimateP98LongestInteraction = () => {
+    const candidateInteractionIndex = Math.min(
+      longestInteractionList.length - 1,
+      Math.floor(getInteractionCountForNavigation() / 50)
+    );
+
+    return longestInteractionList[candidateInteractionIndex];
+  };
+
+  if (entries.length > 0) {
+    for (let entry of entries) {
+      const minLongestInteraction =
+        longestInteractionList[longestInteractionList.length - 1];
+      const existingInteraction = longestInteractionMap[entry.interactionId];
+      if (
+        existingInteraction ||
+        longestInteractionList.length < MAX_INTERACTIONS_TO_CONSIDER ||
+        entry.duration > minLongestInteraction.latency
+      ) {
+        // If the interaction already exists, update it. Otherwise create one.
+        if (existingInteraction) {
+          existingInteraction.entries.push(entry);
+          existingInteraction.latency = Math.max(
+            existingInteraction.latency,
+            entry.duration
+          );
+        } else {
+          const interaction = {
+            id: entry.interactionId,
+            latency: entry.duration,
+            entries: [entry]
+          };
+          longestInteractionMap[interaction.id] = interaction;
+          longestInteractionList.push(interaction);
+        }
+
+        // Sort the entries by latency (descending) and keep only the top ten.
+        longestInteractionList.sort((a, b) => b.latency - a.latency);
+        longestInteractionList
+          .splice(MAX_INTERACTIONS_TO_CONSIDER)
+          .forEach(i => {
+            delete longestInteractionMap[i.id];
+          });
+      }
+    }
+    return estimateP98LongestInteraction();
+  } else {
+    // nothing to report
+  }
+})();

package/browserscripts/pageinfo/visualElements.js

@@ -133,7 +133,8 @@
     const entries = observer.takeRecords();
     if (entries.length > 0) {
       const largestEntry = entries[entries.length - 1];
-      if (isElementPartlyInViewportAndVisible(largestEntry.element)) { 
+      // It seems that the API do not alwayas have a elememt
+      if (largestEntry.element && isElementPartlyInViewportAndVisible(largestEntry.element)) {
         keepLargestElementByType('LargestContentfulPaint', largestEntry.element);
       }
     }

package/browserscripts/timings/interactionToNextPaint.js

@@ -0,0 +1,116 @@
+(function () {
+  // This is an updated version of
+  // https://github.com/GoogleChrome/web-vitals/blob/next/src/onINP.ts
+
+  const supported = PerformanceObserver.supportedEntryTypes;
+  if (!supported || supported.indexOf('event') === -1) {
+    return;
+  }
+
+  // To prevent unnecessary memory usage on pages with lots of interactions,
+  // store at most 10 of the longest interactions to consider as INP candidates.
+  const MAX_INTERACTIONS_TO_CONSIDER = 10;
+
+  // A list of longest interactions on the page (by latency) sorted so the
+  // longest one is first. The list is as most MAX_INTERACTIONS_TO_CONSIDER long.
+  let longestInteractionList = [];
+
+  // A mapping of longest interactions by their interaction ID.
+  // This is used for faster lookup.
+  const longestInteractionMap = {};
+
+  const getInteractionCountForNavigation = () => {
+    // I guess the interactionCount is coming in Chrome later on
+    if (performance.interactionCount) {
+      return performance.interactionCount;
+    } else {
+      const observerForAll = new PerformanceObserver(list => {});
+      observerForAll.observe({
+        type: 'event',
+        buffered: true,
+        durationThreshold: 0
+      });
+      const allEntries = observerForAll.takeRecords();
+      let interactionCountEstimate = 0;
+      let minKnownInteractionId = Infinity;
+      let maxKnownInteractionId = 0;
+
+      for (let e of allEntries) {
+        if (e.interactionId) {
+          minKnownInteractionId = Math.min(
+            minKnownInteractionId,
+            e.interactionId
+          );
+          maxKnownInteractionId = Math.max(
+            maxKnownInteractionId,
+            e.interactionId
+          );
+
+          interactionCountEstimate = maxKnownInteractionId
+            ? (maxKnownInteractionId - minKnownInteractionId) / 7 + 1
+            : 0;
+        }
+      }
+      return interactionCountEstimate;
+    }
+  };
+
+  const estimateP98LongestInteraction = () => {
+    const candidateInteractionIndex = Math.min(
+      longestInteractionList.length - 1,
+      Math.floor(getInteractionCountForNavigation() / 50)
+    );
+
+    return longestInteractionList[candidateInteractionIndex];
+  };
+
+  const observer = new PerformanceObserver(list => {});
+  // Event Timing entries have their durations rounded to the nearest 8ms,
+  // so a duration of 40ms would be any event that spans 2.5 or more frames
+  // at 60Hz. This threshold is chosen to strike a balance between usefulness
+  // and performance. Running this callback for any interaction that spans
+  // just one or two frames is likely not worth the insight that could be
+  // gained.
+  observer.observe({type: 'event', buffered: true, durationThreshold: 40});
+  const entries = observer.takeRecords();
+
+  if (entries.length > 0) {
+    for (let entry of entries) {
+      const minLongestInteraction =
+        longestInteractionList[longestInteractionList.length - 1];
+      const existingInteraction = longestInteractionMap[entry.interactionId];
+      if (
+        existingInteraction ||
+        longestInteractionList.length < MAX_INTERACTIONS_TO_CONSIDER ||
+        entry.duration > minLongestInteraction.latency
+      ) {
+        // If the interaction already exists, update it. Otherwise create one.
+        if (existingInteraction) {
+          existingInteraction.latency = Math.max(
+            existingInteraction.latency,
+            entry.duration
+          );
+        } else {
+          const interaction = {
+            id: entry.interactionId,
+            latency: entry.duration
+          };
+          longestInteractionMap[interaction.id] = interaction;
+          longestInteractionList.push(interaction);
+        }
+
+        // Sort the entries by latency (descending) and keep only the top ten.
+        longestInteractionList.sort((a, b) => b.latency - a.latency);
+        longestInteractionList
+          .splice(MAX_INTERACTIONS_TO_CONSIDER)
+          .forEach(i => {
+            delete longestInteractionMap[i.id];
+          });
+      }
+    }
+    const inp = estimateP98LongestInteraction();
+    return inp.latency;
+  } else {
+    // nothing to report
+  }
+})();

package/browsertime/visualmetrics-portable.py

@@ -105,17 +105,22 @@ def crop_im(img, crop_x, crop_y, crop_x_offset, crop_y_offset, gravity=None):
             base_x -= crop_x // 2
             base_y -= crop_y // 2
 
-        base_x += crop_x_offset
-        base_y += crop_y_offset
-
-        # Take the maximum in case the offset was negative, and
-        # smaller than the base position
-        base_x = max(base_x, 0)
-        base_y = max(base_y, 0)
+        # Handle the boundaries of the crop using max to prevent
+        # negatives, and min to prevent going over the othersde of
+        # the image
+        start_x = min(width - 1, max(base_x + crop_x_offset, 0))
+        start_y = min(height - 1, max(base_y + crop_y_offset, 0))
+
+        end_x = min(width - 1, max(start_x + crop_x, 0))
+        end_y = min(height - 1, max(start_y + crop_y, 0))
+
+        if len(img[start_y:end_y, start_x:end_x, :]) == 0:
+            raise Exception(
+                f"Cropped image is empty. Image dimensions: {img.shape}, "
+                f"Crop Region: {crop_x}, {crop_y}, {crop_x_offset}, {crop_y_offset}"
+            )
 
-        return Image.fromarray(
-            img[base_y : base_y + crop_y, base_x : base_x + crop_x, :]
-        )
+        return Image.fromarray(img[start_y:end_y, start_x:end_x, :])
     except BaseException as e:
         logging.exception(e)
         return None
@@ -2214,7 +2219,7 @@ def calculate_hero_time(progress, directory, hero, viewport):
 
             logging.debug(
                 'Calculating render time for hero element "%s" at position [%d, %d, %d, %d]'
-                % (hero["name"], hero["x"], hero["y"], hero["width"], hero["height"])
+                % (hero["name"], hero_x, hero_y, hero_width, hero_height)
             )
 
             # Apply the mask to the target frame to create the reference frame

package/lib/chrome/longTaskMetrics.js

@@ -27,9 +27,13 @@ module.exports = function (result, options) {
   let longTasksBeforeFirstPaint = 0;
   let longTasksBeforeFirstContentfulPaint = 0;
   let longTasksAfterLoadEventEnd = 0;
+  let lastLongTask = 0;
 
   for (let longTask of result.browserScripts.pageinfo.longTask) {
     totalDuration += longTask.duration;
+    if (longTask.startTime > lastLongTask) {
+      lastLongTask = longTask.startTime;
+    }
     if (firstPaint && longTask.startTime < firstPaint) {
       longTasksBeforeFirstPaint++;
       totalDurationFirstPaint += longTask.duration;
@@ -61,6 +65,7 @@ module.exports = function (result, options) {
       totalDuration,
       totalBlockingTime: Number(totalBlockingTime.toFixed(0)),
       maxPotentialFid: Number(maxPotentialFid.toFixed(0)),
+      lastLongTask: Number(lastLongTask.toFixed(0)),
       beforeFirstPaint: {
         tasks: longTasksBeforeFirstPaint,
         totalDuration: totalDurationFirstPaint

package/lib/support/cli.js

@@ -584,6 +584,12 @@ module.exports.parseCommandLine = function parseCommandLine() {
         'Keep the original video. Use it when you have a Visual Metrics bug and want to create an issue at GitHub',
       group: 'video'
     })
+    .option('videoParams.thumbsize', {
+      default: 400,
+      describe:
+        'The maximum size of the thumbnail in the filmstrip. Default is 400 pixels in either direction. If videoParams.filmstripFullSize is used that setting overrides this.',
+      group: 'video'
+    })
     .option('videoParams.filmstripFullSize', {
       type: 'boolean',
       default: false,

package/lib/video/postprocessing/finetune/getTimingMetrics.js

@@ -52,7 +52,13 @@ module.exports = function (videoMetrics, timingMetrics, options) {
       value: vm.LastVisualChange
     });
   }
-  if (timingMetrics) {
+
+  if (vm.LargestContentfulPaint) {
+    metricsAndValues.push({
+      name: 'LargestContentfulPaint',
+      value: vm.LargestContentfulPaint
+    });
+  } else if (timingMetrics) {
     const pt = timingMetrics;
     metricsAndValues.push({
       name: 'DOMContentLoaded',

package/lib/video/postprocessing/visualmetrics/visualMetrics.js

@@ -58,6 +58,8 @@ module.exports = {
       false
     );
 
+    const thumbsize = get(options, 'videoParams.thumbsize', 400);
+
     const scriptArgs = [
       '--video',
       videoPath,
@@ -112,6 +114,9 @@ module.exports = {
       scriptArgs.unshift('--dir', imageDirPath);
       if (fullSizeFilmstrip) {
         scriptArgs.push('--full');
+      } else if (thumbsize !== 400) {
+        scriptArgs.push('--thumbsize');
+        scriptArgs.push(thumbsize);
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "description": "Browsertime",
-  "version": "16.3.0",
+  "version": "16.6.0",
   "bin": "./bin/browsertime.js",
   "dependencies": {
     "@cypress/xvfb": "1.2.4",