new_audit(fr): uses-responsive-images-snapshot

lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js

@@ -0,0 +1,94 @@
+/**
+ * @license Copyright 2021 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.
+ */
+/**
+ * @fileoverview Checks to see if the images used on the page are larger than
+ *   their display sizes. The audit will list all images that are larger than
+ *   their display size with DPR (a 1000px wide image displayed as a
+ *   500px high-res image on a Retina display is 100% used);
+ */
+'use strict';
+
+const Audit = require('../audit.js');
+const UsesResponsiveImages = require('./uses-responsive-images.js');
+const URL = require('../../lib/url-shim.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Label for a column in a data table; entries will be the dimensions of an image as it appears on the page. */
+  columnDisplayedDimensions: 'Displayed dimensions',
+  /** Label for a column in a data table; entries will be the dimensions of an image from it's source file. */
+  columnActualDimensions: 'Actual dimensions',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+// Based on byte threshold of 4096, with 3 bytes per pixel.
+const IGNORE_THRESHOLD_IN_PIXELS = 1365;
+
+class UsesResponsiveImagesSnapshot extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'uses-responsive-images-snapshot',
+      title: UsesResponsiveImages.str_(UsesResponsiveImages.UIStrings.title),
+      description: UsesResponsiveImages.str_(UsesResponsiveImages.UIStrings.description),
+      supportedModes: ['snapshot'],
+      requiredArtifacts: ['ImageElements', 'ViewportDimensions'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts) {
+    let score = 1;
+    /** @type {LH.Audit.Details.TableItem[]} */
+    const items = [];
+    for (const image of artifacts.ImageElements) {
+      if (!image.naturalDimensions) continue;
+      const actual = image.naturalDimensions;
+      const displayed = UsesResponsiveImages.getDisplayedDimensions(
+        {...image, naturalWidth: actual.width, naturalHeight: actual.height},
+        artifacts.ViewportDimensions
+      );
+
+      const actualPixels = actual.width * actual.height;
+      const usedPixels = displayed.width * displayed.height;
+
+      if (actualPixels <= usedPixels) continue;
+      if (actualPixels - usedPixels > IGNORE_THRESHOLD_IN_PIXELS) score = 0;
+
+      items.push({
+        url: URL.elideDataURI(image.src),
+        displayedDimensions: `${displayed.width}x${displayed.height}`,
+        actualDimensions: `${actual.width}x${actual.height}`,
+      });
+    }
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      /* eslint-disable max-len */
+      {key: 'url', itemType: 'thumbnail', text: ''},
+      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+      {key: 'displayedDimensions', itemType: 'text', text: str_(UIStrings.columnDisplayedDimensions)},
+      {key: 'actualDimensions', itemType: 'text', text: str_(UIStrings.columnActualDimensions)},
+      /* eslint-enable max-len */
+    ];
+
+    const details = Audit.makeTableDetails(headings, items);
+
+    return {
+      score,
+      details,
+    };
+  }
+}
+
+module.exports = UsesResponsiveImagesSnapshot;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/byte-efficiency/uses-responsive-images.js

@@ -47,6 +47,39 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
     };
   }
 
