lighthouse 9.6.7 → 10.0.0

package/lighthouse-core/audits/third-party-facades.js

@@ -1,221 +0,0 @@
-/**
- * @license Copyright 2020 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.
- */
-'use strict';
-
-/**
- * @fileoverview Audit which identifies third-party code on the page which can be lazy loaded.
- * The audit will recommend a facade alternative which is used to imitate the third-party resource until it is needed.
- *
- * Entity: Set of domains which are used by a company or product area to deliver third-party resources
- * Product: Specific piece of software belonging to an entity. Entities can have multiple products.
- * Facade: Placeholder for a product which looks likes the actual product and replaces itself with that product when the user needs it.
- */
-
-/** @typedef {import("third-party-web").IEntity} ThirdPartyEntity */
-/** @typedef {import("third-party-web").IProduct} ThirdPartyProduct*/
-/** @typedef {import("third-party-web").IFacade} ThirdPartyFacade*/
-
-/** @typedef {{product: ThirdPartyProduct, entity: ThirdPartyEntity}} FacadableProduct */
-
-const Audit = require('./audit.js');
-const i18n = require('../lib/i18n/i18n.js');
-const thirdPartyWeb = require('../lib/third-party-web.js');
-const NetworkRecords = require('../computed/network-records.js');
-const MainResource = require('../computed/main-resource.js');
-const MainThreadTasks = require('../computed/main-thread-tasks.js');
-const ThirdPartySummary = require('./third-party-summary.js');
-
-const UIStrings = {
-  /** Title of a diagnostic audit that provides details about the third-party code on a web page that can be lazy loaded with a facade alternative. This descriptive title is shown to users when no resources have facade alternatives available. A facade is a lightweight component which looks like the desired resource. Lazy loading means resources are deferred until they are needed. Third-party code refers to resources that are not within the control of the site owner. */
-  title: 'Lazy load third-party resources with facades',
-  /** Title of a diagnostic audit that provides details about the third-party code on a web page that can be lazy loaded with a facade alternative. This descriptive title is shown to users when one or more third-party resources have available facade alternatives. A facade is a lightweight component which looks like the desired resource. Lazy loading means resources are deferred until they are needed. Third-party code refers to resources that are not within the control of the site owner. */
-  failureTitle: 'Some third-party resources can be lazy loaded with a facade',
-  /** Description of a Lighthouse audit that identifies the third-party code on the page that can be lazy loaded with a facade alternative. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. A facade is a lightweight component which looks like the desired resource. Lazy loading means resources are deferred until they are needed. Third-party code refers to resources that are not within the control of the site owner. */
-  description: 'Some third-party embeds can be lazy loaded. ' +
-    'Consider replacing them with a facade until they are required. [Learn more](https://web.dev/third-party-facades/).',
-  /** Summary text for the result of a Lighthouse audit that identifies the third-party code on a web page that can be lazy loaded with a facade alternative. This text summarizes the number of lazy loading facades that can be used on the page. A facade is a lightweight component which looks like the desired resource. */
-  displayValue: `{itemCount, plural,
-  =1 {# facade alternative available}
-  other {# facade alternatives available}
-  }`,
-  /** Label for a table column that displays the name of the product that a URL is used for. The products in the column will be pieces of software used on the page, like the "YouTube Embedded Player" or the "Drift Live Chat" box. */
-  columnProduct: 'Product',
-  /**
-   * @description Template for a table entry that gives the name of a product which we categorize as video related.
-   * @example {YouTube Embedded Player} productName
-   */
-  categoryVideo: '{productName} (Video)',
-  /**
-   * @description Template for a table entry that gives the name of a product which we categorize as customer success related. Customer success means the product supports customers by offering chat and contact solutions.
-   * @example {Intercom Widget} productName
-   */
-  categoryCustomerSuccess: '{productName} (Customer Success)',
-  /**
-   * @description Template for a table entry that gives the name of a product which we categorize as marketing related.
-   * @example {Drift Live Chat} productName
-   */
-  categoryMarketing: '{productName} (Marketing)',
-  /**
-   * @description Template for a table entry that gives the name of a product which we categorize as social related.
-   * @example {Facebook Messenger Customer Chat} productName
-   */
-  categorySocial: '{productName} (Social)',
-};
-
-const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
-
-/** @type {Record<string, string>} */
-const CATEGORY_UI_MAP = {
-  'video': UIStrings.categoryVideo,
-  'customer-success': UIStrings.categoryCustomerSuccess,
-  'marketing': UIStrings.categoryMarketing,
-  'social': UIStrings.categorySocial,
-};
-
-class ThirdPartyFacades extends Audit {
-  /**
-   * @return {LH.Audit.Meta}
-   */
-  static get meta() {
-    return {
-      id: 'third-party-facades',
-      title: str_(UIStrings.title),
-      failureTitle: str_(UIStrings.failureTitle),
-      description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL'],
-    };
-  }
-
-  /**
-   * Sort items by transfer size and combine small items into a single row.
-   * Items will be mutated in place to a maximum of 6 rows.
-   * @param {ThirdPartySummary.URLSummary[]} items
-   */
-  static condenseItems(items) {
-    items.sort((a, b) => b.transferSize - a.transferSize);
-
-    // Items <1KB are condensed. If all items are <1KB, condense all but the largest.
-    let splitIndex = items.findIndex((item) => item.transferSize < 1000) || 1;
-    // Show details for top 5 items.
-    if (splitIndex === -1 || splitIndex > 5) splitIndex = 5;
-    // If there is only 1 item to condense, leave it as is.
-    if (splitIndex >= items.length - 1) return;
-
-    const remainder = items.splice(splitIndex);
-    const finalItem = remainder.reduce((result, item) => {
-      result.transferSize += item.transferSize;
-      result.blockingTime += item.blockingTime;
-      return result;
-    });
-
-    // If condensed row is still <1KB, don't show it.
-    if (finalItem.transferSize < 1000) return;
-
-    finalItem.url = str_(i18n.UIStrings.otherResourcesLabel);
-    items.push(finalItem);
-  }
-
-  /**
-   * @param {Map<string, ThirdPartySummary.Summary>} byURL
-   * @param {ThirdPartyEntity | undefined} mainEntity
-   * @return {FacadableProduct[]}
-   */
-  static getProductsWithFacade(byURL, mainEntity) {
-    /** @type {Map<string, FacadableProduct>} */
-    const facadableProductMap = new Map();
-    for (const url of byURL.keys()) {
-      const entity = thirdPartyWeb.getEntity(url);
-      if (!entity || thirdPartyWeb.isFirstParty(url, mainEntity)) continue;
-
-      const product = thirdPartyWeb.getProduct(url);
-      if (!product || !product.facades || !product.facades.length) continue;
-
-      if (facadableProductMap.has(product.name)) continue;
-      facadableProductMap.set(product.name, {product, entity});
-    }
-
-    return Array.from(facadableProductMap.values());
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @param {LH.Audit.Context} context
-   * @return {Promise<LH.Audit.Product>}
-   */
-  static async audit(artifacts, context) {
-    const settings = context.settings;
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
-    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
-    const mainResource = await MainResource.request({devtoolsLog, URL: artifacts.URL}, context);
-    const mainEntity = thirdPartyWeb.getEntity(mainResource.url);
-    const tasks = await MainThreadTasks.request(trace, context);
-    const multiplier = settings.throttlingMethod === 'simulate' ?
-      settings.throttling.cpuSlowdownMultiplier : 1;
-    const summaries = ThirdPartySummary.getSummaries(networkRecords, tasks, multiplier);
-    const facadableProducts =
-      ThirdPartyFacades.getProductsWithFacade(summaries.byURL, mainEntity);
-
-    /** @type {LH.Audit.Details.TableItem[]} */
-    const results = [];
-    for (const {product, entity} of facadableProducts) {
-      const categoryTemplate = CATEGORY_UI_MAP[product.categories[0]];
-
-      let productWithCategory;
-      if (categoryTemplate) {
-        // Display product name with category next to it in the same column.
-        productWithCategory = str_(categoryTemplate, {productName: product.name});
-      } else {
-        // Just display product name if no category is found.
-        productWithCategory = product.name;
-      }
-
-      const urls = summaries.urls.get(entity);
-      const entitySummary = summaries.byEntity.get(entity);
-      if (!urls || !entitySummary) continue;
-
-      const items = Array.from(urls).map((url) => {
-        const urlStats = summaries.byURL.get(url);
-        return /** @type {ThirdPartySummary.URLSummary} */ ({url, ...urlStats});
-      });
-      this.condenseItems(items);
-      results.push({
-        product: productWithCategory,
-        transferSize: entitySummary.transferSize,
-        blockingTime: entitySummary.blockingTime,
-        subItems: {type: 'subitems', items},
-      });
-    }
-
-    if (!results.length) {
-      return {
-        score: 1,
-        notApplicable: true,
-      };
-    }
-
-    /** @type {LH.Audit.Details.Table['headings']} */
-    const headings = [
-      /* eslint-disable max-len */
-      {key: 'product', itemType: 'text', subItemsHeading: {key: 'url', itemType: 'url'}, text: str_(UIStrings.columnProduct)},
-      {key: 'transferSize', itemType: 'bytes', subItemsHeading: {key: 'transferSize'}, granularity: 1, text: str_(i18n.UIStrings.columnTransferSize)},
-      {key: 'blockingTime', itemType: 'ms', subItemsHeading: {key: 'blockingTime'}, granularity: 1, text: str_(i18n.UIStrings.columnBlockingTime)},
-      /* eslint-enable max-len */
-    ];
-
-    return {
-      score: 0,
-      displayValue: str_(UIStrings.displayValue, {
-        itemCount: results.length,
-      }),
-      details: Audit.makeTableDetails(headings, results),
-    };
-  }
-}
-
-module.exports = ThirdPartyFacades;
-module.exports.UIStrings = UIStrings;

package/lighthouse-core/audits/third-party-summary.js

@@ -1,259 +0,0 @@
-/**
- * @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.
- */
-'use strict';
-
-const Audit = require('./audit.js');
-const i18n = require('../lib/i18n/i18n.js');
-const thirdPartyWeb = require('../lib/third-party-web.js');
-const NetworkRecords = require('../computed/network-records.js');
-const MainThreadTasks = require('../computed/main-thread-tasks.js');
-const {getJavaScriptURLs, getAttributableURLForTask} = require('../lib/tracehouse/task-summary.js');
-
-const UIStrings = {
-  /** Title of a diagnostic audit that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). This descriptive title is shown to users when the amount is acceptable and no user action is required. */
-  title: 'Minimize third-party usage',
-  /** Title of a diagnostic audit that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). This imperative title is shown to users when there is a significant amount of page execution time caused by third-party code that should be reduced. */
-  failureTitle: 'Reduce the impact of third-party code',
-  /** Description of a Lighthouse audit that identifies the code on the page that the user doesn't control. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
-  description: 'Third-party code can significantly impact load performance. ' +
-    'Limit the number of redundant third-party providers and try to load third-party code after ' +
-    'your page has primarily finished loading. [Learn more](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/).',
-  /** Label for a table column that displays the name of a third-party provider that potentially links to their website. */
-  columnThirdParty: 'Third-Party',
-  /** Summary text for the result of a Lighthouse audit that identifies the code on a web page that the user doesn't control (referred to as "third-party code"). This text summarizes the number of distinct entities that were found on the page. */
-  displayValue: 'Third-party code blocked the main thread for ' +
-    `{timeInMs, number, milliseconds}\xa0ms`,
-};
-
-const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
-
-// A page passes when all third-party code blocks for less than 250 ms.
-const PASS_THRESHOLD_IN_MS = 250;
-
-/** @typedef {import("third-party-web").IEntity} ThirdPartyEntity */
-
-/**
- * @typedef Summary
- * @property {number} mainThreadTime
- * @property {number} transferSize
- * @property {number} blockingTime
- */
-
-/**
- * @typedef URLSummary
- * @property {number} transferSize
- * @property {number} blockingTime
- * @property {string | LH.IcuMessage} url
- */
-
-/** @typedef SummaryMaps
- * @property {Map<ThirdPartyEntity, Summary>} byEntity Map of impact summaries for each entity.
- * @property {Map<string, Summary>} byURL Map of impact summaries for each URL.
- * @property {Map<ThirdPartyEntity, string[]>} urls Map of URLs under each entity.
- */
-
-/**
- * Don't bother showing resources smaller than 4KiB since they're likely to be pixels, which isn't
- * too actionable.
- */
-const MIN_TRANSFER_SIZE_FOR_SUBITEMS = 4096;
-
-/** Show at most 5 sub items in the resource breakdown. */
-const MAX_SUBITEMS = 5;
-
-class ThirdPartySummary extends Audit {
-  /**
-   * @return {LH.Audit.Meta}
-   */
-  static get meta() {
-    return {
-      id: 'third-party-summary',
-      title: str_(UIStrings.title),
-      failureTitle: str_(UIStrings.failureTitle),
-      description: str_(UIStrings.description),
-      requiredArtifacts: ['traces', 'devtoolsLogs', 'URL'],
-    };
-  }
-
-  /**
-   *
-   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
-   * @param {Array<LH.Artifacts.TaskNode>} mainThreadTasks
-   * @param {number} cpuMultiplier
-   * @return {SummaryMaps}
-   */
-  static getSummaries(networkRecords, mainThreadTasks, cpuMultiplier) {
-    /** @type {Map<string, Summary>} */
-    const byURL = new Map();
-    /** @type {Map<ThirdPartyEntity, Summary>} */
-    const byEntity = new Map();
-    const defaultSummary = {mainThreadTime: 0, blockingTime: 0, transferSize: 0};
-
-    for (const request of networkRecords) {
-      const urlSummary = byURL.get(request.url) || {...defaultSummary};
-      urlSummary.transferSize += request.transferSize;
-      byURL.set(request.url, urlSummary);
-    }
-
-    const jsURLs = getJavaScriptURLs(networkRecords);
-
-    for (const task of mainThreadTasks) {
-      const attributableURL = getAttributableURLForTask(task, jsURLs);
-
-      const urlSummary = byURL.get(attributableURL) || {...defaultSummary};
-      const taskDuration = task.selfTime * cpuMultiplier;
-      // The amount of time spent on main thread is the sum of all durations.
-      urlSummary.mainThreadTime += taskDuration;
-      // The amount of time spent *blocking* on main thread is the sum of all time longer than 50ms.
-      // Note that this is not totally equivalent to the TBT definition since it fails to account for FCP,
-      // but a majority of third-party work occurs after FCP and should yield largely similar numbers.
-      urlSummary.blockingTime += Math.max(taskDuration - 50, 0);
-      byURL.set(attributableURL, urlSummary);
-    }
-
-    // Map each URL's stat to a particular third party entity.
-    /** @type {Map<ThirdPartyEntity, string[]>} */
-    const urls = new Map();
-    for (const [url, urlSummary] of byURL.entries()) {
-      const entity = thirdPartyWeb.getEntity(url);
-      if (!entity) {
-        byURL.delete(url);
-        continue;
-      }
-
-      const entitySummary = byEntity.get(entity) || {...defaultSummary};
-      entitySummary.transferSize += urlSummary.transferSize;
-      entitySummary.mainThreadTime += urlSummary.mainThreadTime;
-      entitySummary.blockingTime += urlSummary.blockingTime;
-      byEntity.set(entity, entitySummary);
-
-      const entityURLs = urls.get(entity) || [];
-      entityURLs.push(url);
-      urls.set(entity, entityURLs);
-    }
-
-    return {byURL, byEntity, urls};
-  }
-
-  /**
-   * @param {ThirdPartyEntity} entity
-   * @param {SummaryMaps} summaries
-   * @param {Summary} stats
-   * @return {Array<URLSummary>}
-   */
-  static makeSubItems(entity, summaries, stats) {
-    const entityURLs = summaries.urls.get(entity) || [];
-    let items = entityURLs
-      .map(url => /** @type {URLSummary} */ ({url, ...summaries.byURL.get(url)}))
-      // Filter out any cases where byURL was missing entries.
-      .filter((stat) => stat.transferSize > 0)
-      // Sort by blocking time first, then transfer size to break ties.
-      .sort((a, b) => (b.blockingTime - a.blockingTime) || (b.transferSize - a.transferSize));
-
-    const subitemSummary = {transferSize: 0, blockingTime: 0};
-    const minTransferSize = Math.max(MIN_TRANSFER_SIZE_FOR_SUBITEMS, stats.transferSize / 20);
-    const maxSubItems = Math.min(MAX_SUBITEMS, items.length);
-    let numSubItems = 0;
-    while (numSubItems < maxSubItems) {
-      const nextSubItem = items[numSubItems];
-      if (nextSubItem.blockingTime === 0 && nextSubItem.transferSize < minTransferSize) {
-        // Don't include the resource in the sub-item breakdown because it didn't have a big
-        // enough impact on its own.
-        break;
-      }
-
-      numSubItems++;
-      subitemSummary.transferSize += nextSubItem.transferSize;
-      subitemSummary.blockingTime += nextSubItem.blockingTime;
-    }
-    if (!subitemSummary.blockingTime && !subitemSummary.transferSize) {
-      // Don't bother breaking down if there are no large resources.
-      return [];
-    }
-    // Only show the top N entries for brevity. If there is more than one remaining entry
-    // we'll replace the tail entries with single remainder entry.
-    items = items.slice(0, numSubItems);
-    const remainder = {
-      url: str_(i18n.UIStrings.otherResourcesLabel),
-      transferSize: stats.transferSize - subitemSummary.transferSize,
-      blockingTime: stats.blockingTime - subitemSummary.blockingTime,
-    };
-    if (remainder.transferSize > minTransferSize) {
-      items.push(remainder);
-    }
-    return items;
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @param {LH.Audit.Context} context
-   * @return {Promise<LH.Audit.Product>}
-   */
-  static async audit(artifacts, context) {
-    const settings = context.settings || {};
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
-    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
-    const mainEntity = thirdPartyWeb.getEntity(artifacts.URL.finalUrl);
-    const tasks = await MainThreadTasks.request(trace, context);
-    const multiplier = settings.throttlingMethod === 'simulate' ?
-      settings.throttling.cpuSlowdownMultiplier : 1;
-
-    const summaries = ThirdPartySummary.getSummaries(networkRecords, tasks, multiplier);
-    const overallSummary = {wastedBytes: 0, wastedMs: 0};
-
-    const results = Array.from(summaries.byEntity.entries())
-      // Don't consider the page we're on to be third-party.
-      // e.g. Facebook SDK isn't a third-party script on facebook.com
-      .filter(([entity]) => !(mainEntity && mainEntity.name === entity.name))
-      .map(([entity, stats]) => {
-        overallSummary.wastedBytes += stats.transferSize;
-        overallSummary.wastedMs += stats.blockingTime;
-
-        return {
-          ...stats,
-          entity: {
-            type: /** @type {const} */ ('link'),
-            text: entity.name,
-            url: entity.homepage || '',
-          },
-          subItems: {
-            type: /** @type {const} */ ('subitems'),
-            items: ThirdPartySummary.makeSubItems(entity, summaries, stats),
-          },
-        };
-      })
-      // Sort by blocking time first, then transfer size to break ties.
-      .sort((a, b) => (b.blockingTime - a.blockingTime) || (b.transferSize - a.transferSize));
-
-    /** @type {LH.Audit.Details.Table['headings']} */
-    const headings = [
-      /* eslint-disable max-len */
-      {key: 'entity', itemType: 'link', text: str_(UIStrings.columnThirdParty), subItemsHeading: {key: 'url', itemType: 'url'}},
-      {key: 'transferSize', granularity: 1, itemType: 'bytes', text: str_(i18n.UIStrings.columnTransferSize), subItemsHeading: {key: 'transferSize'}},
-      {key: 'blockingTime', granularity: 1, itemType: 'ms', text: str_(i18n.UIStrings.columnBlockingTime), subItemsHeading: {key: 'blockingTime'}},
-      /* eslint-enable max-len */
-    ];
-
-    if (!results.length) {
-      return {
-        score: 1,
-        notApplicable: true,
-      };
-    }
-
-    return {
-      score: Number(overallSummary.wastedMs <= PASS_THRESHOLD_IN_MS),
-      displayValue: str_(UIStrings.displayValue, {
-        timeInMs: overallSummary.wastedMs,
-      }),
-      details: Audit.makeTableDetails(headings, results, overallSummary),
-    };
-  }
-}
-
-module.exports = ThirdPartySummary;
-module.exports.UIStrings = UIStrings;

package/lighthouse-core/audits/timing-budget.js

@@ -1,174 +0,0 @@
-/**
- * @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.
- */
-'use strict';
-
-const Audit = require('./audit.js');
-const TimingSummary = require('../computed/metrics/timing-summary.js');
-const MainResource = require('../computed/main-resource.js');
-const Budget = require('../config/budget.js');
-const i18n = require('../lib/i18n/i18n.js');
-
-const UIStrings = {
-  /** Title of a Lighthouse audit that compares how quickly the page loads against targets set by the user. Timing budgets are a type of performance budget. */
-  title: 'Timing budget',
-  /** Description of a Lighthouse audit where a user sets budgets for how quickly the page loads. No character length limits. 'Learn More' becomes link text to additional documentation. */
-  description: 'Set a timing budget to help you keep an eye on the performance of your site. Performant sites load fast and respond to user input events quickly. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/budgets).',
-  /** Label for a column in a data table; entries will be the names of different timing metrics, e.g. "Time to Interactive", "First Contentful Paint", etc. */
-  columnTimingMetric: 'Metric',
-  /** Label for a column in a data table; entries will be the measured value of a particular timing metric. Most entries will have a unit of milliseconds, but units could be other things as well. */
-  columnMeasurement: 'Measurement',
-};
-
-const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
-
-/** @typedef {{metric: LH.Budget.TimingMetric, label: LH.IcuMessage, measurement?: LH.Audit.Details.NumericValue|number, overBudget?: LH.Audit.Details.NumericValue|number}} BudgetItem */
-
-class TimingBudget extends Audit {
-  /**
-   * @return {LH.Audit.Meta}
-   */
-  static get meta() {
-    return {
-      id: 'timing-budget',
-      title: str_(UIStrings.title),
-      description: str_(UIStrings.description),
-      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['devtoolsLogs', 'traces', 'URL', 'GatherContext'],
-    };
-  }
-
-  /**
-   * @param {LH.Budget.TimingMetric} timingMetric
-   * @return {LH.IcuMessage}
-   */
-  static getRowLabel(timingMetric) {
-    /** @type {Record<LH.Budget.TimingMetric, string>} */
-    const strMappings = {
-      'first-contentful-paint': i18n.UIStrings.firstContentfulPaintMetric,
-      'interactive': i18n.UIStrings.interactiveMetric,
-      'first-meaningful-paint': i18n.UIStrings.firstMeaningfulPaintMetric,
-      'max-potential-fid': i18n.UIStrings.maxPotentialFIDMetric,
-      'total-blocking-time': i18n.UIStrings.totalBlockingTimeMetric,
-      'speed-index': i18n.UIStrings.speedIndexMetric,
-      'largest-contentful-paint': i18n.UIStrings.largestContentfulPaintMetric,
-      'cumulative-layout-shift': i18n.UIStrings.cumulativeLayoutShiftMetric,
-    };
-    return str_(strMappings[timingMetric]);
-  }
-
-  /**
-   * @param {LH.Budget.TimingMetric} timingMetric
-   * @param {LH.Artifacts.TimingSummary} summary
-   * @return {number|undefined}
-   */
-  static getMeasurement(timingMetric, summary) {
-    /** @type {Record<LH.Budget.TimingMetric, number|undefined>} */
-    const measurements = {
-      'first-contentful-paint': summary.firstContentfulPaint,
-      'interactive': summary.interactive,
-      'first-meaningful-paint': summary.firstMeaningfulPaint,
-      'max-potential-fid': summary.maxPotentialFID,
-      'total-blocking-time': summary.totalBlockingTime,
-      'speed-index': summary.speedIndex,
-      'largest-contentful-paint': summary.largestContentfulPaint,
-      'cumulative-layout-shift': summary.cumulativeLayoutShift,
-    };
-    return measurements[timingMetric];
-  }
-
-  /**
-   * @param {Immutable<LH.Budget>} budget
-   * @param {LH.Artifacts.TimingSummary} summary
-   * @return {Array<BudgetItem>}
-   */
-  static tableItems(budget, summary) {
-    /** @type {Array<BudgetItem>} */
-    let items = [];
-    if (!budget.timings) {
-      return items;
-    }
-
-    items = budget.timings.map((timingBudget) => {
-      const metricName = timingBudget.metric;
-      const label = this.getRowLabel(metricName);
-      const measurement = this.getMeasurement(metricName, summary);
-      const overBudget = measurement && (measurement > timingBudget.budget)
-        ? (measurement - timingBudget.budget) : undefined;
-      return {
-        metric: metricName,
-        label,
-        measurement,
-        overBudget,
-      };
-    }).sort((a, b) => {
-      return (b.overBudget || 0) - (a.overBudget || 0);
-    });
-
-    // CLS requires a different granularity and should be a numeric type.
-    // Defining type here overrides the column setting so that it doesn't receive ms units.
-    const clsItem = items.find(item => item.metric === 'cumulative-layout-shift');
-    if (clsItem) {
-      if (typeof clsItem.measurement === 'number') {
-        clsItem.measurement = {
-          type: 'numeric',
-          value: Number(clsItem.measurement),
-          granularity: 0.01,
-        };
-      }
-      if (typeof clsItem.overBudget === 'number') {
-        clsItem.overBudget = {
-          type: 'numeric',
-          value: Number(clsItem.overBudget),
-          granularity: 0.01,
-        };
-      }
-    }
-
-    return items;
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @param {LH.Audit.Context} context
-   * @return {Promise<LH.Audit.Product>}
-   */
-  static async audit(artifacts, context) {
-    const gatherContext = artifacts.GatherContext;
-    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    const trace = artifacts.traces[Audit.DEFAULT_PASS];
-    const mainResource = await MainResource.request({URL: artifacts.URL, devtoolsLog}, context);
-    const data = {trace, devtoolsLog, gatherContext, settings: context.settings};
-    const summary = (await TimingSummary.request(data, context)).metrics;
-    const budget = Budget.getMatchingBudget(context.settings.budgets, mainResource.url);
-
-    if (!budget) {
-      return {
-        score: 0,
-        notApplicable: true,
-      };
-    }
-
-    /** @type {LH.Audit.Details.Table['headings']} */
-    const headers = [
-      {key: 'label', itemType: 'text', text: str_(UIStrings.columnTimingMetric)},
-      /**
-       * Note: SpeedIndex, unlike other timing metrics, is not measured in milliseconds.
-       * The renderer applies the correct units to the 'measurement' and 'overBudget' columns for SpeedIndex.
-       */
-      {key: 'measurement', itemType: 'ms', text: str_(UIStrings.columnMeasurement)},
-      {key: 'overBudget', itemType: 'ms', text: str_(i18n.UIStrings.columnOverBudget)},
-    ];
-
-    return {
-      details: Audit.makeTableDetails(headers, this.tableItems(budget, summary)),
-      score: 1,
-    };
-  }
-}
-
-module.exports = TimingBudget;
-module.exports.UIStrings = UIStrings;