lighthouse 9.6.7 → 10.0.0

package/lighthouse-core/audits/font-display.js

@@ -1,193 +0,0 @@
-/**
- * @license Copyright 2017 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 URL = require('../lib/url-shim.js');
-const PASSING_FONT_DISPLAY_REGEX = /^(block|fallback|optional|swap)$/;
-const CSS_URL_REGEX = /url\((.*?)\)/;
-const CSS_URL_GLOBAL_REGEX = new RegExp(CSS_URL_REGEX, 'g');
-const i18n = require('../lib/i18n/i18n.js');
-const Sentry = require('../lib/sentry.js');
-const NetworkRecords = require('../computed/network-records.js');
-
-const UIStrings = {
-  /** Title of a diagnostic audit that provides detail on if all the text on a webpage was visible while the page was loading its webfonts. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
-  title: 'All text remains visible during webfont loads',
-  /** Title of a diagnostic audit that provides detail on the load of the page's webfonts. Often the text is invisible for seconds before the webfont resource is loaded. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */
-  failureTitle: 'Ensure text remains visible during webfont load',
-  /** Description of a Lighthouse audit that tells the user *why* they should use the font-display CSS feature. 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:
-    'Leverage the font-display CSS feature to ensure text is user-visible while ' +
-    'webfonts are loading. ' +
-    '[Learn more](https://web.dev/font-display/).',
-  /**
-   * @description [ICU Syntax] A warning message that is shown when Lighthouse couldn't automatically check some of the page's fonts, telling the user that they will need to manually check the fonts coming from a certain URL origin.
-   * @example {https://font.cdn.com/} fontOrigin
-   */
-  undeclaredFontOriginWarning:
-    '{fontCountForOrigin, plural, ' +
-    // eslint-disable-next-line max-len
-    '=1 {Lighthouse was unable to automatically check the `font-display` value for the origin {fontOrigin}.} ' +
-    // eslint-disable-next-line max-len
-    'other {Lighthouse was unable to automatically check the `font-display` values for the origin {fontOrigin}.}}',
-};
-
-const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
-
-class FontDisplay extends Audit {
-  /**
-   * @return {LH.Audit.Meta}
-   */
-  static get meta() {
-    return {
-      id: 'font-display',
-      title: str_(UIStrings.title),
-      failureTitle: str_(UIStrings.failureTitle),
-      description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
-      requiredArtifacts: ['devtoolsLogs', 'CSSUsage', 'URL'],
-    };
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @param {RegExp} passingFontDisplayRegex
-   * @return {{passingURLs: Set<string>, failingURLs: Set<string>}}
-   */
-  static findFontDisplayDeclarations(artifacts, passingFontDisplayRegex) {
-    /** @type {Set<string>} */
-    const passingURLs = new Set();
-    /** @type {Set<string>} */
-    const failingURLs = new Set();
-
-    // Go through all the stylesheets to find all @font-face declarations
-    for (const stylesheet of artifacts.CSSUsage.stylesheets) {
-      // Eliminate newlines so we can more easily scan through with a regex
-      const newlinesStripped = stylesheet.content.replace(/(\r|\n)+/g, ' ');
-      // Find the @font-faces
-      const fontFaceDeclarations = newlinesStripped.match(/@font-face\s*{(.*?)}/g) || [];
-      // Go through all the @font-face declarations to find a declared `font-display: ` property
-      for (const declaration of fontFaceDeclarations) {
-        // We'll try to find the URL it's referencing.
-        const rawFontURLs = declaration.match(CSS_URL_GLOBAL_REGEX);
-        // If no URLs, we can't really do anything; bail
-        if (!rawFontURLs) continue;
-        // Find the font-display value by matching a single token, optionally surrounded by whitespace,
-        // followed either by a semicolon or the end of a block.
-        const fontDisplayMatch = declaration.match(/font-display\s*:\s*(\w+)\s*(;|\})/);
-        const rawFontDisplay = fontDisplayMatch?.[1] || '';
-        const hasPassingFontDisplay = passingFontDisplayRegex.test(rawFontDisplay);
-        const targetURLSet = hasPassingFontDisplay ? passingURLs : failingURLs;
-
-        // Finally convert the raw font URLs to the absolute URLs and add them to the set.
-        const relativeURLs = rawFontURLs
-          // @ts-expect-error - guaranteed to match from previous regex, pull URL group out
-          .map(s => s.match(CSS_URL_REGEX)[1].trim())
-          .map(s => {
-            // remove any quotes surrounding the URL
-            if (/^('|").*\1$/.test(s)) {
-              return s.substr(1, s.length - 2);
-            }
-
-            return s;
-          });
-
-        // Convert the relative CSS URL to an absolute URL and add it to the target set.
-        for (const relativeURL of relativeURLs) {
-          try {
-            const relativeRoot = URL.isValid(stylesheet.header.sourceURL) ?
-              stylesheet.header.sourceURL : artifacts.URL.finalUrl;
-            const absoluteURL = new URL(relativeURL, relativeRoot);
-            targetURLSet.add(absoluteURL.href);
-          } catch (err) {
-            Sentry.captureException(err, {tags: {audit: this.meta.id}});
-          }
-        }
-      }
-    }
-
-    return {passingURLs, failingURLs};
-  }
-
-  /**
-   * Some pages load many fonts we can't check, so dedupe on origin.
-   * @param {Array<string>} warningUrls
-   * @return {Array<LH.IcuMessage>}
-   */
-  static getWarningsForFontUrls(warningUrls) {
-    /** @type {Map<string, number>} */
-    const warningCountByOrigin = new Map();
-    for (const warningUrl of warningUrls) {
-      const origin = URL.getOrigin(warningUrl);
-      if (!origin) continue;
-
-      const count = warningCountByOrigin.get(origin) || 0;
-      warningCountByOrigin.set(origin, count + 1);
-    }
-
-    const warnings = [...warningCountByOrigin].map(([fontOrigin, fontCountForOrigin]) => {
-      return str_(UIStrings.undeclaredFontOriginWarning, {fontCountForOrigin, fontOrigin});
-    });
-    return warnings;
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @param {LH.Audit.Context} context
-   * @return {Promise<LH.Audit.Product>}
-   */
-  static async audit(artifacts, context) {
-    const devtoolsLogs = artifacts.devtoolsLogs[this.DEFAULT_PASS];
-    const networkRecords = await NetworkRecords.request(devtoolsLogs, context);
-    const {passingURLs, failingURLs} =
-      FontDisplay.findFontDisplayDeclarations(artifacts, PASSING_FONT_DISPLAY_REGEX);
-    /** @type {Array<string>} */
-    const warningURLs = [];
-
-    const results = networkRecords
-      // Find all fonts...
-      .filter(record => record.resourceType === 'Font')
-      // ...and that aren't data URLs, the blocking concern doesn't really apply
-      .filter(record => !/^data:/.test(record.url))
-      .filter(record => !/^blob:/.test(record.url))
-      // ...that have a failing font-display value
-      .filter(record => {
-        // Failing URLs should be considered.
-        if (failingURLs.has(record.url)) return true;
-        // Everything else shouldn't be, but we should warn if we don't recognize the URL at all.
-        if (!passingURLs.has(record.url)) warningURLs.push(record.url);
-        return false;
-      })
-      .map(record => {
-        // In reality the end time should be calculated with paint time included
-        // all browsers wait 3000ms to block text so we make sure 3000 is our max wasted time
-        const wastedMs = Math.min((record.endTime - record.startTime) * 1000, 3000);
-
-        return {
-          url: record.url,
-          wastedMs,
-        };
-      });
-
-    /** @type {LH.Audit.Details.Table['headings']} */
-    const headings = [
-      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'wastedMs', itemType: 'ms', text: str_(i18n.UIStrings.columnWastedMs)},
-    ];
-
-    const details = Audit.makeTableDetails(headings, results);
-
-    return {
-      score: Number(results.length === 0),
-      details,
-      warnings: FontDisplay.getWarningsForFontUrls(warningURLs),
-    };
-  }
-}
-
-module.exports = FontDisplay;
-module.exports.UIStrings = UIStrings;

package/lighthouse-core/audits/full-page-screenshot.js

@@ -1,43 +0,0 @@
-/**
- * @license Copyright 2020 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');
-
-class FullPageScreenshot extends Audit {
-  /**
-   * @return {LH.Audit.Meta}
-   */
-  static get meta() {
-    return {
-      id: 'full-page-screenshot',
-      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
-      title: 'Full-page screenshot',
-      description: 'A full-height screenshot of the final rendered page',
-      requiredArtifacts: ['FullPageScreenshot'],
-    };
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @return {Promise<LH.Audit.Product>}
-   */
-  static async audit(artifacts) {
-    if (!artifacts.FullPageScreenshot) {
-      return {score: 0, notApplicable: true};
-    }
-
-    return {
-      score: 1,
-      details: {
-        type: 'full-page-screenshot',
-        ...artifacts.FullPageScreenshot,
-      },
-    };
-  }
-}
-
-module.exports = FullPageScreenshot;

package/lighthouse-core/audits/image-aspect-ratio.js

@@ -1,122 +0,0 @@
-/**
- * @license Copyright 2017 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 aspect ratio of the images used on
- *   the page are equal to the aspect ratio of their display sizes. The
- *   audit will list all images that don't match with their display size
- *   aspect ratio.
- */
-'use strict';
-
-const Audit = require('./audit.js');
-const URL = require('../lib/url-shim.js');
-const i18n = require('../lib/i18n/i18n.js');
-
-const UIStrings = {
-  /** Title of a Lighthouse audit that provides detail on the aspect ratios of all images on the page. This descriptive title is shown to users when all images use correct aspect ratios. */
-  title: 'Displays images with correct aspect ratio',
-  /** Title of a Lighthouse audit that provides detail on the aspect ratios of all images on the page. This descriptive title is shown to users when not all images use correct aspect ratios. */
-  failureTitle: 'Displays images with incorrect aspect ratio',
-  /** Description of a Lighthouse audit that tells the user why they should maintain the correct aspect ratios for all images. 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: 'Image display dimensions should match natural aspect ratio. ' +
-    '[Learn more](https://web.dev/image-aspect-ratio/).',
-  /**  Label for a column in a data table; entries in the column will be the numeric aspect ratio of an image as displayed in a web page. */
-  columnDisplayed: 'Aspect Ratio (Displayed)',
-  /**  Label for a column in a data table; entries in the column will be the numeric aspect ratio of the raw (actual) image. */
-  columnActual: 'Aspect Ratio (Actual)',
-};
-
-const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
-
-const THRESHOLD_PX = 2;
-
-/** @typedef {Required<LH.Artifacts.ImageElement>} WellDefinedImage */
-
-class ImageAspectRatio extends Audit {
-  /**
-   * @return {LH.Audit.Meta}
-   */
-  static get meta() {
-    return {
-      id: 'image-aspect-ratio',
-      title: str_(UIStrings.title),
-      failureTitle: str_(UIStrings.failureTitle),
-      description: str_(UIStrings.description),
-      requiredArtifacts: ['ImageElements'],
-    };
-  }
-
-  /**
-   * @param {WellDefinedImage} image
-   * @return {{url: string, node: LH.Audit.Details.NodeValue, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}}
-   */
-  static computeAspectRatios(image) {
-    const url = URL.elideDataURI(image.src);
-    const actualAspectRatio = image.naturalDimensions.width / image.naturalDimensions.height;
-    const displayedAspectRatio = image.displayedWidth / image.displayedHeight;
-
-    const targetDisplayHeight = image.displayedWidth / actualAspectRatio;
-    const doRatiosMatch = Math.abs(targetDisplayHeight - image.displayedHeight) < THRESHOLD_PX;
-
-    return {
-      url,
-      node: Audit.makeNodeItem(image.node),
-      displayedAspectRatio: `${image.displayedWidth} x ${image.displayedHeight}
-        (${displayedAspectRatio.toFixed(2)})`,
-      actualAspectRatio: `${image.naturalDimensions.width} x ${image.naturalDimensions.height}
-        (${actualAspectRatio.toFixed(2)})`,
-      doRatiosMatch,
-    };
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
-   */
-  static audit(artifacts) {
-    const images = artifacts.ImageElements;
-
-    /** @type {Array<{url: string, node: LH.Audit.Details.NodeValue, displayedAspectRatio: string, actualAspectRatio: string, doRatiosMatch: boolean}>} */
-    const results = [];
-    images.filter(image => {
-      // - filter out css background images since we don't have a reliable way to tell if it's a
-      //   sprite sheet, repeated for effect, etc
-      // - filter out images that don't have following properties:
-      //   networkRecord, width, height, `object-fit` property
-      // - filter all svgs as they have no natural dimensions to audit
-      // - filter out images that have falsy naturalWidth or naturalHeight
-      return !image.isCss &&
-        URL.guessMimeType(image.src) !== 'image/svg+xml' &&
-        image.naturalDimensions &&
-        image.naturalDimensions.height > 5 &&
-        image.naturalDimensions.width > 5 &&
-        image.displayedWidth &&
-        image.displayedHeight &&
-        image.computedStyles.objectFit === 'fill';
-    }).forEach(image => {
-      const wellDefinedImage = /** @type {WellDefinedImage} */ (image);
-      const processed = ImageAspectRatio.computeAspectRatios(wellDefinedImage);
-
-      if (!processed.doRatiosMatch) results.push(processed);
-    });
-
-    /** @type {LH.Audit.Details.Table['headings']} */
-    const headings = [
-      {key: 'node', itemType: 'node', text: ''},
-      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'displayedAspectRatio', itemType: 'text', text: str_(UIStrings.columnDisplayed)},
-      {key: 'actualAspectRatio', itemType: 'text', text: str_(UIStrings.columnActual)},
-    ];
-
-    return {
-      score: Number(results.length === 0),
-      details: Audit.makeTableDetails(headings, results),
-    };
-  }
-}
-
-module.exports = ImageAspectRatio;
-module.exports.UIStrings = UIStrings;

package/lighthouse-core/audits/image-size-responsive.js

@@ -1,331 +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.
- */
-/**
- * @fileoverview Checks to see if the size of the visible images used on
- *   the page are large enough with respect to the pixel ratio. The
- *   audit will list all visible images that are too small.
- */
-'use strict';
-
-const Audit = require('./audit.js');
-const URL = require('../lib/url-shim.js');
-const i18n = require('../lib/i18n/i18n.js');
-
-/** @typedef {LH.Artifacts.ImageElement & Required<Pick<LH.Artifacts.ImageElement, 'naturalDimensions'>>} ImageWithNaturalDimensions */
-
-const UIStrings = {
-  /** Title of a Lighthouse audit that provides detail on the size of visible images on the page. This descriptive title is shown to users when all images have correct sizes. */
-  title: 'Serves images with appropriate resolution',
-  /** Title of a Lighthouse audit that provides detail on the size of visible images on the page. This descriptive title is shown to users when not all images have correct sizes. */
-  failureTitle: 'Serves images with low resolution',
-  /** Description of a Lighthouse audit that tells the user why they should maintain an appropriate size for all images. 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: 'Image natural dimensions should be proportional to the display size and the ' +
-    'pixel ratio to maximize image clarity. [Learn more](https://web.dev/serve-responsive-images/).',
-  /**  Label for a column in a data table; entries in the column will be a string representing the displayed size of the image. */
-  columnDisplayed: 'Displayed size',
-  /**  Label for a column in a data table; entries in the column will be a string representing the actual size of the image. */
-  columnActual: 'Actual size',
-  /**  Label for a column in a data table; entries in the column will be a string representing the expected size of the image. */
-  columnExpected: 'Expected size',
-};
-
-const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
-
-// Factors used to allow for smaller effective density.
-// A factor of 1 means the actual device pixel density will be used.
-// A factor of 0.5, means half the density is required. For example if the device pixel ratio is 3,
-// then the images should have at least a density of 1.5.
-const SMALL_IMAGE_FACTOR = 1.0;
-const LARGE_IMAGE_FACTOR = 0.75;
-
-// An image has must have both its dimensions lower or equal to the threshold in order to be
-// considered SMALL.
-const SMALL_IMAGE_THRESHOLD = 64;
-
-/** @typedef {{url: string, node: LH.Audit.Details.NodeValue, displayedSize: string, actualSize: string, actualPixels: number, expectedSize: string, expectedPixels: number}} Result */
-
-/**
- * @param {{top: number, bottom: number, left: number, right: number}} imageRect
- * @param {{innerWidth: number, innerHeight: number}} viewportDimensions
- * @return {boolean}
- */
-function isVisible(imageRect, viewportDimensions) {
-  return (
-    (imageRect.bottom - imageRect.top) * (imageRect.right - imageRect.left) > 0 &&
-    imageRect.top <= viewportDimensions.innerHeight &&
-    imageRect.bottom >= 0 &&
-    imageRect.left <= viewportDimensions.innerWidth &&
-    imageRect.right >= 0
-  );
-}
-
-/**
- * @param {{top: number, bottom: number, left: number, right: number}} imageRect
- * @param {{innerWidth: number, innerHeight: number}} viewportDimensions
- * @return {boolean}
- */
-function isSmallerThanViewport(imageRect, viewportDimensions) {
-  return (
-    (imageRect.bottom - imageRect.top) <= viewportDimensions.innerHeight &&
-    (imageRect.right - imageRect.left) <= viewportDimensions.innerWidth
-  );
-}
-
-/**
- * @param {LH.Artifacts.ImageElement} image
- * @return {boolean}
- */
-function isCandidate(image) {
-  /** image-rendering solution for pixel art scaling.
-   * https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look
-  */
-  const artisticImageRenderingValues = ['pixelated', 'crisp-edges'];
-  // https://html.spec.whatwg.org/multipage/images.html#pixel-density-descriptor
-  const densityDescriptorRegex = / \d+(\.\d+)?x/;
-  if (image.displayedWidth <= 1 || image.displayedHeight <= 1) {
-    return false;
-  }
-  if (
-    !image.naturalDimensions ||
-    !image.naturalDimensions.width ||
-    !image.naturalDimensions.height
-  ) {
-    return false;
-  }
-  if (URL.guessMimeType(image.src) === 'image/svg+xml') {
-    return false;
-  }
-  if (image.isCss) {
-    return false;
-  }
-  if (image.computedStyles.objectFit !== 'fill') {
-    return false;
-  }
-  // Check if pixel art scaling is used.
-  if (artisticImageRenderingValues.includes(image.computedStyles.imageRendering)) {
-    return false;
-  }
-  // Check if density descriptor is used.
-  if (densityDescriptorRegex.test(image.srcset)) {
-    return false;
-  }
-  return true;
-}
-
-/**
- * Type check to ensure that the ImageElement has natural dimensions.
- *
- * @param {LH.Artifacts.ImageElement} image
- * @return {image is ImageWithNaturalDimensions}
- */
-function imageHasNaturalDimensions(image) {
-  return !!image.naturalDimensions;
-}
-
-/**
- * @param {ImageWithNaturalDimensions} image
- * @param {number} DPR
- * @return {boolean}
- */
-function imageHasRightSize(image, DPR) {
-  const [expectedWidth, expectedHeight] =
-      allowedImageSize(image.displayedWidth, image.displayedHeight, DPR);
-  return image.naturalDimensions.width >= expectedWidth &&
-    image.naturalDimensions.height >= expectedHeight;
-}
-
-/**
- * @param {ImageWithNaturalDimensions} image
- * @param {number} DPR
- * @return {Result}
- */
-function getResult(image, DPR) {
-  const [expectedWidth, expectedHeight] =
-      expectedImageSize(image.displayedWidth, image.displayedHeight, DPR);
-  return {
-    url: URL.elideDataURI(image.src),
-    node: Audit.makeNodeItem(image.node),
-    displayedSize: `${image.displayedWidth} x ${image.displayedHeight}`,
-    actualSize: `${image.naturalDimensions.width} x ${image.naturalDimensions.height}`,
-    actualPixels: image.naturalDimensions.width * image.naturalDimensions.height,
-    expectedSize: `${expectedWidth} x ${expectedHeight}`,
-    expectedPixels: expectedWidth * expectedHeight,
-  };
-}
-
-/**
- * Compute the size an image should have given the display dimensions and pixel density in order to
- * pass the audit.
- *
- * For smaller images, typically icons, the size must be proportional to the density.
- * For larger images some tolerance is allowed as in those cases the perceived degradation is not
- * that bad.
- *
- * @param {number} displayedWidth
- * @param {number} displayedHeight
- * @param {number} DPR
- * @return {[number, number]}
- */
-function allowedImageSize(displayedWidth, displayedHeight, DPR) {
-  let factor = SMALL_IMAGE_FACTOR;
-  if (displayedWidth > SMALL_IMAGE_THRESHOLD || displayedHeight > SMALL_IMAGE_THRESHOLD) {
-    factor = LARGE_IMAGE_FACTOR;
-  }
-  const requiredDpr = quantizeDpr(DPR);
-  const width = Math.ceil(factor * requiredDpr * displayedWidth);
-  const height = Math.ceil(factor * requiredDpr * displayedHeight);
-  return [width, height];
-}
-
-/**
- * Compute the size an image should have given the display dimensions and pixel density.
- *
- * @param {number} displayedWidth
- * @param {number} displayedHeight
- * @param {number} DPR
- * @return {[number, number]}
- */
-function expectedImageSize(displayedWidth, displayedHeight, DPR) {
-  const width = Math.ceil(quantizeDpr(DPR) * displayedWidth);
-  const height = Math.ceil(quantizeDpr(DPR) * displayedHeight);
-  return [width, height];
-}
-
-/**
- * Remove repeated entries for the same source.
- *
- * It will keep the entry with the largest expected size.
- *
- * @param {Result[]} results
- * @return {Result[]}
- */
-function deduplicateResultsByUrl(results) {
-  results.sort((a, b) => a.url === b.url ? 0 : (a.url < b. url ? -1 : 1));
-  /** @type {Result[]} */
-  const deduplicated = [];
-  for (const r of results) {
-    const previousResult = deduplicated[deduplicated.length - 1];
-    if (previousResult && previousResult.url === r.url) {
-      // If the URL was the same, this is a duplicate. Keep the largest image.
-      if (previousResult.expectedPixels < r.expectedPixels) {
-        deduplicated[deduplicated.length - 1] = r;
-      }
-    } else {
-      deduplicated.push(r);
-    }
-  }
-  return deduplicated;
-}
-
-/**
- * Sort entries in descending order by the magnitude of the size deficit, i.e. most pressing issues listed first.
- *
- * @param {Result[]} results
- * @return {Result[]}
- */
-function sortResultsBySizeDelta(results) {
-  return results.sort(
-      (a, b) => (b.expectedPixels - b.actualPixels) - (a.expectedPixels - a.actualPixels));
-}
-
-class ImageSizeResponsive extends Audit {
-  /**
-   * @return {LH.Audit.Meta}
-   */
-  static get meta() {
-    return {
-      id: 'image-size-responsive',
-      title: str_(UIStrings.title),
-      failureTitle: str_(UIStrings.failureTitle),
-      description: str_(UIStrings.description),
-      requiredArtifacts: ['ImageElements', 'ViewportDimensions'],
-    };
-  }
-
-  /**
-   * @param {LH.Artifacts} artifacts
-   * @return {LH.Audit.Product}
-   */
-  static audit(artifacts) {
-    const DPR = artifacts.ViewportDimensions.devicePixelRatio;
-
-    const results = Array
-      .from(artifacts.ImageElements)
-      .filter(isCandidate)
-      .filter(imageHasNaturalDimensions)
-      .filter(image => !imageHasRightSize(image, DPR))
-      .filter(image => isVisible(image.clientRect, artifacts.ViewportDimensions))
-      .filter(image => isSmallerThanViewport(image.clientRect, artifacts.ViewportDimensions))
-      .map(image => getResult(image, DPR));
-
-    /** @type {LH.Audit.Details.Table['headings']} */
-    const headings = [
-      {key: 'node', itemType: 'node', text: ''},
-      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
-      {key: 'displayedSize', itemType: 'text', text: str_(UIStrings.columnDisplayed)},
-      {key: 'actualSize', itemType: 'text', text: str_(UIStrings.columnActual)},
-      {key: 'expectedSize', itemType: 'text', text: str_(UIStrings.columnExpected)},
-    ];
-
-    const finalResults = sortResultsBySizeDelta(deduplicateResultsByUrl(results));
-
-    return {
-      score: Number(results.length === 0),
-      details: Audit.makeTableDetails(headings, finalResults),
-    };
-  }
-}
-
-/**
- * Return a quantized version of the DPR.
- *
- * This is to relax the required size of the image.
- * There's strong evidence that 3 DPR images are not perceived to be significantly better to mobile users than
- * 2 DPR images. The additional high byte cost (3x images are ~225% the file size of 2x images) makes this practice
- * difficult to recommend.
- *
- * Human minimum visual acuity angle = 0.016 degrees (see Sun Microsystems paper)
- * Typical phone operating distance from eye = 12 in
- *
- *        A
- *        _
- *       \ | B
- *        \|
- *         θ
- * A = minimum observable pixel size = ?
- * B = viewing distance = 12 in
- * θ = human minimum visual acuity angle = 0.016 degrees
- *
- * tan θ = A / B ---- Solve for A
- * A = tan (0.016 degrees) * B = 0.00335 in
- *
- * Moto G4 display width = 2.7 in
- * Moto G4 horizontal 2x resolution = 720 pixels
- * Moto G4 horizontal 3x resolution = 1080 pixels
- *
- * Moto G4 1x pixel size = 2.7 / 360 = 0.0075 in
- * Moto G4 2x pixel size = 2.7 / 720 = 0.00375 in
- * Moto G4 3x pixel size = 2.7 / 1080 = 0.0025 in
- *
- * Wasted additional pixels in 3x image = (.00335 - .0025) / (.00375 - .0025) = 68% waste
- *
- *
- * @see https://www.swift.ac.uk/about/files/vision.pdf
- * @param {number} dpr
- * @return {number}
- */
-function quantizeDpr(dpr) {
-  if (dpr >= 2) {
-    return 2;
-  }
-  if (dpr >= 1.5) {
-    return 1.5;
-  }
-  return 1.0;
-}
-
-module.exports = ImageSizeResponsive;
-module.exports.UIStrings = UIStrings;