lighthouse 10.1.1-dev.20230502 → 10.1.1-dev.20230503

package/core/audits/largest-contentful-paint-element.js

@@ -6,6 +6,8 @@
 
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
+import {LargestContentfulPaint} from '../computed/metrics/largest-contentful-paint.js';
+import {LCPBreakdown} from '../computed/metrics/lcp-breakdown.js';
 
 const UIStrings = {
   /** Descriptive title of a diagnostic audit that provides the element that was determined to be the Largest Contentful Paint. */
@@ -13,6 +15,20 @@ const UIStrings = {
   /** Description of a Lighthouse audit that tells the user that the element shown was determined to be the Largest Contentful Paint. */
   description: 'This is the largest contentful element painted within the viewport. ' +
     '[Learn more about the Largest Contentful Paint element](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)',
+  /** Label for a column in a data table; entries will be the name of a phase in the Largest Contentful Paint (LCP) metric. */
+  columnPhase: 'Phase',
+  /** Label for a column in a data table; entries will be the percent of Largest Contentful Paint (LCP) that a phase covers. */
+  columnPercentOfLCP: '% of LCP',
+  /** Label for a column in a data table; entries will be the amount of time spent in a phase in the Largest Contentful Paint (LCP) metric. */
+  columnTiming: 'Timing',
+  /** Table item value for the Time To First Byte (TTFB) phase of the Largest Contentful Paint (LCP) metric. */
+  itemTTFB: 'TTFB',
+  /** Table item value for the load delay phase of the Largest Contentful Paint (LCP) metric. */
+  itemLoadDelay: 'Load Delay',
+  /** Table item value for the load time phase of the Largest Contentful Paint (LCP) metric. */
+  itemLoadTime: 'Load Time',
+  /** Table item value for the render delay phase of the Largest Contentful Paint (LCP) metric. */
+  itemRenderDelay: 'Render Delay',
 };
 
 const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
@@ -28,15 +44,64 @@ class LargestContentfulPaintElement extends Audit {
       description: str_(UIStrings.description),
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'TraceElements'],
+      requiredArtifacts:
+        ['traces', 'TraceElements', 'devtoolsLogs', 'GatherContext', 'settings', 'URL'],
     };
   }
 
   /**
    * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Details.Table|undefined>}
    */
-  static audit(artifacts) {
+  static async makePhaseTable(artifacts, context) {
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const gatherContext = artifacts.GatherContext;
+    const metricComputationData = {trace, devtoolsLog, gatherContext,
+      settings: context.settings, URL: artifacts.URL};
+
+    const {timing: metricLcp} =
+      await LargestContentfulPaint.request(metricComputationData, context);
+    const {ttfb, loadStart, loadEnd} = await LCPBreakdown.request(metricComputationData, context);
+
+    let loadDelay = 0;
+    let loadTime = 0;
+    let renderDelay = metricLcp - ttfb;
+
+    if (loadStart && loadEnd) {
+      loadDelay = loadStart - ttfb;
+      loadTime = loadEnd - loadStart;
+      renderDelay = metricLcp - loadEnd;
+    }
+
+    const results = [
+      {phase: str_(UIStrings.itemTTFB), timing: ttfb},
+      {phase: str_(UIStrings.itemLoadDelay), timing: loadDelay},
+      {phase: str_(UIStrings.itemLoadTime), timing: loadTime},
+      {phase: str_(UIStrings.itemRenderDelay), timing: renderDelay},
+    ].map(result => {
+      const percent = 100 * result.timing / metricLcp;
+      const percentStr = `${percent.toFixed(0)}%`;
+      return {...result, percent: percentStr};
+    });
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'phase', valueType: 'text', label: str_(UIStrings.columnPhase)},
+      {key: 'percent', valueType: 'text', label: str_(UIStrings.columnPercentOfLCP)},
+      {key: 'timing', valueType: 'ms', label: str_(UIStrings.columnTiming)},
+    ];
+
+    return Audit.makeTableDetails(headings, results);
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
     const lcpElement = artifacts.TraceElements
       .find(element => element.traceEventType === 'largest-contentful-paint');
     const lcpElementDetails = [];
@@ -51,7 +116,15 @@ class LargestContentfulPaintElement extends Audit {
       {key: 'node', valueType: 'node', label: str_(i18n.UIStrings.columnElement)},
     ];
 
-    const details = Audit.makeTableDetails(headings, lcpElementDetails);
+    const elementTable = Audit.makeTableDetails(headings, lcpElementDetails);
+
+    const items = [elementTable];
+    if (elementTable.items.length) {
+      const phaseTable = await this.makePhaseTable(artifacts, context);
+      if (phaseTable) items.push(phaseTable);
+    }
+
+    const details = Audit.makeListDetails(items);
 
     const displayValue = str_(i18n.UIStrings.displayValueElementsFound,
       {nodeCount: lcpElementDetails.length});

package/core/lib/stack-packs.js

@@ -15,6 +15,10 @@ import * as i18n from './i18n/i18n.js';
  * @type {Array<{packId: string, requiredStacks: Array<string>}>}
  */
 const stackPacksToInclude = [
+  {
+    packId: 'gatsby',
+    requiredStacks: ['js:gatsby'],
+  },
   {
     packId: 'wordpress',
     requiredStacks: ['js:wordpress'],
@@ -117,7 +121,11 @@ function getStackPacks(pageStacks) {
     });
   }
 
-  return packs;
+  return packs.sort((a, b) => {
+    const aVal = stackPacksToInclude.findIndex(p => p.packId === a.id);
+    const bVal = stackPacksToInclude.findIndex(p => p.packId === b.id);
+    return aVal - bVal;
+  });
 }
 
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "10.1.1-dev.20230502",
+  "version": "10.1.1-dev.20230503",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -169,7 +169,7 @@
     "pako": "^2.0.3",
     "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^19.11.0",
+    "puppeteer": "^20.1.0",
     "resolve": "^1.20.0",
     "rollup": "^2.52.7",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -187,7 +187,7 @@
   },
   "dependencies": {
     "@sentry/node": "^6.17.4",
-    "axe-core": "4.6.3",
+    "axe-core": "4.7.0",
     "chrome-launcher": "^0.15.2",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.1",
@@ -198,14 +198,14 @@
     "jpeg-js": "^0.4.4",
     "js-library-detector": "^6.6.0",
     "lighthouse-logger": "^1.3.0",
-    "lighthouse-stack-packs": "1.9.1",
+    "lighthouse-stack-packs": "1.10.0",
     "lodash": "^4.17.21",
     "lookup-closest-locale": "6.2.0",
     "metaviewport-parser": "0.3.0",
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
     "ps-list": "^8.0.0",
-    "puppeteer-core": "^19.11.0",
+    "puppeteer-core": "^20.1.0",
     "robots-parser": "^3.0.0",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",