core(lightwallet): add resource-summary audit

lighthouse-core/audits/resource-summary.js

@@ -0,0 +1,114 @@
+/**
+ * @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 NetworkRecords = require('../computed/network-records.js');
+const ComputedResourceSummary = require('../computed/resource-summary.js');
+const i18n = require('../lib/i18n/i18n.js');
+const MainResource = require('../computed/main-resource.js');
+
+const UIStrings = {
+  /** Imperative title of a Lighthouse audit that tells the user to minimize the size and quantity of resources used to load the page. */
+  title: 'Keep request counts and transfer sizes small',
+  /** Description of a Lighthouse audit that tells the user that they can setup a budgets for the quantity and size of page resources. No character length limits. */
+  description: 'To set budgets for the quantity and size of page resources,' +
+    ' add a budget.json file.',
+  /** [ICU Syntax] Label for an audit identifying the number of requests and kilobytes used to load the page. */
+  displayValue: `{requestCount, plural, =1 {1 request} other {# requests}}` +
+    ` • { byteCount, number, bytes } KB`,
+  /** Label for a row in a data table; entries will be the total number and byte size of all resources loaded by a web page. */
+  totalResourceType: 'Total',
+  /** Label for a row in a data table; entries will be the total number and byte size of all 'Document' resources loaded by a web page. */
+  documentResourceType: 'Document',
+  /** Label for a row in a data table; entries will be the total number and byte size of all 'Script' resources loaded by a web page. */
+  scriptResourceType: 'Script',
+  /** Label for a row in a data table; entries will be the total number and byte size of all 'Stylesheet' resources loaded by a web page. */
+  stylesheetResourceType: 'Stylesheet',
+  /** Label for a row in a data table; entries will be the total number and byte size of all 'Image' resources loaded by a web page */
+  imageResourceType: 'Image',
+  /** Label for a row in a data table; entries will be the total number and byte size of all 'Media' resources loaded by a web page */
+  mediaResourceType: 'Media',
+  /** Label for a row in a data table; entries will be the total number and byte size of all 'Font' resources loaded by a web page */
+  fontResourceType: 'Font',
+  /** Label for a row in a data table; entries will be the total number and byte size of all resources loaded by a web page that don't fit into the categories of Document, Script, Stylesheet, Image, Media, & Font.*/
+  otherResourceType: 'Other',
+  /** Label for a row in a data table; entries will be the total number and byte size of all third-part resources loaded by a web page */
+  thirdPartyResourceType: 'Third-party',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class ResourceSummary extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'resource-summary',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      requiredArtifacts: ['devtoolsLogs'],
+    };
+  }
+
+  /**
+   * @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 networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    const mainResource = await (MainResource.request({devtoolsLog, URL: artifacts.URL}, context));
+    const resourceSummary = ComputedResourceSummary.summarize(networkRecords, mainResource.url);
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'label', itemType: 'text', text: 'Resource Type'},
+      {key: 'count', itemType: 'numeric', text: 'Requests'},
+      {key: 'size', itemType: 'bytes', text: 'Transfer Size'},
+    ];
+
+    /** @type {Record<LH.Budget.ResourceType,string>} */
+    const strMappings = {
+      total: str_(UIStrings.totalResourceType),
+      document: str_(UIStrings.documentResourceType),
+      script: str_(UIStrings.scriptResourceType),
+      stylesheet: str_(UIStrings.stylesheetResourceType),
+      image: str_(UIStrings.imageResourceType),
+      media: str_(UIStrings.mediaResourceType),
+      font: str_(UIStrings.fontResourceType),
+      other: str_(UIStrings.otherResourceType),
+      'third-party': str_(UIStrings.thirdPartyResourceType),
+    };
+
+    const tableContents = Object.keys(resourceSummary).map((type) => {
+      return {
+        label: strMappings[type],
+        count: resourceSummary[type].count,
+        size: resourceSummary[type].size,
+      };
+    }).sort((a, b) => {
+      return b.size - a.size;
+    });
+
+    const tableDetails = Audit.makeTableDetails(headings, tableContents);
+
+    return {
+      details: tableDetails,
+      score: 1,
+      displayValue: str_(UIStrings.displayValue, {
+        requestCount: resourceSummary.total.count,
+        byteCount: resourceSummary.total.size,
+      }),
+    };
+  }
+}
+
+module.exports = ResourceSummary;
+module.exports.UIStrings = UIStrings;