+  /**
+   * @param {LH.Artifacts.ImageElement & {naturalWidth: number, naturalHeight: number}} image
+   * @param {LH.Artifacts.ViewportDimensions} ViewportDimensions
+   * @return {{width: number, height: number}};
+   */
+  static getDisplayedDimensions(image, ViewportDimensions) {
+    if (image.displayedWidth && image.displayedHeight) {
+      return {
+        width: image.displayedWidth * ViewportDimensions.devicePixelRatio,
+        height: image.displayedHeight * ViewportDimensions.devicePixelRatio,
+      };
+    }
+
+    // If the image has 0 dimensions, it's probably hidden/offscreen, so we'll be as forgiving as possible
+    // and assume it's the size of two viewports. See https://github.com/GoogleChrome/lighthouse/issues/7236
+    const viewportWidth = ViewportDimensions.innerWidth;
+    const viewportHeight = ViewportDimensions.innerHeight * 2;
+    const imageAspectRatio = image.naturalWidth / image.naturalHeight;
+    const viewportAspectRatio = viewportWidth / viewportHeight;
+    let usedViewportWidth = viewportWidth;
+    let usedViewportHeight = viewportHeight;
+    if (imageAspectRatio > viewportAspectRatio) {
+      usedViewportHeight = viewportWidth / imageAspectRatio;
+    } else {
+      usedViewportWidth = viewportHeight * imageAspectRatio;
+    }
+
+    return {
+      width: usedViewportWidth * ViewportDimensions.devicePixelRatio,
+      height: usedViewportHeight * ViewportDimensions.devicePixelRatio,
+    };
+  }
+
   /**
    * @param {LH.Artifacts.ImageElement & {naturalWidth: number, naturalHeight: number}} image
    * @param {LH.Artifacts.ViewportDimensions} ViewportDimensions
@@ -60,26 +93,8 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
       return null;
     }
 
-    let usedPixels = image.displayedWidth * image.displayedHeight *
-      Math.pow(ViewportDimensions.devicePixelRatio, 2);
-    // If the image has 0 dimensions, it's probably hidden/offscreen, so we'll be as forgiving as possible
-    // and assume it's the size of two viewports. See https://github.com/GoogleChrome/lighthouse/issues/7236
-    if (!usedPixels) {
-      const viewportWidth = ViewportDimensions.innerWidth;
-      const viewportHeight = ViewportDimensions.innerHeight * 2;
-      const imageAspectRatio = image.naturalWidth / image.naturalHeight;
-      const viewportAspectRatio = viewportWidth / viewportHeight;
-      let usedViewportWidth = viewportWidth;
-      let usedViewportHeight = viewportHeight;
-      if (imageAspectRatio > viewportAspectRatio) {
-        usedViewportHeight = viewportWidth / imageAspectRatio;
-      } else {
-        usedViewportWidth = viewportHeight * imageAspectRatio;
-      }
-
-      usedPixels = usedViewportWidth * usedViewportHeight *
-        Math.pow(ViewportDimensions.devicePixelRatio, 2);
-    }
+    const displayed = this.getDisplayedDimensions(image, ViewportDimensions);
+    const usedPixels = displayed.width * displayed.height;
 
     const url = URL.elideDataURI(image.src);
     const actualPixels = image.naturalWidth * image.naturalHeight;
@@ -163,3 +178,4 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
 
 module.exports = UsesResponsiveImages;
 module.exports.UIStrings = UIStrings;
+module.exports.str_ = str_;

lighthouse-core/fraggle-rock/config/default-config.js

@@ -7,6 +7,29 @@
 
 const legacyDefaultConfig = require('../../config/default-config.js');
 
+/** @type {LH.Config.AuditJson[]} */
+const frAudits = [
+  'byte-efficiency/uses-responsive-images-snapshot',
+];
+
+/** @type {Record<string, LH.Config.AuditRefJson[]>} */
+const frCategoryAuditRefExtensions = {
+  'performance': [
+    {id: 'uses-responsive-images-snapshot', weight: 0, group: 'diagnostics'},
+  ],
+};
+
+/** @return {LH.Config.Json['categories']} */
+function mergeCategories() {
+  if (!legacyDefaultConfig.categories) return {};
+  const categories = legacyDefaultConfig.categories;
+  for (const key of Object.keys(frCategoryAuditRefExtensions)) {
+    if (!categories[key]) continue;
+    categories[key].auditRefs.push(...frCategoryAuditRefExtensions[key]);
+  }
+  return categories;
+}
+
 // Ensure all artifact IDs match the typedefs.
 /** @type {Record<keyof LH.FRArtifacts, string>} */
 const artifacts = {
@@ -168,8 +191,8 @@ const defaultConfig = {
     },
   ],
   settings: legacyDefaultConfig.settings,
-  audits: legacyDefaultConfig.audits,
-  categories: legacyDefaultConfig.categories,
+  audits: [...(legacyDefaultConfig.audits || []), ...frAudits],
+  categories: mergeCategories(),
   groups: legacyDefaultConfig.groups,
 };