browsertime 27.0.4 → 27.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 27.2.0 - 2026-05-12
+
+### Added
+* Surface the page-level `recalculateStyle` summary (beforeFCP / beforeLCP element counts + durations) on the first HAR page as `_renderBlocking.recalculateStyle`. The per-request `_renderBlocking` map already projected onto each entry stays where it is — the page-level summary is what powers the "Elements that needed recalculate style before FCP" view and was previously only reachable via `browsertime.json` [#2466](https://github.com/sitespeedio/browsertime/pull/2466).
+
+## 27.1.0 - 2026-05-06
+
+### Added
+* Three new analyses on `result.cpu` derived from the same Chrome `trace.json` that's already collected when `--cpu` is on. `scriptCosts` produces the per-URL parse / compile / execute / total breakdown that Lighthouse's bootup-time audit shows, sorted by total descending. `forcedReflows` walks the main-thread task tree for `Layout` / `UpdateLayoutTree` events nested inside JS-driven tasks (`EventDispatch`, `FunctionCall`, `TimerFire`, `FireAnimationFrame`, …) — every match is a synchronous reflow caused by JavaScript reading a layout-triggering property mid-handler, reported with the script that triggered it. `nonCompositedAnimations` surfaces `Animation` events whose `compositeFailed` bitmask is non-zero, returning the unsupported properties (`top`, `box-shadow`, `filter`, …) so consumers can see what to swap for the GPU-friendly equivalent. Each new analysis is wrapped in its own try / catch so a bug in one can't poison the existing `categories` / `events` / `urls` payload [#PR1](https://github.com/sitespeedio/browsertime/pull/PR1).
+
+### Fixed
+* Replace the unmaintained `@sitespeed.io/tracium` dependency (extracted from Lighthouse circa 2017, last release 0.3.3) with an in-tree ESM port at `lib/chrome/trace/`. The algorithm is a 1:1 port; output of `computeMainThreadTasks` is byte-equivalent for any trace, so existing `result.cpu.{categories,events,urls}` consumers see no change. Pulling the parser inline lets new analyses ship at Browsertime's release cadence without a second `npm publish` step in between [#PR1](https://github.com/sitespeedio/browsertime/pull/PR1).
+* Modernise the trace-event classifier. The original list only knew about ~30 event names, so on busy 2026-era pages roughly half the trace fell through to "other" — on a sample cnet run that meant 1.3 s of "other" hiding `RunTask`, `v8.run`, `IntersectionObserverController::computeIntersections`, `PrePaint`, `Commit`, `Layerize`, `v8.callFunction`, `V8.DeserializeContext` and friends. The expanded list draws from modern Lighthouse + the WebPageTest-derived map in waterfall-tools + direct sampling of real traces, and a new `groupForEvent()` lookup adds `V8.GC*` prefix matching so future V8 GC phases auto-classify [#PR1](https://github.com/sitespeedio/browsertime/pull/PR1).
+* Bump `chrome-har` to 1.3.0 to pick up the new `_renderBlocking` field on each entry, lifting Chrome's CDP `renderBlockingStatus` (Chrome 108+) so downstream HAR consumers can see which resources blocked first paint without inferring it from the trace.
+
 ## 27.0.4 - 2026-05-05
 ### Fixed
 * Fix Safari iOS video time scale [#2457](https://github.com/sitespeedio/browsertime/pull/2457). This make the video and Safari metric match.

package/lib/chrome/parseCpuTrace.js

@@ -1,5 +1,10 @@
 import { getLogger } from '@sitespeed.io/log';
-import { computeMainThreadTasks } from '@sitespeed.io/tracium';
+import {
+  computeMainThreadTasks,
+  computeScriptCosts,
+  computeForcedReflows,
+  computeNonCompositedAnimations
+} from './trace/index.js';
 const log = getLogger('browsertime.chrome.cpu');
 
 function round(number_, decimals = 3) {
@@ -77,8 +82,39 @@ export async function parseCPUTrace(tracelog, url) {
 
     cleanedUrls.sort(slowestFirst);
 
+    // New analyses derived from the same trace. Each is independent
+    // of the others and won't produce noise on pages where the
+    // signal isn't present (empty arrays). Wrapped in a try so a
+    // bug in one analysis can't poison the existing categories /
+    // events / urls payload.
+    let scriptCosts = [];
+    let forcedReflows = [];
+    let nonCompositedAnimations = [];
+    try {
+      scriptCosts = computeScriptCosts(tracelog);
+    } catch (error) {
+      log.debug('computeScriptCosts failed: %s', error.message);
+    }
+    try {
+      forcedReflows = computeForcedReflows(tracelog);
+    } catch (error) {
+      log.debug('computeForcedReflows failed: %s', error.message);
+    }
+    try {
+      nonCompositedAnimations = computeNonCompositedAnimations(tracelog);
+    } catch (error) {
+      log.debug('computeNonCompositedAnimations failed: %s', error.message);
+    }
+
     log.debug('Chrome trace log finished parsed and sorted.');
-    return { categories, events, urls: cleanedUrls };
+    return {
+      categories,
+      events,
+      urls: cleanedUrls,
+      scriptCosts,
+      forcedReflows,
+      nonCompositedAnimations
+    };
   } catch (error) {
     log.error(
       'Could not parse the trace log from Chrome for url %s',

package/lib/chrome/trace/forced-reflows.js

@@ -0,0 +1,78 @@
+/**
+ * Forced reflow / synchronous layout detection.
+ *
+ * A forced reflow happens when JavaScript reads a layout-triggering
+ * property (offsetTop, getBoundingClientRect, …) inside an event /
+ * timer / animation-frame handler. The browser must synchronously
+ * recompute layout to answer, blocking the main thread until it's
+ * done. Classic perf-bug pattern; expensive on long DOM trees.
+ *
+ * In the trace this shows up as a Layout / UpdateLayoutTree event
+ * nested inside a JS-driven task (EventDispatch, FunctionCall,
+ * TimerFire, FireAnimationFrame, …). The unforced version of the
+ * same event happens at the top level between tasks. So the rule is:
+ * if the Layout's chain of ancestors includes any JS-driven task,
+ * call it forced.
+ *
+ * Returns: [{ eventName, duration, startTime, triggeredBy,
+ *             triggeredByUrl }, …]
+ *   eventName       — Layout or UpdateLayoutTree
+ *   duration / startTime — task timing in ms (already navstart-
+ *                          relative from main-thread-tasks.js)
+ *   triggeredBy     — the closest JS-driven ancestor's event name
+ *                     (e.g. EventDispatch, FunctionCall)
+ *   triggeredByUrl  — most-specific attributable URL of that
+ *                     ancestor; the script the user can open and fix
+ */
+
+import { compute } from './main-thread-tasks.js';
+
+const JS_DRIVEN = new Set([
+  'EventDispatch',
+  'EvaluateScript',
+  'v8.evaluateModule',
+  'FunctionCall',
+  'TimerFire',
+  'FireIdleCallback',
+  'FireAnimationFrame',
+  'RunMicrotasks',
+  'V8.Execute'
+]);
+
+const LAYOUT_EVENTS = new Set(['Layout', 'UpdateLayoutTree']);
+
+function urlFor(task) {
+  if (!task || !task.attributableURLs) return '';
+  return task.attributableURLs.at(-1) || '';
+}
+
+export function computeForcedReflows(trace) {
+  const allTasks = compute(trace);
+  const reflows = [];
+
+  // Walk every task — `compute()` returns the flat list with
+  // `.parent` linkage. For each Layout / UpdateLayoutTree, walk up
+  // the parent chain to find the nearest JS-driven ancestor. If we
+  // find one, the layout was forced.
+  for (const task of allTasks) {
+    if (!LAYOUT_EVENTS.has(task.event.name)) continue;
+
+    let ancestor = task.parent;
+    while (ancestor) {
+      if (JS_DRIVEN.has(ancestor.event.name)) break;
+      ancestor = ancestor.parent;
+    }
+    if (!ancestor) continue;
+
+    reflows.push({
+      eventName: task.event.name,
+      duration: Math.round(task.duration * 10) / 10,
+      startTime: Math.round(task.startTime * 10) / 10,
+      triggeredBy: ancestor.event.name,
+      triggeredByUrl: urlFor(ancestor)
+    });
+  }
+
+  reflows.sort((a, b) => b.duration - a.duration);
+  return reflows;
+}

package/lib/chrome/trace/index.js

@@ -0,0 +1,41 @@
+/**
+ * Chrome trace.json analyses, used by parseCpuTrace.js to produce
+ * the cpu/categories/events/urls payload that flows into the result
+ * JSON. Replaces the legacy `@sitespeed.io/tracium` dependency
+ * (extracted from Lighthouse 2017, unmaintained) with an in-tree
+ * ESM port of the same algorithm. Kept byte-equivalent for
+ * `computeMainThreadTasks` so existing consumers see the same task
+ * tree; new analyses (script costs, layout shift attribution,
+ * forced layouts, frame stability) will land here as additional
+ * exports rather than a separate package.
+ */
+
+import { compute } from './main-thread-tasks.js';
+
+export { computeScriptCosts } from './script-costs.js';
+export { computeForcedReflows } from './forced-reflows.js';
+export { computeNonCompositedAnimations } from './non-composited-animations.js';
+
+/**
+ * Compute the hierarchical main-thread task tree for a trace.
+ * Each task has its kind classified into one of:
+ *   parseHTML | styleLayout | paintCompositeRender |
+ *   scriptParseCompile | scriptEvaluation | garbageCollection | other
+ *
+ * @param {Object} trace  Parsed Chrome trace.json (with .traceEvents).
+ * @param {Object} [options]
+ * @param {boolean} [options.flatten=false]  When true, return all
+ *   tasks flat (parents and children); when false, only top-level.
+ * @returns {Array<Object>}
+ */
+export function computeMainThreadTasks(trace, options = {}) {
+  const { flatten = false } = options;
+  const allTasks = compute(trace);
+  const result = [];
+  for (const task of allTasks) {
+    task.kind = task.group.id;
+    delete task.group;
+    if (!task.parent || flatten) result.push(task);
+  }
+  return result;
+}

package/lib/chrome/trace/main-thread-tasks.js

@@ -0,0 +1,196 @@
+/**
+ * Trace events → hierarchical task list. Ported verbatim from
+ * @sitespeed.io/tracium 0.3.3 (Lighthouse 2017 lineage). Each
+ * resulting `TaskNode` carries:
+ *   { event, startTime, endTime, duration, selfTime,
+ *     attributableURLs, parent, children, group }
+ *
+ * Times are returned in ms, rebased to the first task's startTime.
+ *
+ * Reference (Lighthouse upstream this file came from):
+ *   https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/lib/tracehouse/main-thread-tasks.js
+ *
+ * Trace event format:
+ *   https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview
+ */
+
+import { taskGroups, groupForEvent } from './task-groups.js';
+import { computeTraceOfTab } from './trace-of-tab.js';
+
+function createNewTaskNode(event, parent) {
+  const newTask = {
+    event,
+    startTime: event.ts,
+    endTime: event.ph === 'X' ? event.ts + Number(event.dur || 0) : Number.NaN,
+    parent,
+    children: [],
+    // Filled in later
+    attributableURLs: [],
+    group: taskGroups.other,
+    duration: Number.NaN,
+    selfTime: Number.NaN
+  };
+  if (parent) {
+    parent.children.push(newTask);
+  }
+  return newTask;
+}
+
+function createTasksFromEvents(mainThreadEvents, priorTaskData, traceEndTs) {
+  const tasks = [];
+  let currentTask;
+
+  for (const event of mainThreadEvents) {
+    // TimerInstall is an instant event (ph === 'I') — process it
+    // first so timer→task attribution works for subsequent TimerFire.
+    if (event.name === 'TimerInstall' && currentTask) {
+      const timerId = event.args.data.timerId;
+      priorTaskData.timers.set(timerId, currentTask);
+    }
+
+    // Only X (Complete), B (Begin), E (End) carry the data we need.
+    if (event.ph !== 'X' && event.ph !== 'B' && event.ph !== 'E') continue;
+
+    // Walk up the stack until we're inside a task that hasn't ended.
+    while (
+      currentTask &&
+      Number.isFinite(currentTask.endTime) &&
+      currentTask.endTime <= event.ts
+    ) {
+      currentTask = currentTask.parent;
+    }
+
+    if (!currentTask) {
+      // Can't start a task with an end event — real-world traces
+      // sometimes have a stray E without a matching B. Skip rather
+      // than throw so a partly-malformed trace still produces output.
+      if (event.ph === 'E') continue;
+      currentTask = createNewTaskNode(event);
+      tasks.push(currentTask);
+      continue;
+    }
+
+    if (event.ph === 'X' || event.ph === 'B') {
+      // Nested event — child of currentTask.
+      const newTask = createNewTaskNode(event, currentTask);
+      tasks.push(newTask);
+      currentTask = newTask;
+    } else {
+      // event.ph === 'E' — close the current task. If currentTask
+      // wasn't a B (e.g. the previous event was an X), the trace is
+      // malformed; tolerate by skipping rather than throwing.
+      if (currentTask.event.ph !== 'B') continue;
+      currentTask.endTime = event.ts;
+      currentTask = currentTask.parent;
+    }
+  }
+
+  // Any tasks still open at the end of the trace end at traceEndTs.
+  while (currentTask && !Number.isFinite(currentTask.endTime)) {
+    currentTask.endTime = traceEndTs;
+    currentTask = currentTask.parent;
+  }
+
+  return tasks;
+}
+
+function computeRecursiveSelfTime(task, parent) {
+  if (parent && task.endTime > parent.endTime) {
+    // Real-world traces occasionally produce children that report an
+    // endTime past the parent's. Tolerate by treating the duration
+    // as zero rather than throwing — the rest of the analysis stays
+    // useful.
+    return 0;
+  }
+  const childTime = task.children
+    .map(child => computeRecursiveSelfTime(child, task))
+    .reduce((sum, child) => sum + child, 0);
+  task.duration = task.endTime - task.startTime;
+  task.selfTime = task.duration - childTime;
+  return task.duration;
+}
+
+function computeRecursiveAttributableURLs(task, parentURLs, priorTaskData) {
+  const argsData = task.event.args.data || {};
+  const stackFrameURLs = (argsData.stackTrace || []).map(entry => entry.url);
+
+  let taskURLs = [];
+  switch (task.event.name) {
+    case 'v8.compile':
+    case 'EvaluateScript':
+    case 'FunctionCall': {
+      taskURLs = [argsData.url, ...stackFrameURLs];
+      break;
+    }
+    case 'v8.compileModule': {
+      taskURLs = [task.event.args.fileName, ...stackFrameURLs];
+      break;
+    }
+    case 'TimerFire': {
+      const timerId = task.event.args.data.timerId;
+      const timerInstallerTaskNode = priorTaskData.timers.get(timerId);
+      if (!timerInstallerTaskNode) break;
+      taskURLs = [
+        ...timerInstallerTaskNode.attributableURLs,
+        ...stackFrameURLs
+      ];
+      break;
+    }
+    default: {
+      taskURLs = stackFrameURLs;
+      break;
+    }
+  }
+
+  const attributableURLs = [...parentURLs];
+  for (const url of taskURLs) {
+    if (!url) continue; // empty URL
+    if (attributableURLs.at(-1) === url) continue; // dedupe consecutive
+    attributableURLs.push(url);
+  }
+  task.attributableURLs = attributableURLs;
+  for (const child of task.children)
+    computeRecursiveAttributableURLs(child, attributableURLs, priorTaskData);
+}
+
+function computeRecursiveTaskGroup(task, parentGroup) {
+  const group = groupForEvent(task.event.name);
+  task.group = group || parentGroup || taskGroups.other;
+  for (const child of task.children)
+    computeRecursiveTaskGroup(child, task.group);
+}
+
+export function getMainThreadTasks(traceEvents, traceEndTs) {
+  const timers = new Map();
+  const priorTaskData = { timers };
+  const tasks = createTasksFromEvents(traceEvents, priorTaskData, traceEndTs);
+
+  for (const task of tasks) {
+    if (task.parent) continue;
+    computeRecursiveSelfTime(task);
+    computeRecursiveAttributableURLs(task, [], priorTaskData);
+    computeRecursiveTaskGroup(task);
+  }
+
+  // Rebase all the times to be relative to start of trace in ms.
+  const firstTs = (tasks[0] || { startTime: 0 }).startTime;
+  for (const task of tasks) {
+    task.startTime = (task.startTime - firstTs) / 1000;
+    task.endTime = (task.endTime - firstTs) / 1000;
+    task.duration /= 1000;
+    task.selfTime /= 1000;
+    if (!Number.isFinite(task.selfTime)) {
+      // Real-world tolerance — see computeRecursiveSelfTime. If a
+      // task slipped through with NaN selfTime, treat it as zero so
+      // downstream summing doesn't poison every category.
+      task.selfTime = 0;
+    }
+  }
+
+  return tasks;
+}
+
+export function compute(trace) {
+  const { mainThreadEvents, timestamps } = computeTraceOfTab(trace);
+  return getMainThreadTasks(mainThreadEvents, timestamps.traceEnd);
+}

package/lib/chrome/trace/non-composited-animations.js

@@ -0,0 +1,55 @@
+/**
+ * Non-composited animations — animations that triggered Layout or
+ * Paint instead of running entirely on the compositor thread.
+ *
+ * Compositor-only animations (transform, opacity) hand off to the
+ * GPU and don't block the main thread. Anything that touches
+ * `top` / `left` / `width` / `box-shadow` / non-transformable
+ * filters / etc. forces a per-frame layout or paint, which means
+ * jank on busy main threads.
+ *
+ * Chrome marks these in the trace via `Animation` events whose
+ * `args.data.compositeFailed` bitmask is non-zero, plus a list of
+ * `unsupportedProperties` strings. We surface the raw values; the
+ * consumer can map the bitmask to human reasons (see Lighthouse's
+ * non-composited-animations audit for the canonical mapping).
+ *
+ * Returns: [{ name, id, compositeFailed, unsupportedProperties,
+ *             startTime }, …]
+ *   name            — args.data.nodeName when present (rare)
+ *   id              — args.data.id (compositor-internal)
+ *   compositeFailed — bitmask of failure reasons
+ *   unsupportedProperties — array of property names that blocked
+ *                           composite (e.g. ['top','box-shadow'])
+ *   startTime       — event ts in microseconds (raw trace timestamp)
+ */
+
+export function computeNonCompositedAnimations(trace) {
+  const seen = new Set();
+  const animations = [];
+
+  for (const event of trace.traceEvents) {
+    if (event.name !== 'Animation') continue;
+    // Animation events fire at multiple phases; the compositeFailed
+    // bitmask is set once per animation lifecycle. Dedupe by id so we
+    // don't list the same failed animation N times.
+    const data = (event.args && event.args.data) || {};
+    const failed = data.compositeFailed || 0;
+    const unsupported = data.unsupportedProperties || [];
+    if (!failed && unsupported.length === 0) continue;
+
+    const id = data.id || `${event.ts}`;
+    if (seen.has(id)) continue;
+    seen.add(id);
+
+    animations.push({
+      name: data.nodeName || '',
+      id: data.id || '',
+      compositeFailed: failed,
+      unsupportedProperties: unsupported,
+      startTime: event.ts
+    });
+  }
+
+  return animations;
+}

package/lib/chrome/trace/script-costs.js

@@ -0,0 +1,88 @@
+/**
+ * Per-script JS cost breakdown — the same data Lighthouse's
+ * `bootup-time` audit computes, surfaced as a structured array so
+ * downstream consumers can render a "top scripts by main-thread
+ * time" table without re-deriving it from raw tasks.
+ *
+ * For each attributable URL we sum the self-time of every main-thread
+ * task that's classified as parse / compile / execute, and return:
+ *   [{ url, parse, compile, execute, total }, …]
+ *
+ * Reference: Lighthouse `lighthouse-core/audits/bootup-time.js`.
+ *
+ * Times are in ms, rounded to one decimal. Sorted by `total` desc so
+ * the worst offenders are at index 0.
+ */
+
+import { compute } from './main-thread-tasks.js';
+
+// Trace event name → cost bucket. Built once at module-load time so
+// the inner hot loop is a single Map.get per task.
+const PARSE_EVENTS = new Set(['v8.parseOnBackground']);
+const COMPILE_EVENTS = new Set(['v8.compile', 'v8.compileModule']);
+const EXECUTE_EVENTS = new Set([
+  'EvaluateScript',
+  'v8.evaluateModule',
+  'FunctionCall',
+  'TimerFire',
+  'FireIdleCallback',
+  'FireAnimationFrame',
+  'RunMicrotasks',
+  'V8.Execute',
+  'EventDispatch'
+]);
+
+function bucketFor(eventName) {
+  if (PARSE_EVENTS.has(eventName)) return 'parse';
+  if (COMPILE_EVENTS.has(eventName)) return 'compile';
+  if (EXECUTE_EVENTS.has(eventName)) return 'execute';
+  return;
+}
+
+function round(ms) {
+  return Math.round(ms * 10) / 10;
+}
+
+/**
+ * @param {Object} trace  Parsed Chrome trace.json (with .traceEvents).
+ * @returns {Array<{url:string, parse:number, compile:number,
+ *                  execute:number, total:number}>}
+ *   Per-URL JS cost in ms, sorted by total desc.
+ */
+export function computeScriptCosts(trace) {
+  const allTasks = compute(trace);
+  const byUrl = new Map();
+
+  for (const task of allTasks) {
+    const bucket = bucketFor(task.event.name);
+    if (!bucket) continue;
+
+    // Lighthouse credits the most-specific URL in the attributable
+    // chain (the innermost stack frame / target script). For an event
+    // like EvaluateScript this is the URL of the script being
+    // evaluated; for FunctionCall it's the script the function lives
+    // in. attributableURLs is built bottom-up so the last element is
+    // the right one.
+    const url = task.attributableURLs.at(-1);
+    if (!url) continue;
+
+    let entry = byUrl.get(url);
+    if (!entry) {
+      entry = { url, parse: 0, compile: 0, execute: 0, total: 0 };
+      byUrl.set(url, entry);
+    }
+    entry[bucket] += task.selfTime;
+    entry.total += task.selfTime;
+  }
+
+  const result = [];
+  for (const entry of byUrl.values()) {
+    entry.parse = round(entry.parse);
+    entry.compile = round(entry.compile);
+    entry.execute = round(entry.execute);
+    entry.total = round(entry.total);
+    result.push(entry);
+  }
+  result.sort((a, b) => b.total - a.total);
+  return result;
+}