lighthouse-core/config/default-config.js

@@ -192,6 +192,7 @@ const defaultConfig = {
     'main-thread-tasks',
     'metrics',
     'offline-start-url',
+    'resource-summary',
     'manual/pwa-cross-browser',
     'manual/pwa-page-transitions',
     'manual/pwa-each-page-has-url',
@@ -378,6 +379,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: '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},
         {id: 'network-rtt', weight: 0},

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

@@ -751,6 +751,102 @@
     "message": "Avoid multiple page redirects",
     "description": "Imperative title of a Lighthouse audit that tells the user to eliminate the redirects taken through multiple URLs to load the page. This is shown in a list of audits that Lighthouse generates."
   },
+  "lighthouse-core/audits/resource-budget.js | description": {
+    "message": "To set budgets for the quantity and size of page resources, add a budget.json file.",
+    "description": "Description of a Lighthouse audit that tells the user that they can setup a budgets for the quantity and size of page resources. No character length limits."
+  },
+  "lighthouse-core/audits/resource-budget.js | documentResourceType": {
+    "message": "Document",
+    "description": "Label for the 'Document' resource type."
+  },
+  "lighthouse-core/audits/resource-budget.js | fontResourceType": {
+    "message": "Font",
+    "description": "Label for the 'font' resource type."
+  },
+  "lighthouse-core/audits/resource-budget.js | imageResourceType": {
+    "message": "Image",
+    "description": "Label for the 'image' resource type."
+  },
+  "lighthouse-core/audits/resource-budget.js | mediaResourceType": {
+    "message": "Media",
+    "description": "Label for the 'media' resource type."
+  },
+  "lighthouse-core/audits/resource-budget.js | otherResourceType": {
+    "message": "Other",
+    "description": "Label for the 'other' resource type."
+  },
+  "lighthouse-core/audits/resource-budget.js | requestCount": {
+    "message": "{count, plural,\n    =1 {1 request}\n    other {# requests}\n   }",
+    "description": "[ICU Syntax] Label identifying the number of requests"
+  },
+  "lighthouse-core/audits/resource-budget.js | scriptResourceType": {
+    "message": "Script",
+    "description": "Label for the 'script' resource type."
+  },
+  "lighthouse-core/audits/resource-budget.js | stylesheetResourceType": {
+    "message": "Stylesheet",
+    "description": "Label for the 'stylesheet' resource type."
+  },
+  "lighthouse-core/audits/resource-budget.js | thirdPartyResourceType": {
+    "message": "Third-party",
+    "description": "Label for the 'third-party' resource type."
+  },
+  "lighthouse-core/audits/resource-budget.js | title": {
+    "message": "Keep request counts and file sizes small",
+    "description": "Imperative title of a Lighthouse audit that tells the user to minimize the size and quantity of resources used to load the page."
+  },
+  "lighthouse-core/audits/resource-budget.js | totalResourceType": {
+    "message": "Total",
+    "description": ""
+  },
+  "lighthouse-core/audits/resource-summary.js | description": {
+    "message": "To set budgets for the quantity and size of page resources, add a budgets.json file.",
+    "description": "Description of a Lighthouse audit that tells the user that they can setup a budgets for the quantity and size of page resources. No character length limits."
+  },
+  "lighthouse-core/audits/resource-summary.js | displayValue": {
+    "message": "{requestCount, plural, =1 {1 request} other {# requests}} • { byteCount, number, bytes } KB",
+    "description": "[ICU Syntax] Label for an audit identifying the number of requests and kilobytes used to load the page."
+  },
+  "lighthouse-core/audits/resource-summary.js | documentResourceType": {
+    "message": "Document",
+    "description": "Label for the 'Document' resource type."
+  },
+  "lighthouse-core/audits/resource-summary.js | fontResourceType": {
+    "message": "Font",
+    "description": "Label for the 'font' resource type."
+  },
+  "lighthouse-core/audits/resource-summary.js | imageResourceType": {
+    "message": "Image",
+    "description": "Label for the 'image' resource type."
+  },
+  "lighthouse-core/audits/resource-summary.js | mediaResourceType": {
+    "message": "Media",
+    "description": "Label for the 'media' resource type."
+  },
+  "lighthouse-core/audits/resource-summary.js | otherResourceType": {
+    "message": "Other",
+    "description": "Label for the 'other' resource type."
+  },
+  "lighthouse-core/audits/resource-summary.js | scriptResourceType": {
+    "message": "Script",
+    "description": "Label for the 'script' resource type."
+  },
+  "lighthouse-core/audits/resource-summary.js | stylesheetResourceType": {
+    "message": "Stylesheet",
+    "description": "Label for the 'stylesheet' resource type."
+  },
+  "lighthouse-core/audits/resource-summary.js | thirdPartyResourceType": {
+    "message": "Third-party",
+    "description": "Label for the 'third-party' resource type."
+  },
+  "lighthouse-core/audits/resource-summary.js | title": {
+    "message": "Keep request counts and file sizes small",
+    "description": "Imperative title of a Lighthouse audit that tells the user to minimize the size and quantity of resources used to load the page."
+  },
+  "lighthouse-core/audits/resource-summary.js | totalResourceType": {
+    "message": "Total",
+    "description": "Label for the combination of all resources on the page."
+  },
   "lighthouse-core/audits/seo/canonical.js | description": {
     "message": "Canonical links suggest which URL to show in search results. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/canonical).",
     "description": "Description of a Lighthouse audit that tells the user *why* they need to have a valid rel=canonical link. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation."
@@ -1103,6 +1199,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."

lighthouse-core/test/audits/resource-summary-test.js

@@ -0,0 +1,54 @@
+/**
+ * @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 ResourceSummaryAudit = require('../../audits/resource-summary.js');
+const assert = require('assert');
+const networkRecordsToDevtoolsLog = require('../network-records-to-devtools-log.js');
+
+/* eslint-env jest */
+
+describe('Performance: Resource summary audit', () => {
+  let artifacts;
+  let context;
+  beforeEach(() => {
+    context = {computedCache: new Map()};
+
+    artifacts = {
+      devtoolsLogs: {
+        defaultPass: networkRecordsToDevtoolsLog([
+          {url: 'http://example.com/file.html', resourceType: 'Document', transferSize: 30},
+          {url: 'http://example.com/app.js', resourceType: 'Script', transferSize: 10},
+          {url: 'http://third-party.com/script.js', resourceType: 'Script', transferSize: 50},
+          {url: 'http://third-party.com/file.jpg', resourceType: 'Image', transferSize: 70},
+        ])},
+      URL: { requestedUrl: 'https://example.com', finalUrl: 'https://example.com' },
+    };
+  });
+
+  it('includes all resource types, regardless of whether page contains them', () => {
+    return ResourceSummaryAudit.audit(artifacts, context).then(result => {
+      assert.equal(Object.keys(result.details.items).length, 9);
+    });
+  });
+
+  it('it displays "0" if there are no resources of that type', () => {
+    return ResourceSummaryAudit.audit(artifacts, context).then(result => {
+      const fontItem = result.details.items.find(item => item.resourceType === 'font');
+      assert.equal(fontItem.count, 0);
+      assert.equal(fontItem.size, 0);
+    });
+  });
+
+  it('it sorts items by size (descending)', () => {
+    return ResourceSummaryAudit.audit(artifacts, context).then(result => {
+      const items = result.details.items;
+      assert.ok(items[0].size >= items[1].size);
+      assert.ok(items[1].size >= items[2].size);
+      assert.ok(items[2].size >= items[3].size);
+    });
+  });
+});