lighthouse 9.6.8 → 10.0.0

package/core/computed/load-simulator.js

@@ -0,0 +1,92 @@
+/**
+ * @license Copyright 2018 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {makeComputedArtifact} from './computed-artifact.js';
+import * as constants from '../config/constants.js';
+import {Simulator} from '../lib/dependency-graph/simulator/simulator.js';
+import {NetworkAnalysis} from './network-analysis.js';
+
+class LoadSimulator {
+  /**
+   * @param {{devtoolsLog: LH.DevtoolsLog, settings: LH.Audit.Context['settings']}} data
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<Simulator>}
+   */
+  static async compute_(data, context) {
+    const {throttlingMethod, throttling, precomputedLanternData} = data.settings;
+    const networkAnalysis = await NetworkAnalysis.request(data.devtoolsLog, context);
+
+    /** @type {LH.Gatherer.Simulation.Options} */
+    const options = {
+      additionalRttByOrigin: networkAnalysis.additionalRttByOrigin,
+      serverResponseTimeByOrigin: networkAnalysis.serverResponseTimeByOrigin,
+      observedThroughput: networkAnalysis.throughput,
+    };
+
+    // If we have precomputed lantern data, overwrite our observed estimates and use precomputed instead
+    // for increased stability.
+    if (precomputedLanternData) {
+      options.additionalRttByOrigin = new Map(Object.entries(
+        precomputedLanternData.additionalRttByOrigin));
+      options.serverResponseTimeByOrigin = new Map(Object.entries(
+        precomputedLanternData.serverResponseTimeByOrigin));
+    }
+
+    switch (throttlingMethod) {
+      case 'provided':
+        options.rtt = networkAnalysis.rtt;
+        options.throughput = networkAnalysis.throughput;
+        options.cpuSlowdownMultiplier = 1;
+        options.layoutTaskMultiplier = 1;
+        break;
+      case 'devtools':
+        if (throttling) {
+          options.rtt =
+            throttling.requestLatencyMs / constants.throttling.DEVTOOLS_RTT_ADJUSTMENT_FACTOR;
+          options.throughput =
+            throttling.downloadThroughputKbps * 1024 /
+            constants.throttling.DEVTOOLS_THROUGHPUT_ADJUSTMENT_FACTOR;
+        }
+
+        options.cpuSlowdownMultiplier = 1;
+        options.layoutTaskMultiplier = 1;
+        break;
+      case 'simulate':
+        if (throttling) {
+          options.rtt = throttling.rttMs;
+          options.throughput = throttling.throughputKbps * 1024;
+          options.cpuSlowdownMultiplier = throttling.cpuSlowdownMultiplier;
+        }
+        break;
+      default:
+        // intentionally fallback to simulator defaults
+        break;
+    }
+
+    return new Simulator(options);
+  }
+
+  /**
+   * @param {LH.Artifacts.NetworkAnalysis} networkAnalysis
+   * @return {LH.PrecomputedLanternData}
+   */
+  static convertAnalysisToSaveableLanternData(networkAnalysis) {
+    /** @type {LH.PrecomputedLanternData} */
+    const lanternData = {additionalRttByOrigin: {}, serverResponseTimeByOrigin: {}};
+    for (const [origin, value] of networkAnalysis.additionalRttByOrigin.entries()) {
+      if (origin.startsWith('http')) lanternData.additionalRttByOrigin[origin] = value;
+    }
+
+    for (const [origin, value] of networkAnalysis.serverResponseTimeByOrigin.entries()) {
+      if (origin.startsWith('http')) lanternData.serverResponseTimeByOrigin[origin] = value;
+    }
+
+    return lanternData;
+  }
+}
+
+const LoadSimulatorComputed = makeComputedArtifact(LoadSimulator, ['devtoolsLog', 'settings']);
+export {LoadSimulatorComputed as LoadSimulator};

package/core/computed/main-resource.d.ts

