core(mpfid): add max LoAFs to debugdata (#15684)

GoogleChrome · Dec 11, 2023 · bb84b18 · bb84b18
1 parent 1eeb9bf
commit bb84b18
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 1 deletion.
diff --git a/core/audits/metrics/max-potential-fid.js b/core/audits/metrics/max-potential-fid.js
@@ -6,6 +6,8 @@
 
 import {Audit} from '../audit.js';
 import {MaxPotentialFID as ComputedFid} from '../../computed/metrics/max-potential-fid.js';
+import {ProcessedTrace} from '../../computed/processed-trace.js';
+import {ProcessedNavigation} from '../../computed/processed-navigation.js';
 import * as i18n from '../../lib/i18n/i18n.js';
 
 const UIStrings = {
@@ -48,6 +50,51 @@ class MaxPotentialFID extends Audit {
     };
   }
 
+  /**
+   * Extract potential LoAF replacements for MPFID from the trace to log in
+   * debugdata details.
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
+   * @return {{type: 'debugdata', observedMaxDurationLoaf: LH.TraceEvent, observedMaxBlockingLoaf: LH.TraceEvent}|undefined}
+   */
+  static getLongAnimationFrameDetails(processedTrace, processedNavigation) {
+    const {firstContentfulPaint} = processedNavigation.timestamps;
+    const loafs = processedTrace.mainThreadEvents.filter(evt => {
+      return evt.name === 'LongAnimationFrame' &&
+          evt.ph === 'b' &&
+          evt.ts >= firstContentfulPaint;
+    });
+
+    let currentMaxDuration = -Infinity;
+    let currentMaxDurationLoaf;
+    let currentMaxBlocking = -Infinity;
+    let currentMaxBlockingLoaf;
+
+    for (const loaf of loafs) {
+      const loafDuration = loaf.args?.data?.duration;
+      const loafBlocking = loaf.args?.data?.blockingDuration;
+      // Should never happen, so mostly keeping the type checker happy.
+      if (loafDuration === undefined || loafBlocking === undefined) continue;
+
+      if (loafDuration > currentMaxDuration) {
+        currentMaxDuration = loafDuration;
+        currentMaxDurationLoaf = loaf;
+      }
+      if (loafBlocking > currentMaxBlocking) {
+        currentMaxBlocking = loafBlocking;
+        currentMaxBlockingLoaf = loaf;
+      }
+    }
+
+    if (!currentMaxDurationLoaf || !currentMaxBlockingLoaf) return;
+
+    return {
+      type: 'debugdata',
+      observedMaxDurationLoaf: currentMaxDurationLoaf,
+      observedMaxBlockingLoaf: currentMaxBlockingLoaf,
+    };
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
    * @param {LH.Audit.Context} context
@@ -61,6 +108,11 @@ class MaxPotentialFID extends Audit {
       settings: context.settings, URL: artifacts.URL};
     const metricResult = await ComputedFid.request(metricComputationData, context);
 
+    const processedTrace = await ProcessedTrace.request(trace, context);
+    const processedNavigation = await ProcessedNavigation.request(trace, context);
+    const details = MaxPotentialFID.getLongAnimationFrameDetails(processedTrace,
+        processedNavigation);
+
     return {
       score: Audit.computeLogNormalScore(
         {p10: context.options.p10, median: context.options.median},
@@ -69,6 +121,7 @@ class MaxPotentialFID extends Audit {
       numericValue: metricResult.timing,
       numericUnit: 'millisecond',
       displayValue: str_(i18n.UIStrings.ms, {timeInMs: metricResult.timing}),
+      details,
     };
   }
 }

diff --git a/core/test/results/artifacts/defaultPass.trace.json b/core/test/results/artifacts/defaultPass.trace.json
@@ -12867,6 +12867,8 @@
   {"args":{},"cat":"disabled-by-default-devtools.timeline","dur":6,"name":"RunTask","ph":"X","pid":31161,"tdur":6,"tid":259,"ts":8703546608,"tts":6493080},
   {"args":{},"cat":"loading","dur":1,"name":"BackgroundHTMLParser::PumpTokenizer","ph":"X","pid":31161,"tdur":1,"tid":259,"ts":8703546610,"tts":6493082},
   {"args":{},"cat":"disabled-by-default-devtools.timeline","dur":1174877,"name":"RunTask","ph":"X","pid":31161,"tdur":904908,"tid":259,"ts":8703546617,"tts":6493089},
+  {"args":{"data":{"blockingDuration":1139.261,"duration":1199.518,"numScripts":1,"renderDuration":14.777,"styleAndLayoutDuration":13.034}},"cat":"devtools.timeline","id2":{"local":"0x13b00174d98"},"name":"LongAnimationFrame","ph":"b","pid":31161,"scope":"devtools.timeline","tid":259,"ts":8703546175},
+  {"args":{},"cat":"devtools.timeline","id2":{"local":"0x13b00174d98"},"name":"LongAnimationFrame","ph":"e","pid":31161,"scope":"devtools.timeline","tid":259,"ts":8704745693},
   {"args":{"beginData":{"frame":"537BC44B4EE044D67F9FFE7A76173AB1","startLine":242,"url":"http://localhost:10200/dobetterweb/dbw_tester.html"},"endData":{"endLine":453}},"cat":"devtools.timeline","dur":1174038,"name":"ParseHTML","ph":"X","pid":31161,"tdur":904068,"tid":259,"ts":8703546619,"tts":6493094},
   {"args":{},"cat":"blink,loading","dur":762,"name":"HTMLDocumentParser::processTokenizedChunkFromBackgroundParser","ph":"X","pid":31161,"tdur":762,"tid":259,"ts":8703546626,"tts":6493098},
   {"args":{"data":{"frame":"537BC44B4EE044D67F9FFE7A76173AB1"}},"cat":"disabled-by-default-devtools.timeline","name":"ScheduleStyleRecalculation","ph":"I","pid":31161,"s":"t","tid":259,"ts":8703546637,"tts":6493111},

diff --git a/core/test/results/sample_v2.json b/core/test/results/sample_v2.json
@@ -198,7 +198,52 @@
       "scoreDisplayMode": "numeric",
       "numericValue": 1174.877,
       "numericUnit": "millisecond",
-      "displayValue": "1,170 ms"
+      "displayValue": "1,170 ms",
+      "details": {
+        "type": "debugdata",
+        "observedMaxDurationLoaf": {
+          "args": {
+            "data": {
+              "blockingDuration": 1139.261,
+              "duration": 1199.518,
+              "numScripts": 1,
+              "renderDuration": 14.777,
+              "styleAndLayoutDuration": 13.034
+            }
+          },
+          "cat": "devtools.timeline",
+          "id2": {
+            "local": "0x13b00174d98"
+          },
+          "name": "LongAnimationFrame",
+          "ph": "b",
+          "pid": 31161,
+          "scope": "devtools.timeline",
+          "tid": 259,
+          "ts": 8703546175
+        },
+        "observedMaxBlockingLoaf": {
+          "args": {
+            "data": {
+              "blockingDuration": 1139.261,
+              "duration": 1199.518,
+              "numScripts": 1,
+              "renderDuration": 14.777,
+              "styleAndLayoutDuration": 13.034
+            }
+          },
+          "cat": "devtools.timeline",
+          "id2": {
+            "local": "0x13b00174d98"
+          },
+          "name": "LongAnimationFrame",
+          "ph": "b",
+          "pid": 31161,
+          "scope": "devtools.timeline",
+          "tid": 259,
+          "ts": 8703546175
+        }
+      }
     },
     "cumulative-layout-shift": {
       "id": "cumulative-layout-shift",

diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts
@@ -1017,6 +1017,8 @@ export interface TraceEvent {
       type?: string;
       functionName?: string;
       name?: string;
+      duration?: number;
+      blockingDuration?: number;
     };
     frame?: string;
     name?: string;