GoogleChrome · devtools-bot · Apr 25, 2023 · Mar 31, 2023 · Mar 31, 2023 · Apr 4, 2023
@@ -585,6 +585,13 @@ const expectations = {
           },
         },
       },
+      'metrics': {
+        details: {items: {0: {
+          timeToFirstByte: '450+/-100',
+          lcpLoadStart: '7750+/-500',
+          lcpLoadEnd: '7750+/-500',
+        }}},
+      },
     },
     fullPageScreenshot: {
       screenshot: {

@@ -11,6 +11,8 @@ import {LanternFirstMeaningfulPaint} from '../computed/metrics/lantern-first-mea
 import {LanternInteractive} from '../computed/metrics/lantern-interactive.js';
 import {LanternSpeedIndex} from '../computed/metrics/lantern-speed-index.js';
 import {LanternLargestContentfulPaint} from '../computed/metrics/lantern-largest-contentful-paint.js';
+import {TimingSummary} from '../computed/metrics/timing-summary.js';
+import {defaultSettings} from '../config/constants.js';
 
 // Parameters (in ms) for log-normal CDF scoring. To see the curve:
 //   https://www.desmos.com/calculator/bksgkihhj8
@@ -47,15 +49,17 @@ class PredictivePerf extends Audit {
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const URL = artifacts.URL;
     /** @type {LH.Config.Settings} */
-    // @ts-expect-error - TODO(bckenny): allow optional `throttling` settings
-    const settings = {}; // Use default settings.
+    // TODO(bckenny): allow optional `throttling` settings
+    const settings = JSON.parse(JSON.stringify(defaultSettings)); // Use default settings.
     const computationData = {trace, devtoolsLog, gatherContext, settings, URL};
     const fcp = await LanternFirstContentfulPaint.request(computationData, context);
     const fmp = await LanternFirstMeaningfulPaint.request(computationData, context);
     const tti = await LanternInteractive.request(computationData, context);
     const si = await LanternSpeedIndex.request(computationData, context);
     const lcp = await LanternLargestContentfulPaint.request(computationData, context);
 
+    const timingSummary = await TimingSummary.request(computationData, context);
+
     const values = {
       roughEstimateOfFCP: fcp.timing,
       optimisticFCP: fcp.optimisticEstimate.timeInMs,
@@ -76,6 +80,10 @@ class PredictivePerf extends Audit {
       roughEstimateOfLCP: lcp.timing,
       optimisticLCP: lcp.optimisticEstimate.timeInMs,
       pessimisticLCP: lcp.pessimisticEstimate.timeInMs,
+
+      roughEstimateOfTTFB: timingSummary.metrics.timeToFirstByte,
+      roughEstimateOfLCPLoadStart: timingSummary.metrics.lcpLoadStart,
+      roughEstimateOfLCPLoadEnd: timingSummary.metrics.lcpLoadEnd,
     };
 
     const score = Audit.computeLogNormalScore(

@@ -11,8 +11,7 @@
 import {LanternLargestContentfulPaint} from '../computed/metrics/lantern-largest-contentful-paint.js';
 import {LoadSimulator} from '../computed/load-simulator.js';
 import {ByteEfficiencyAudit} from './byte-efficiency/byte-efficiency-audit.js';
-import {ProcessedNavigation} from '../computed/processed-navigation.js';
-import {NetworkRecords} from '../computed/network-records.js';
+import {LCPImageRecord} from '../computed/lcp-image-record.js';
 
 const UIStrings = {
   /** Title of a lighthouse audit that tells a user to preload an image in order to improve their LCP time. */
@@ -140,55 +139,6 @@
     };
   }
 
-  /**
-   * Match the LCP event with the paint event to get the request of the image actually painted.
-   * This could differ from the `ImageElement` associated with the nodeId if e.g. the LCP
-   * was a pseudo-element associated with a node containing a smaller background-image.
-   * @param {LH.Trace} trace
-   * @param {LH.Artifacts.ProcessedNavigation} processedNavigation
-   * @param {Array<NetworkRequest>} networkRecords
-   * @return {NetworkRequest|undefined}
-   */
-  static getLcpRecord(trace, processedNavigation, networkRecords) {
-    // Use main-frame-only LCP to match the metric value.
-    const lcpEvent = processedNavigation.largestContentfulPaintEvt;
-    if (!lcpEvent) return;
-
-    const lcpImagePaintEvent = trace.traceEvents.filter(e => {
-      return e.name === 'LargestImagePaint::Candidate' &&
-          e.args.frame === lcpEvent.args.frame &&
-          e.args.data?.DOMNodeId === lcpEvent.args.data?.nodeId &&
-          e.args.data?.size === lcpEvent.args.data?.size;
-    // Get last candidate, in case there was more than one.
-    }).sort((a, b) => b.ts - a.ts)[0];
-
-    const lcpUrl = lcpImagePaintEvent?.args.data?.imageUrl;
-    if (!lcpUrl) return;
-
-    const candidates = networkRecords.filter(record => {
-      return record.url === lcpUrl &&
-          record.finished &&
-          // Same frame as LCP trace event.
-          record.frameId === lcpImagePaintEvent.args.frame &&
-          record.networkRequestTime < (processedNavigation.timestamps.largestContentfulPaint || 0);
-    }).map(record => {
-      // Follow any redirects to find the real image request.
-      while (record.redirectDestination) {
-        record = record.redirectDestination;
-      }
-      return record;
-    }).filter(record => {
-      // Don't select if also loaded by some other means (xhr, etc). `resourceType`
-      // isn't set on redirect _sources_, so have to check after following redirects.
-      return record.resourceType === 'Image';
-    });
-
-    // If there are still multiple candidates, at this point it appears the page
-    // simply made multiple requests for the image. The first loaded is the best
-    // guess of the request that made the image available for use.
-    return candidates.sort((a, b) => a.networkEndTime - b.networkEndTime)[0];
-  }
-
   /**
    * Computes the estimated effect of preloading the LCP image.
    * @param {LH.Artifacts.TraceElement} lcpElement
@@ -297,17 +247,15 @@
       return {score: null, notApplicable: true};
     }
 
-    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
-    const processedNavigation = await ProcessedNavigation.request(trace, context);
     const mainResource = await MainResource.request({devtoolsLog, URL}, context);
     const lanternLCP = await LanternLargestContentfulPaint.request(metricData, context);
     const simulator = await LoadSimulator.request({devtoolsLog, settings}, context);
 
-    const lcpRecord = PrioritizeLcpImage.getLcpRecord(trace, processedNavigation, networkRecords);
+    const lcpImageRecord = await LCPImageRecord.request({trace, devtoolsLog}, context);
     const graph = lanternLCP.pessimisticGraph;
     // Note: if moving to LCPAllFrames, mainResource would need to be the LCP frame's main resource.
     const {lcpNodeToPreload, initiatorPath} = PrioritizeLcpImage.getLCPNodeToPreload(mainResource,
-        graph, lcpRecord);
+        graph, lcpImageRecord);
 
     const {results, wastedMs} =
       PrioritizeLcpImage.computeWasteWithGraph(lcpElement, lcpNodeToPreload, graph, simulator);

@@ -0,0 +1,53 @@
+/**
+ * @license Copyright 2023 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 {NetworkAnalyzer} from '../lib/dependency-graph/simulator/network-analyzer.js';
+import {makeComputedArtifact} from './computed-artifact.js';
+import {NetworkRecords} from './network-records.js';
+import {ProcessedTrace} from './processed-trace.js';
+
+/**
+ * @fileoverview Compute the navigation specific URLs `requestedUrl` and `mainDocumentUrl` in situations where
+ * the `URL` artifact is not present. This is not a drop-in replacement for `URL` but can be helpful in situations
+ * where getting the `URL` artifact is difficult.
+ */
+
+class DocumentUrls {
+  /**
+   * @param {{trace: LH.Trace, devtoolsLog: LH.DevtoolsLog}} data
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<{requestedUrl: string, mainDocumentUrl: string}>}
+   */
+  static async compute_(data, context) {
+    const processedTrace = await ProcessedTrace.request(data.trace, context);
+    const networkRecords = await NetworkRecords.request(data.devtoolsLog, context);
+
+    const mainFrameId = processedTrace.mainFrameInfo.frameId;
+
+    /** @type {string|undefined} */
+    let requestedUrl;
+    /** @type {string|undefined} */
+    let mainDocumentUrl;
+    for (const event of data.devtoolsLog) {
+      if (event.method === 'Page.frameNavigated' && event.params.frame.id === mainFrameId) {
+        const {url} = event.params.frame;
+        // Only set requestedUrl on the first main frame navigation.
+        if (!requestedUrl) requestedUrl = url;
+        mainDocumentUrl = url;
+      }
+    }
+    if (!requestedUrl || !mainDocumentUrl) throw new Error('No main frame navigations found');
+
+    const initialRequest = NetworkAnalyzer.findResourceForUrl(networkRecords, requestedUrl);
+    if (initialRequest?.redirects?.length) requestedUrl = initialRequest.redirects[0].url;
+
+    return {requestedUrl, mainDocumentUrl};
+  }
+}
+
+const DocumentUrlsComputed = makeComputedArtifact(DocumentUrls, ['devtoolsLog', 'trace']);
+export {DocumentUrlsComputed as DocumentUrls};
+
@@ -0,0 +1,74 @@
+/**
+ * @license Copyright 2023 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 {NetworkRecords} from './network-records.js';
+import {ProcessedNavigation} from './processed-navigation.js';
+import {LighthouseError} from '../lib/lh-error.js';
+
+/**
+ * @fileoverview Match the LCP event with the paint event to get the request of the image actually painted.
+ * This could differ from the `ImageElement` associated with the nodeId if e.g. the LCP
+ * was a pseudo-element associated with a node containing a smaller background-image.
+ */
+
+class LCPImageRecord {
+  /**
+   * @param {{trace: LH.Trace, devtoolsLog: LH.DevtoolsLog}} data
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<LH.Artifacts.NetworkRequest|undefined>}
+   */
+  static async compute_(data, context) {
+    const {trace, devtoolsLog} = data;
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    const processedNavigation = await ProcessedNavigation.request(trace, context);
+    if (processedNavigation.timings.largestContentfulPaint === undefined) {
+      throw new LighthouseError(LighthouseError.errors.NO_LCP);
+    }
+
+    // Use main-frame-only LCP to match the metric value.
+    const lcpEvent = processedNavigation.largestContentfulPaintEvt;
+    if (!lcpEvent) return;
+
+    const lcpImagePaintEvent = trace.traceEvents.filter(e => {
+      return e.name === 'LargestImagePaint::Candidate' &&
+          e.args.frame === lcpEvent.args.frame &&
+          e.args.data?.DOMNodeId === lcpEvent.args.data?.nodeId &&
+          e.args.data?.size === lcpEvent.args.data?.size;
+    // Get last candidate, in case there was more than one.
+    }).sort((a, b) => b.ts - a.ts)[0];
+
+    const lcpUrl = lcpImagePaintEvent?.args.data?.imageUrl;
+    if (!lcpUrl) return;
+
+    const candidates = networkRecords.filter(record => {
+      return record.url === lcpUrl &&
+          record.finished &&
+          // Same frame as LCP trace event.
+          record.frameId === lcpImagePaintEvent.args.frame &&
+          record.networkRequestTime < (processedNavigation.timestamps.largestContentfulPaint || 0);
+    }).map(record => {
+      // Follow any redirects to find the real image request.
+      while (record.redirectDestination) {
+        record = record.redirectDestination;
+      }
+      return record;
+    }).filter(record => {
+      // Don't select if also loaded by some other means (xhr, etc). `resourceType`
+      // isn't set on redirect _sources_, so have to check after following redirects.
+      return record.resourceType === 'Image';
+    });
+
+    // If there are still multiple candidates, at this point it appears the page
+    // simply made multiple requests for the image. The first loaded is the best
+    // guess of the request that made the image available for use.
+    return candidates.sort((a, b) => a.networkEndTime - b.networkEndTime)[0];
+  }
+}
+
+const LCPImageRecordComputed = makeComputedArtifact(LCPImageRecord, ['devtoolsLog', 'trace']);
+export {LCPImageRecordComputed as LCPImageRecord};
+
@@ -0,0 +1,58 @@
+/**
+ * @license Copyright 2023 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 {LighthouseError} from '../../lib/lh-error.js';
+import {LargestContentfulPaint} from './largest-contentful-paint.js';
+import {ProcessedNavigation} from '../processed-navigation.js';
+import {TimeToFirstByte} from './time-to-first-byte.js';
+import {LCPImageRecord} from '../lcp-image-record.js';
+
+class LCPBreakdown {
+  /**
+   * @param {LH.Artifacts.MetricComputationDataInput} data
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<{ttfb: number, loadStart: number, loadEnd: number}>}
+   */
+  static async compute_(data, context) {
+    const processedNavigation = await ProcessedNavigation.request(data.trace, context);
+    const observedLcp = processedNavigation.timings.largestContentfulPaint;
+    if (observedLcp === undefined) {
+      throw new LighthouseError(LighthouseError.errors.NO_LCP);
+    }
+    const timeOrigin = processedNavigation.timestamps.timeOrigin / 1000;
+
+    const {timing: ttfb} = await TimeToFirstByte.request(data, context);
+
+    const lcpRecord = await LCPImageRecord.request(data, context);
+    if (!lcpRecord) {
+      return {ttfb, loadStart: ttfb, loadEnd: ttfb};
+    }
+
+    // Official LCP^tm. Will be lantern result if simulated, otherwise same as observedLcp.
+    const {timing: metricLcp} = await LargestContentfulPaint.request(data, context);
+    const throttleRatio = metricLcp / observedLcp;
+
+    const unclampedLoadStart = (lcpRecord.networkRequestTime - timeOrigin) * throttleRatio;
+    const loadStart = Math.max(ttfb, Math.min(unclampedLoadStart, metricLcp));
+
+    const unclampedLoadEnd = (lcpRecord.networkEndTime - timeOrigin) * throttleRatio;
+    const loadEnd = Math.max(loadStart, Math.min(unclampedLoadEnd, metricLcp));
+
+    return {
+      ttfb,
+      loadStart,
+      loadEnd,
+    };
+  }
+}
+
+const LCPBreakdownComputed = makeComputedArtifact(
+  LCPBreakdown,
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+);
+export {LCPBreakdownComputed as LCPBreakdown};
+
@@ -40,7 +40,7 @@ class Metric {
   /**
    * @param {LH.Artifacts.MetricComputationData} data
    * @param {LH.Artifacts.ComputedContext} context
-   * @return {Promise<LH.Artifacts.LanternMetric>}
+   * @return {Promise<LH.Artifacts.LanternMetric|LH.Artifacts.Metric>}
    */
   static computeSimulatedMetric(data, context) { // eslint-disable-line no-unused-vars
     throw new Error('Unimplemented');

@@ -14,7 +14,7 @@ class NavigationMetric extends Metric {
   /**
    * @param {LH.Artifacts.NavigationMetricComputationData} data
    * @param {LH.Artifacts.ComputedContext} context
-   * @return {Promise<LH.Artifacts.LanternMetric>}
+   * @return {Promise<LH.Artifacts.LanternMetric|LH.Artifacts.Metric>}
    */
   static computeSimulatedMetric(data, context) { // eslint-disable-line no-unused-vars
     throw new Error('Unimplemented');