@@ -0,0 +1,25 @@
+export { MainResourceComputed as MainResource };
+declare const MainResourceComputed: typeof MainResource & {
+    request: (dependencies: {
+        URL: LH.Artifacts['URL'];
+        devtoolsLog: import("../index.js").DevtoolsLog;
+    }, context: import("../../types/utility-types.js").default.ImmutableObject<{
+        computedCache: Map<string, import("../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
+    }>) => Promise<import("../lib/network-request.js").NetworkRequest>;
+};
+/**
+ * @fileoverview This artifact identifies the main resource on the page. Current solution assumes
+ * that the main resource is the first non-rediected one.
+ */
+declare class MainResource {
+    /**
+     * @param {{URL: LH.Artifacts['URL'], devtoolsLog: LH.DevtoolsLog}} data
+     * @param {LH.Artifacts.ComputedContext} context
+     * @return {Promise<LH.Artifacts.NetworkRequest>}
+     */
+    static compute_(data: {
+        URL: LH.Artifacts['URL'];
+        devtoolsLog: import("../index.js").DevtoolsLog;
+    }, context: LH.Artifacts.ComputedContext): Promise<LH.Artifacts.NetworkRequest>;
+}
+//# sourceMappingURL=main-resource.d.ts.map

package/core/computed/main-resource.js

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright 2017 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {makeComputedArtifact} from './computed-artifact.js';
+import {NetworkAnalyzer} from '../lib/dependency-graph/simulator/network-analyzer.js';
+import {NetworkRecords} from './network-records.js';
+
+/**
+ * @fileoverview This artifact identifies the main resource on the page. Current solution assumes
+ * that the main resource is the first non-rediected one.
+ */
+class MainResource {
+  /**
+   * @param {{URL: LH.Artifacts['URL'], devtoolsLog: LH.DevtoolsLog}} data
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<LH.Artifacts.NetworkRequest>}
+   */
+  static async compute_(data, context) {
+    const {mainDocumentUrl} = data.URL;
+    if (!mainDocumentUrl) throw new Error('mainDocumentUrl must exist to get the main resource');
+    const requests = await NetworkRecords.request(data.devtoolsLog, context);
+    const mainResource = NetworkAnalyzer.findResourceForUrl(requests, mainDocumentUrl);
+    if (!mainResource) {
+      throw new Error('Unable to identify the main resource');
+    }
+
+    return mainResource;
+  }
+}
+
+const MainResourceComputed = makeComputedArtifact(MainResource, ['URL', 'devtoolsLog']);
+export {MainResourceComputed as MainResource};

package/core/computed/main-thread-tasks.d.ts

@@ -0,0 +1,15 @@
+export { MainThreadTasksComputed as MainThreadTasks };
+declare const MainThreadTasksComputed: typeof MainThreadTasks & {
+    request: (dependencies: import("../index.js").Trace, context: import("../../types/utility-types.js").default.ImmutableObject<{
+        computedCache: Map<string, import("../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
+    }>) => Promise<import("../lib/tracehouse/main-thread-tasks.js").TaskNode[]>;
+};
+declare class MainThreadTasks {
+    /**
+     * @param {LH.Trace} trace
+     * @param {LH.Artifacts.ComputedContext} context
+     * @return {Promise<Array<LH.Artifacts.TaskNode>>}
+     */
+    static compute_(trace: LH.Trace, context: LH.Artifacts.ComputedContext): Promise<Array<LH.Artifacts.TaskNode>>;
+}
+//# sourceMappingURL=main-thread-tasks.d.ts.map

package/core/computed/main-thread-tasks.js

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright 2019 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {makeComputedArtifact} from './computed-artifact.js';
+import {MainThreadTasks as MainThreadTasks_} from '../lib/tracehouse/main-thread-tasks.js';
+import {ProcessedTrace} from './processed-trace.js';
+
+class MainThreadTasks {
+  /**
+   * @param {LH.Trace} trace
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<Array<LH.Artifacts.TaskNode>>}
+   */
+  static async compute_(trace, context) {
+    const {mainThreadEvents, frames, timestamps} = await ProcessedTrace.request(trace, context);
+    return MainThreadTasks_.getMainThreadTasks(mainThreadEvents, frames, timestamps.traceEnd,
+        timestamps.timeOrigin);
+  }
+}
+
+const MainThreadTasksComputed = makeComputedArtifact(MainThreadTasks, null);
+export {MainThreadTasksComputed as MainThreadTasks};

package/core/computed/manifest-values.d.ts

@@ -0,0 +1,24 @@
+export { ManifestValuesComputed as ManifestValues };
+declare const ManifestValuesComputed: typeof ManifestValues & {
+    request: (dependencies: Pick<import("../index.js").Artifacts, "InstallabilityErrors" | "WebAppManifest">, context: import("../../types/utility-types.js").default.ImmutableObject<{
+        computedCache: Map<string, import("../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
+    }>) => Promise<import("../index.js").Artifacts.ManifestValues>;
+};
+declare class ManifestValues {
+    /** @typedef {(val: NonNullable<LH.Artifacts.Manifest['value']>, errors: LH.Artifacts.InstallabilityErrors['errors']) => boolean} Validator */
+    /**
+     * @return {Array<{id: LH.Artifacts.ManifestValueCheckID, failureText: string, validate: Validator}>}
+     */
+    static get manifestChecks(): {
+        id: LH.Artifacts.ManifestValueCheckID;
+        failureText: string;
+        validate: (val: NonNullable<LH.Artifacts.Manifest['value']>, errors: LH.Artifacts.InstallabilityErrors['errors']) => boolean;
+    }[];
+    /**
+     * Returns results of all manifest checks
+     * @param {Pick<LH.Artifacts, 'WebAppManifest'|'InstallabilityErrors'>} Manifest
+     * @return {Promise<LH.Artifacts.ManifestValues>}
+     */
+    static compute_({ WebAppManifest, InstallabilityErrors }: Pick<LH.Artifacts, 'WebAppManifest' | 'InstallabilityErrors'>): Promise<LH.Artifacts.ManifestValues>;
+}
+//# sourceMappingURL=manifest-values.d.ts.map

package/core/computed/manifest-values.js

@@ -0,0 +1,136 @@
+/**
+ * @license Copyright 2016 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {makeComputedArtifact} from './computed-artifact.js';
+import * as icons from '../lib/icons.js';
+
+const PWA_DISPLAY_VALUES = ['minimal-ui', 'fullscreen', 'standalone'];
+
+// Historically, Chrome recommended 12 chars as the maximum short_name length to prevent truncation.
+// For more discussion, see https://github.com/GoogleChrome/lighthouse/issues/69 and https://developer.chrome.com/apps/manifest/name#short_name
+const SUGGESTED_SHORTNAME_LENGTH = 12;
+
+class ManifestValues {
+  /** @typedef {(val: NonNullable<LH.Artifacts.Manifest['value']>, errors: LH.Artifacts.InstallabilityErrors['errors']) => boolean} Validator */
+
+  /**
+   * @return {Array<{id: LH.Artifacts.ManifestValueCheckID, failureText: string, validate: Validator}>}
+   */
+  static get manifestChecks() {
+    return [
+      {
+        id: 'hasStartUrl',
+        failureText: 'Manifest does not contain a `start_url`',
+        validate: manifestValue => !!manifestValue.start_url.value,
+      },
+      {
+        id: 'hasIconsAtLeast144px',
+        failureText: 'Manifest does not have a PNG icon of at least 144px',
+        validate: manifestValue => icons.doExist(manifestValue) &&
+            icons.pngSizedAtLeast(144, manifestValue).length > 0,
+      },
+      {
+        id: 'hasIconsAtLeast512px',
+        failureText: 'Manifest does not have a PNG icon of at least 512px',
+        validate: manifestValue => icons.doExist(manifestValue) &&
+            icons.pngSizedAtLeast(512, manifestValue).length > 0,
+      },
+      {
+        id: 'fetchesIcon',
+        failureText: 'Manifest icon failed to be fetched',
+        validate: (manifestValue, errors) => {
+          const failedToFetchIconErrorIds = [
+            'cannot-download-icon',
+            'no-icon-available',
+          ];
+          return icons.doExist(manifestValue) &&
+            !errors.some(error => failedToFetchIconErrorIds.includes(error.errorId));
+        },
+      },
+      {
+        id: 'hasPWADisplayValue',
+        failureText: 'Manifest\'s `display` value is not one of: ' + PWA_DISPLAY_VALUES.join(' | '),
+        validate: manifestValue => PWA_DISPLAY_VALUES.includes(manifestValue.display.value),
+      },
+      {
+        id: 'hasBackgroundColor',
+        failureText: 'Manifest does not have `background_color`',
+        validate: manifestValue => !!manifestValue.background_color.value,
+      },
+      {
+        id: 'hasThemeColor',
+        failureText: 'Manifest does not have `theme_color`',
+        validate: manifestValue => !!manifestValue.theme_color.value,
+      },
+      {
+        id: 'hasShortName',
+        failureText: 'Manifest does not have `short_name`',
+        validate: manifestValue => !!manifestValue.short_name.value,
+      },
+      {
+        id: 'shortNameLength',
+        failureText: `Manifest's \`short_name\` is too long (>${SUGGESTED_SHORTNAME_LENGTH} ` +
+          `characters) to be displayed on a homescreen without truncation`,
+        // Pass if there's no short_name. Don't want to report a non-existent string is too long
+        validate: manifestValue => !!manifestValue.short_name.value &&
+            manifestValue.short_name.value.length <= SUGGESTED_SHORTNAME_LENGTH,
+      },
+      {
+        id: 'hasName',
+        failureText: 'Manifest does not have `name`',
+        validate: manifestValue => !!manifestValue.name.value,
+      },
+      {
+        id: 'hasMaskableIcon',
+        failureText: 'Manifest does not have at least one icon that is maskable',
+        validate: ManifestValue => icons.doExist(ManifestValue) &&
+            icons.containsMaskableIcon(ManifestValue),
+      },
+    ];
+  }
+
+  /**
+   * Returns results of all manifest checks
+   * @param {Pick<LH.Artifacts, 'WebAppManifest'|'InstallabilityErrors'>} Manifest
+   * @return {Promise<LH.Artifacts.ManifestValues>}
+   */
+  static async compute_({WebAppManifest, InstallabilityErrors}) {
+    // if the manifest isn't there or is invalid json, we report that and bail
+    if (WebAppManifest === null) {
+      return {
+        isParseFailure: true,
+        parseFailureReason: 'No manifest was fetched',
+        allChecks: [],
+      };
+    }
+    const manifestValue = WebAppManifest.value;
+    if (manifestValue === undefined) {
+      return {
+        isParseFailure: true,
+        parseFailureReason: 'Manifest failed to parse as valid JSON',
+        allChecks: [],
+      };
+    }
+
+    // manifest is valid, so do the rest of the checks
+    const remainingChecks = ManifestValues.manifestChecks.map(item => {
+      return {
+        id: item.id,
+        failureText: item.failureText,
+        passing: item.validate(manifestValue, InstallabilityErrors.errors),
+      };
+    });
+
+    return {
+      isParseFailure: false,
+      allChecks: remainingChecks,
+    };
+  }
+}
+
+const ManifestValuesComputed =
+  makeComputedArtifact(ManifestValues, ['InstallabilityErrors', 'WebAppManifest']);
+export {ManifestValuesComputed as ManifestValues};

package/core/computed/metrics/cumulative-layout-shift.d.ts

@@ -0,0 +1,53 @@
+export { CumulativeLayoutShiftComputed as CumulativeLayoutShift };
+export type LayoutShiftEvent = {
+    ts: number;
+    isMainFrame: boolean;
+    weightedScore: number;
+};
+declare const CumulativeLayoutShiftComputed: typeof CumulativeLayoutShift & {
+    request: (dependencies: import("../../index.js").Trace, context: import("../../../types/utility-types.js").default.ImmutableObject<{
+        computedCache: Map<string, import("../../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
+    }>) => Promise<{
+        cumulativeLayoutShift: number;
+        cumulativeLayoutShiftMainFrame: number;
+        totalCumulativeLayoutShift: number;
+    }>;
+};
+/** @typedef {{ts: number, isMainFrame: boolean, weightedScore: number}} LayoutShiftEvent */
+declare class CumulativeLayoutShift {
+    /**
+     * Returns all LayoutShift events that had no recent input.
+     * Only a `weightedScore` per event is returned. For non-main-frame events, this is
+     * the only score that matters. For main-frame events, `weighted_score_delta === score`.
+     * @see https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_shift_tracker.cc;l=492-495;drc=de3b3a8a8839269c6b44403fa38a13a1ed12fed5
+     * @param {LH.TraceEvent[]} traceEvents
+     * @return {Array<LayoutShiftEvent>}
+     */
+    static getLayoutShiftEvents(traceEvents: LH.TraceEvent[]): Array<LayoutShiftEvent>;
+    /**
+     * Calculates cumulative layout shifts per cluster (session) of LayoutShift
+     * events -- where a new cluster is created when there's a gap of more than
+     * 1000ms since the last LayoutShift event or the cluster is greater than
+     * 5000ms long -- and returns the max LayoutShift score found.
+     * @param {Array<LayoutShiftEvent>} layoutShiftEvents
+     * @return {number}
+     */
+    static calculate(layoutShiftEvents: Array<LayoutShiftEvent>): number;
+    /**
+     * Sum all layout shift events from the entire trace.
+     * @param {Array<LayoutShiftEvent>} layoutShiftEvents
+     * @return {number}
+     */
+    static calculateTotalCumulativeLayoutShift(layoutShiftEvents: Array<LayoutShiftEvent>): number;
+    /**
+     * @param {LH.Trace} trace
+     * @param {LH.Artifacts.ComputedContext} context
+     * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number, totalCumulativeLayoutShift: number}>}
+     */
+    static compute_(trace: LH.Trace, context: LH.Artifacts.ComputedContext): Promise<{
+        cumulativeLayoutShift: number;
+        cumulativeLayoutShiftMainFrame: number;
+        totalCumulativeLayoutShift: number;
+    }>;
+}
+//# sourceMappingURL=cumulative-layout-shift.d.ts.map

package/core/computed/metrics/cumulative-layout-shift.js

@@ -0,0 +1,125 @@
+/**
+ * @license Copyright 2019 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {makeComputedArtifact} from '../computed-artifact.js';
+import {ProcessedTrace} from '../processed-trace.js';
+
+/** @typedef {{ts: number, isMainFrame: boolean, weightedScore: number}} LayoutShiftEvent */
+
+class CumulativeLayoutShift {
+  /**
+   * Returns all LayoutShift events that had no recent input.
+   * Only a `weightedScore` per event is returned. For non-main-frame events, this is
+   * the only score that matters. For main-frame events, `weighted_score_delta === score`.
+   * @see https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_shift_tracker.cc;l=492-495;drc=de3b3a8a8839269c6b44403fa38a13a1ed12fed5
+   * @param {LH.TraceEvent[]} traceEvents
+   * @return {Array<LayoutShiftEvent>}
+   */
+  static getLayoutShiftEvents(traceEvents) {
+    const layoutShiftEvents = [];
+
+    // Chromium will set `had_recent_input` if there was recent user input, which
+    // skips shift events from contributing to CLS. This flag is also set when
+    // Lighthouse changes the emulation size. This results in the first few shift
+    // events having `had_recent_input` set, so ignore it for those events.
+    // See https://bugs.chromium.org/p/chromium/issues/detail?id=1094974.
+    let ignoreHadRecentInput = true;
+
+    for (const event of traceEvents) {
+      if (event.name !== 'LayoutShift' ||
+          !event.args.data ||
+          event.args.data.is_main_frame === undefined) {
+        continue;
+      }
+
+      // For all-frames CLS calculation, we rely on `weighted_score_delta`
+      // All layout shift events should have this since M90: https://crbug.com/1173139
+      if (event.args.data.weighted_score_delta === undefined) {
+        throw new Error('CLS missing weighted_score_delta');
+      }
+
+      if (event.args.data.had_recent_input) {
+        // `had_recent_input` events aren't used unless currently ignoring.
+        if (!ignoreHadRecentInput) continue;
+      } else {
+        // After a false `had_recent_input`, stop ignoring property.
+        ignoreHadRecentInput = false;
+      }
+
+      layoutShiftEvents.push({
+        ts: event.ts,
+        isMainFrame: event.args.data.is_main_frame,
+        weightedScore: event.args.data.weighted_score_delta,
+      });
+    }
+
+    return layoutShiftEvents;
+  }
+
+  /**
+   * Calculates cumulative layout shifts per cluster (session) of LayoutShift
+   * events -- where a new cluster is created when there's a gap of more than
+   * 1000ms since the last LayoutShift event or the cluster is greater than
+   * 5000ms long -- and returns the max LayoutShift score found.
+   * @param {Array<LayoutShiftEvent>} layoutShiftEvents
+   * @return {number}
+   */
+  static calculate(layoutShiftEvents) {
+    const gapMicroseconds = 1_000_000;
+    const limitMicroseconds = 5_000_000;
+    let maxScore = 0;
+    let currentClusterScore = 0;
+    let firstTs = Number.NEGATIVE_INFINITY;
+    let prevTs = Number.NEGATIVE_INFINITY;
+
+    for (const event of layoutShiftEvents) {
+      if (event.ts - firstTs > limitMicroseconds || event.ts - prevTs > gapMicroseconds) {
+        firstTs = event.ts;
+        currentClusterScore = 0;
+      }
+      prevTs = event.ts;
+      currentClusterScore += event.weightedScore;
+      maxScore = Math.max(maxScore, currentClusterScore);
+    }
+
+    return maxScore;
+  }
+
+  /**
+   * Sum all layout shift events from the entire trace.
+   * @param {Array<LayoutShiftEvent>} layoutShiftEvents
+   * @return {number}
+   */
+  static calculateTotalCumulativeLayoutShift(layoutShiftEvents) {
+    return layoutShiftEvents.reduce((sum, e) => sum += e.weightedScore, 0);
+  }
+
+  /**
+   * @param {LH.Trace} trace
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<{cumulativeLayoutShift: number, cumulativeLayoutShiftMainFrame: number, totalCumulativeLayoutShift: number}>}
+   */
+  static async compute_(trace, context) {
+    const processedTrace = await ProcessedTrace.request(trace, context);
+
+    const allFrameShiftEvents =
+        CumulativeLayoutShift.getLayoutShiftEvents(processedTrace.frameTreeEvents);
+    const mainFrameShiftEvents = allFrameShiftEvents.filter(e => e.isMainFrame);
+
+    // The original Cumulative Layout Shift metric, the sum of all main-frame shift events.
+    const totalCumulativeLayoutShift =
+        CumulativeLayoutShift.calculateTotalCumulativeLayoutShift(mainFrameShiftEvents);
+
+    return {
+      cumulativeLayoutShift: CumulativeLayoutShift.calculate(allFrameShiftEvents),
+      cumulativeLayoutShiftMainFrame: CumulativeLayoutShift.calculate(mainFrameShiftEvents),
+      totalCumulativeLayoutShift,
+    };
+  }
+}
+
+const CumulativeLayoutShiftComputed = makeComputedArtifact(CumulativeLayoutShift, null);
+export {CumulativeLayoutShiftComputed as CumulativeLayoutShift};

package/core/computed/metrics/first-contentful-paint-all-frames.d.ts

@@ -0,0 +1,19 @@
+export { FirstContentfulPaintAllFramesComputed as FirstContentfulPaintAllFrames };
+declare const FirstContentfulPaintAllFramesComputed: typeof FirstContentfulPaintAllFrames & {
+    request: (dependencies: import("../../index.js").Artifacts.MetricComputationDataInput, context: import("../../../types/utility-types.js").default.ImmutableObject<{
+        computedCache: Map<string, import("../../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
+    }>) => Promise<import("../../index.js").Artifacts.Metric | import("../../index.js").Artifacts.LanternMetric>;
+};
+declare class FirstContentfulPaintAllFrames extends NavigationMetric {
+    /**
+     * @return {Promise<LH.Artifacts.LanternMetric>}
+     */
+    static computeSimulatedMetric(): Promise<LH.Artifacts.LanternMetric>;
+    /**
+     * @param {LH.Artifacts.NavigationMetricComputationData} data
+     * @return {Promise<LH.Artifacts.Metric>}
+     */
+    static computeObservedMetric(data: LH.Artifacts.NavigationMetricComputationData): Promise<LH.Artifacts.Metric>;
+}
+import { NavigationMetric } from "./navigation-metric.js";
+//# sourceMappingURL=first-contentful-paint-all-frames.d.ts.map

package/core/computed/metrics/first-contentful-paint-all-frames.js

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {makeComputedArtifact} from '../computed-artifact.js';
+import {NavigationMetric} from './navigation-metric.js';
+
+class FirstContentfulPaintAllFrames extends NavigationMetric {
+  /**
+   * @return {Promise<LH.Artifacts.LanternMetric>}
+   */
+  static computeSimulatedMetric() {
+    // TODO: Add support for all frames in lantern.
+    throw new Error('FCP All Frames not implemented in lantern');
+  }
+
+  /**
+   * @param {LH.Artifacts.NavigationMetricComputationData} data
+   * @return {Promise<LH.Artifacts.Metric>}
+   */
+  static async computeObservedMetric(data) {
+    const {processedNavigation} = data;
+
+    return {
+      timing: processedNavigation.timings.firstContentfulPaintAllFrames,
+      timestamp: processedNavigation.timestamps.firstContentfulPaintAllFrames,
+    };
+  }
+}
+
+const FirstContentfulPaintAllFramesComputed = makeComputedArtifact(
+  FirstContentfulPaintAllFrames,
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+);
+export {FirstContentfulPaintAllFramesComputed as FirstContentfulPaintAllFrames};

package/core/computed/metrics/first-contentful-paint.d.ts

@@ -0,0 +1,15 @@
+export { FirstContentfulPaintComputed as FirstContentfulPaint };
+declare const FirstContentfulPaintComputed: typeof FirstContentfulPaint & {
+    request: (dependencies: import("../../index.js").Artifacts.MetricComputationDataInput, context: import("../../../types/utility-types.js").default.ImmutableObject<{
+        computedCache: Map<string, import("../../lib/arbitrary-equality-map.js").ArbitraryEqualityMap>;
+    }>) => Promise<import("../../index.js").Artifacts.Metric | import("../../index.js").Artifacts.LanternMetric>;
+};
+declare class FirstContentfulPaint extends NavigationMetric {
+    /**
+     * @param {LH.Artifacts.NavigationMetricComputationData} data
+     * @return {Promise<LH.Artifacts.Metric>}
+     */
+    static computeObservedMetric(data: LH.Artifacts.NavigationMetricComputationData): Promise<LH.Artifacts.Metric>;
+}
+import { NavigationMetric } from "./navigation-metric.js";
+//# sourceMappingURL=first-contentful-paint.d.ts.map

package/core/computed/metrics/first-contentful-paint.js

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright 2018 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {makeComputedArtifact} from '../computed-artifact.js';
+import {NavigationMetric} from './navigation-metric.js';
+import {LanternFirstContentfulPaint} from './lantern-first-contentful-paint.js';
+
+class FirstContentfulPaint extends NavigationMetric {
+  /**
+   * @param {LH.Artifacts.NavigationMetricComputationData} data
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<LH.Artifacts.LanternMetric>}
+   */
+  static computeSimulatedMetric(data, context) {
+    const metricData = NavigationMetric.getMetricComputationInput(data);
+    return LanternFirstContentfulPaint.request(metricData, context);
+  }
+
+  /**
+   * @param {LH.Artifacts.NavigationMetricComputationData} data
+   * @return {Promise<LH.Artifacts.Metric>}
+   */
+  static async computeObservedMetric(data) {
+    const {processedNavigation} = data;
+
+    return {
+      timing: processedNavigation.timings.firstContentfulPaint,
+      timestamp: processedNavigation.timestamps.firstContentfulPaint,
+    };
+  }
+}
+
+const FirstContentfulPaintComputed = makeComputedArtifact(
+  FirstContentfulPaint,
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+);
+export {FirstContentfulPaintComputed as FirstContentfulPaint};