core(lightwallet): add performance-budget audit

lighthouse-cli/test/cli/__snapshots__/index-test.js.snap

@@ -120,6 +120,9 @@ Object {
     Object {
       "path": "offline-start-url",
     },
+    Object {
+      "path": "performance-budget",
+    },
     Object {
       "path": "resource-summary",
     },
@@ -814,6 +817,11 @@ Object {
           "id": "font-display",
           "weight": 0,
         },
+        Object {
+          "group": "budgets",
+          "id": "performance-budget",
+          "weight": 0,
+        },
         Object {
           "group": "diagnostics",
           "id": "resource-summary",
@@ -1043,6 +1051,10 @@ Object {
       "description": "These are opportunities to to improve the experience of reading tabular or list data using assistive technology, like a screen reader.",
       "title": "Tables and lists",
     },
+    "budgets": Object {
+      "description": "Performance budgets set standards for the performance of your site.",
+      "title": "Budgets",
+    },
     "diagnostics": Object {
       "description": "More information about the performance of your application.",
       "title": "Diagnostics",
@@ -1286,6 +1298,10 @@ Object {
       "description": "These are opportunities to to improve the experience of reading tabular or list data using assistive technology, like a screen reader.",
       "title": "Tables and lists",
     },
+    "budgets": Object {
+      "description": "Performance budgets set standards for the performance of your site.",
+      "title": "Budgets",
+    },
     "diagnostics": Object {
       "description": "More information about the performance of your application.",
       "title": "Diagnostics",

lighthouse-core/audits/performance-budget.js

@@ -0,0 +1,157 @@
+/**
+ * @license Copyright 2019 Google Inc. 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 ResourceSummary = require('../computed/resource-summary.js');
+const i18n = require('../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that compares the size and quantity of page resources against targets set by the user. These targets are thought of as "performance budgets" because these metrics impact page performance (i.e. how quickly a page loads). */
+  title: 'Performance budget',
+  /** Description of a Lighthouse audit where a user sets budgets for the quantity and size of page resources. No character length limits. */
+  description: 'Keep the quantity and size of network requests under the targets ' +
+    'set by the provided performance budget.',
+  /** [ICU Syntax] Label identifying the number of requests over the budget for requests*/
+  requestCount: `{count, plural,
+    =1 {1 request}
+    other {# requests}
+   }`,
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+/** @typedef {{count: number, size: number}} ResourceEntry */
+/** @typedef {{resourceType: LH.Budget.ResourceType, label: string, requestCount: number, size: number, sizeOverBudget: number | undefined, countOverBudget: string | undefined}} BudgetItem */
+
+class ResourceBudget extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'performance-budget',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      requiredArtifacts: ['devtoolsLogs', 'URL'],
+    };
+  }
+
+  /**
+   * @param {LH.Budget | undefined} budget
+   * @return {LH.Audit.Details.Table['headings']}
+   */
+  static tableHeadings(budget) {
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headers = [
+      {key: 'label', itemType: 'text', text: 'Resource Type'},
+      {key: 'requestCount', itemType: 'numeric', text: 'Requests'},
+      {key: 'size', itemType: 'bytes', text: 'Transfer Size'},
+    ];
+    if (budget) {
+      headers.push({key: 'sizeOverBudget', itemType: 'bytes', text: 'Over Budget'});
+    }
+    return headers;
+  }
+
+  /**
+   * @param {LH.Budget.ResourceType} resourceType
+   * @return {string}
+   */
+  static getRowLabel(resourceType) {
+    /** @type {Record<LH.Budget.ResourceType,string>} */
+    const strMappings = {
+      'total': i18n.UIStrings.totalResourceType,
+      'document': i18n.UIStrings.documentResourceType,
+      'script': i18n.UIStrings.scriptResourceType,
+      'stylesheet': i18n.UIStrings.stylesheetResourceType,
+      'image': i18n.UIStrings.imageResourceType,
+      'media': i18n.UIStrings.mediaResourceType,
+      'font': i18n.UIStrings.fontResourceType,
+      'other': i18n.UIStrings.otherResourceType,
+      'third-party': i18n.UIStrings.thirdPartyResourceType,
+    };
+    return strMappings[resourceType];
+  }
+
+  /**
+   * @param {LH.Budget} budget
+   * @param {Record<LH.Budget.ResourceType,ResourceEntry>} summary
+   * @return {Array<BudgetItem>}
+   */
+  static tableItems(budget, summary) {
+    const resourceTypes = /** @type {Array<LH.Budget.ResourceType>} */ (Object.keys(summary));
+    return resourceTypes.map((resourceType) => {
+      const label = str_(this.getRowLabel(resourceType));
+      const requestCount = summary[resourceType].count;
+      const size = summary[resourceType].size;
+
+      let sizeOverBudget;
+      let countOverBudget;
+
+      if (budget.resourceSizes) {
+        const sizeBudget = budget.resourceSizes.find(b => b.resourceType === resourceType);
+        if (sizeBudget && (size > (sizeBudget.budget * 1024))) {
+          sizeOverBudget = size - (sizeBudget.budget * 1024);
+        }
+      }
+      if (budget.resourceCounts) {
+        const countBudget = budget.resourceCounts.find(b => b.resourceType === resourceType);
+        if (countBudget && (requestCount > countBudget.budget)) {
+          const requestDifference = requestCount - countBudget.budget;
+          countOverBudget = str_(UIStrings.requestCount, {count: requestDifference});
+        }
+      }
+      return {
+        resourceType,
+        label,
+        requestCount,
+        size,
+        countOverBudget,
+        sizeOverBudget,
+      };
+    }).filter((row) => {
+      // Only resources with budgets should be included in the table
+      if (budget.resourceSizes) {
+        if (budget.resourceSizes.some(b => b.resourceType === row.resourceType)) return true;
+      }
+      if (budget.resourceCounts) {
+        if (budget.resourceCounts.some(b => b.resourceType === row.resourceType)) return true;
+      }
+      return false;
+    }).sort((a, b) => {
+      return (b.sizeOverBudget || 0) - (a.sizeOverBudget || 0);
+    });
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const summary = await ResourceSummary.request({devtoolsLog, URL: artifacts.URL}, context);
+    const budget = context.settings.budgets ? context.settings.budgets[0] : undefined;
+
+    if (!budget) {
+      return {
+        score: 0,
+        notApplicable: true,
+      };
+    }
+    const headings = ResourceBudget.tableHeadings(budget);
+    const tableItems = this.tableItems(budget, summary);
+    return {
+      details: Audit.makeTableDetails(headings, tableItems),
+      score: 1,
+    };
+  }
+}
+
+module.exports = ResourceBudget;
+module.exports.UIStrings = UIStrings;

lighthouse-core/config/default-config.js

@@ -13,6 +13,10 @@ const i18n = require('../lib/i18n/i18n.js');
 const UIStrings = {
   /** Title of the Performance category of audits. Equivalent to 'Web performance', this term is inclusive of all web page speed and loading optimization topics. Also used as a label of a score gauge; try to limit to 20 characters. */
   performanceCategoryTitle: 'Performance',
+  /** Title of the Budgets section of the Performance Category. 'Budgets' refers to a budget (like a financial budget), but applied to the amount of resources on a page, rather than money. */
+  budgetsGroupTitle: 'Budgets',
+  /** Description of the Budgets section of the Performance category. Within this section the budget results are displayed. */
+  budgetsGroupDescription: 'Performance budgets set standards for the performance of your site.',
   /** Title of the speed metrics section of the Performance category. Within this section are various speed metrics which quantify the pageload performance into values presented in seconds and milliseconds. */
   metricGroupTitle: 'Metrics',
   /** Title of the opportunity section of the Performance category. Within this section are audits with imperative titles that suggest actions the user can take to improve the loading performance of their web page. 'Suggestion'/'Optimization'/'Recommendation' are reasonable synonyms for 'opportunity' in this case. */
@@ -192,6 +196,7 @@ const defaultConfig = {
     'main-thread-tasks',
     'metrics',
     'offline-start-url',
+    'performance-budget',
     'resource-summary',
     'manual/pwa-cross-browser',
     'manual/pwa-page-transitions',
@@ -287,6 +292,10 @@ const defaultConfig = {
       title: str_(UIStrings.loadOpportunitiesGroupTitle),
       description: str_(UIStrings.loadOpportunitiesGroupDescription),
     },
+    'budgets': {
+      title: str_(UIStrings.budgetsGroupTitle),
+      description: str_(UIStrings.budgetsGroupDescription),
+    },
     'diagnostics': {
       title: str_(UIStrings.diagnosticsGroupTitle),
       description: str_(UIStrings.diagnosticsGroupDescription),
@@ -379,6 +388,7 @@ const defaultConfig = {
         {id: 'bootup-time', weight: 0, group: 'diagnostics'},
         {id: 'mainthread-work-breakdown', weight: 0, group: 'diagnostics'},
         {id: 'font-display', weight: 0, group: 'diagnostics'},
+        {id: 'performance-budget', weight: 0, group: 'budgets'},
         {id: 'resource-summary', weight: 0, group: 'diagnostics'},
         // Audits past this point don't belong to a group and will not be shown automatically
         {id: 'network-requests', weight: 0},

lighthouse-core/lib/i18n/en-US.json

@@ -743,6 +743,18 @@
     "message": "Server Backend Latencies",
     "description": "Descriptive title of a Lighthouse audit that tells the user the server latencies observed from each origin the page connected to. This is displayed in a list of audit titles that Lighthouse generates."
   },
+  "lighthouse-core/audits/performance-budget.js | description": {
+    "message": "Keep the quantity and size of network requests under the targets set by the provided performance budget.",
+    "description": "Description of a Lighthouse audit where a user sets budgets for the quantity and size of page resources. No character length limits."
+  },
+  "lighthouse-core/audits/performance-budget.js | requestCount": {
+    "message": "{count, plural,\n    =1 {1 request}\n    other {# requests}\n   }",
+    "description": "[ICU Syntax] Label identifying the number of requests over the budget for requests"
+  },
+  "lighthouse-core/audits/performance-budget.js | title": {
+    "message": "Performance budget",
+    "description": "Title of a Lighthouse audit that compares the size and quantity of page resources against targets set by the user. These targets are thought of as \"performance budgets\" because these metrics impact page performance (i.e. how quickly a page loads)."
+  },
   "lighthouse-core/audits/redirects.js | description": {
     "message": "Redirects introduce additional delays before the page can be loaded. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/redirects).",
     "description": "Description of a Lighthouse audit that tells users why they should reduce the number of server-side redirects on their page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation."
@@ -1115,6 +1127,14 @@
     "message": "Tables and lists",
     "description": "Title of the navigation section within the Accessibility category. Within this section are audits with descriptive titles that highlight opportunities to improve the experience of reading tabular or list data using assistive technology."
   },
+  "lighthouse-core/config/default-config.js | budgetsGroupDescription": {
+    "message": "Performance budgets set standards for the performance of your site.",
+    "description": "Description of the Budgets section of the Performance category. Within this section the budget results are displayed."
+  },
+  "lighthouse-core/config/default-config.js | budgetsGroupTitle": {
+    "message": "Budgets",
+    "description": "Title of the Budgets section of the Performance Category. 'Budgets' refers to a budget (like a financial budget), but applied to the amount of resources on a page, rather than money."
+  },
   "lighthouse-core/config/default-config.js | diagnosticsGroupDescription": {
     "message": "More information about the performance of your application.",
     "description": "Description of the diagnostics section of the Performance category. Within this section are audits with non-imperative titles that provide more detail on the page's page load performance characteristics. Whereas the 'Opportunities' suggest an action along with expected time savings, diagnostics do not. Within this section, the user may read the details and deduce additional actions they could take."