lighthouse 9.6.8 → 10.0.0

package/core/audits/installable-manifest.js

@@ -0,0 +1,265 @@
+/**
+ * @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.
+ */
+
+import {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {ManifestValues} from '../computed/manifest-values.js';
+
+/* eslint-disable max-len */
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on if a website is installable as an application. This descriptive title is shown to users when a webapp is installable. */
+  'title': 'Web app manifest and service worker meet the installability requirements',
+  /** Title of a Lighthouse audit that provides detail on if a website is installable as an application. This descriptive title is shown to users when a webapp is not installable. */
+  'failureTitle': 'Web app manifest or service worker do not meet the installability requirements',
+  /** Description of a Lighthouse audit that tells the user why installability is important for webapps. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  'description': `Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. [Learn more about manifest installability requirements](https://developer.chrome.com/docs/lighthouse/pwa/installable-manifest/).`,
+  /** Label for a column in a data table; entries in the column will be a string explaining why a failure occurred. */
+  'columnValue': 'Failure reason',
+  /**
+   * @description [ICU Syntax] Label for an audit identifying the number of installability errors found in the page.
+   */
+  'displayValue': `{itemCount, plural,
+    =1 {1 reason}
+    other {# reasons}
+    }`,
+  /**
+   * @description Error message describing a DevTools error id that was found and has not been identified by this audit.
+   * @example {platform-not-supported-on-android} errorId
+   */
+  'noErrorId': `Installability error id '{errorId}' is not recognized`,
+  /** Error message explaining that the page is not loaded in the frame.  */
+  'not-in-main-frame': `Page is not loaded in the main frame`,
+  /** Error message explaining that the page is served from a secure origin. */
+  'not-from-secure-origin': 'Page is not served from a secure origin',
+  /** Error message explaining that the page has no manifest URL. */
+  'no-manifest': 'Page has no manifest <link> URL',
+  /** Error message explaining that the provided manifest URL is invalid. */
+  'start-url-not-valid': `Manifest start URL is not valid`,
+  /** Error message explaining that the provided manifest does not contain a name or short_name field. */
+  'manifest-missing-name-or-short-name': `Manifest does not contain a 'name' or 'short_name' field`,
+  /** Error message explaining that the manifest display property must be one of 'standalone', 'fullscreen', or 'minimal-ui'. */
+  'manifest-display-not-supported': `Manifest 'display' property must be one of 'standalone', 'fullscreen', or 'minimal-ui'`,
+  /** Error message explaining that the manifest could not be fetched, might be empty, or could not be parsed. */
+  'manifest-empty': `Manifest could not be fetched, is empty, or could not be parsed`,
+  /** Error message explaining that no matching service worker was detected,
+   * and provides a suggestion to reload the page or check whether the scope of the service worker
+   * for the current page encloses the scope and start URL from the manifest. */
+  'no-matching-service-worker': `No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.`,
+  /**
+   * @description Error message explaining that the manifest does not contain a suitable icon.
+   * @example {192} value0
+   */
+  'manifest-missing-suitable-icon': `Manifest does not contain a suitable icon - PNG, SVG or WebP format of at least {value0}\xa0px is required, the sizes attribute must be set, and the purpose attribute, if set, must include "any".`,
+
+  /**
+   * @description Error message explaining that the manifest does not supply an icon of the correct format.
+   * @example {192} value0
+   */
+  'no-acceptable-icon': `No supplied icon is at least {value0}\xa0px square in PNG, SVG or WebP format, with the purpose attribute unset or set to "any"`,
+
+  /** Error message explaining that the icon could not be downloaded. */
+  'cannot-download-icon': `Could not download a required icon from the manifest`,
+  /** Error message explaining that the downloaded icon was empty or corrupt. */
+  'no-icon-available': `Downloaded icon was empty or corrupted`,
+  /** Error message explaining that the specified application platform is not supported on Android. */
+  'platform-not-supported-on-android': `The specified application platform is not supported on Android`,
+  /** Error message explaining that a Play store ID was not provided. */
+  'no-id-specified': `No Play store ID provided`,
+  /** Error message explaining that the Play Store app URL and Play Store ID do not match. */
+  'ids-do-not-match': `The Play Store app URL and Play Store ID do not match`,
+  /** Error message explaining that the app is already installed. */
+  'already-installed': `The app is already installed`,
+  /** Error message explaining that a URL in the manifest contains a username, password, or port. */
+  'url-not-supported-for-webapk': `A URL in the manifest contains a username, password, or port`,
+  /** Error message explaining that the page is loaded in an incognito window. */
+  'in-incognito': `Page is loaded in an incognito window`,
+  // TODO: perhaps edit this message to make it more actionable for LH users
+  /** Error message explaining that the page does not work offline. */
+  'not-offline-capable': `Page does not work offline`,
+  /** Error message explaining that service worker could not be checked without a start_url. */
+  'no-url-for-service-worker': `Could not check service worker without a 'start_url' field in the manifest`,
+  /** Error message explaining that the manifest specifies prefer_related_applications: true. */
+  'prefer-related-applications': `Manifest specifies prefer_related_applications: true`,
+  /** Error message explaining that prefer_related_applications is only supported on Chrome Beta and Stable channels on Android. */
+  'prefer-related-applications-only-beta-stable': `prefer_related_applications is only supported on Chrome Beta and Stable channels on Android.`,
+  /** Error message explaining that the manifest contains 'display_override' field, and the
+      first supported display mode must be one of 'standalone', 'fullscreen', or 'minimal-ui'. */
+  'manifest-display-override-not-supported': `Manifest contains 'display_override' field, and the first supported display mode must be one of 'standalone', 'fullscreen', or 'minimal-ui'`,
+  /** Error message explaining that the web manifest's URL changed while the manifest was being downloaded by the browser. */
+  'manifest-location-changed': `Manifest URL changed while the manifest was being fetched.`,
+  /** Warning message explaining that the page does not work offline. */
+  'warn-not-offline-capable': `Page does not work offline. The page will not be regarded as installable after Chrome 93, stable release August 2021.`,
+  /** Error message explaining that Lighthouse failed while detecting a service worker, and directing the user to try again in a new Chrome. */
+  'protocol-timeout': `Lighthouse could not determine if there was a service worker. Please try with a newer version of Chrome.`,
+  /** Message logged when the web app has been uninstalled o desktop, signalling that the install banner state is being reset. */
+  'pipeline-restarted': 'PWA has been uninstalled and installability checks resetting.',
+  /**
+   * @description Error message explaining that the URL of the manifest uses a scheme that is not supported on Android.
+   * @example {data:} scheme
+   */
+  'scheme-not-supported-for-webapk': 'The manifest URL scheme ({scheme}) is not supported on Android.',
+};
+/* eslint-enable max-len */
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+/**
+ * @fileoverview
+ * Audits if the page's web app manifest and service worker qualify for triggering a beforeinstallprompt event.
+ * https://github.com/GoogleChrome/lighthouse/issues/23#issuecomment-270453303
+ *
+ * Requirements based on Chrome Devtools' installability requirements.
+ * Origin of logging:
+ * https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/installable/installable_logging.cc
+ * DevTools InstallabilityError implementation:
+ * https://source.chromium.org/search?q=getInstallabilityErrorMessages&ss=chromium%2Fchromium%2Fsrc:third_party%2Fdevtools-frontend%2Fsrc%2Ffront_end%2Fresources%2F
+ */
+
+class InstallableManifest extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'installable-manifest',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      supportedModes: ['navigation'],
+      requiredArtifacts: ['WebAppManifest', 'InstallabilityErrors'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {{i18nErrors: Array<LH.IcuMessage | string>; warnings: Array<LH.IcuMessage>}}
+   */
+  static getInstallabilityErrors(artifacts) {
+    const installabilityErrors = artifacts.InstallabilityErrors.errors;
+    const i18nErrors = [];
+    const warnings = [];
+    const errorArgumentsRegex = /{([^}]+)}/g;
+
+    for (const err of installabilityErrors) {
+      // Filter out errorId 'in-incognito' since Lighthouse recommends incognito.
+      if (err.errorId === 'in-incognito') continue;
+
+      if (err.errorId === 'warn-not-offline-capable') {
+        warnings.push(str_(UIStrings[err.errorId]));
+        continue;
+      }
+
+      // Filter out errorId 'pipeline-restarted' since it only applies when the PWA is uninstalled.
+      if (err.errorId === 'pipeline-restarted') {
+        continue;
+      }
+
+      // @ts-expect-error errorIds from protocol should match up against the strings dict
+      const matchingString = UIStrings[err.errorId];
+
+      if (err.errorId === 'scheme-not-supported-for-webapk') {
+        // If there was no manifest, then there will be at lest one other installability error.
+        // We can ignore this error if that's the case.
+        const manifestUrl = artifacts.WebAppManifest?.url;
+        if (!manifestUrl) continue;
+
+        const scheme = new URL(manifestUrl).protocol;
+        i18nErrors.push(str_(matchingString, {scheme}));
+        continue;
+      }
+
+      // Handle an errorId we don't recognize.
+      if (matchingString === undefined) {
+        i18nErrors.push(str_(UIStrings.noErrorId, {errorId: err.errorId}));
+        continue;
+      }
+
+      // Get the i18m argument names of the installability error message, if any.
+      const UIStringArguments = matchingString.match(errorArgumentsRegex) || [];
+
+      /**
+       * If there is an argument value, get it.
+       * We only expect a `minimum-icon-size-in-pixels` errorArg[0] for two errorIds, currently.
+       */
+      const value0 = err.errorArguments?.length && err.errorArguments[0].value;
+
+      if (matchingString && err.errorArguments.length !== UIStringArguments.length) {
+        // Matching string, but have the incorrect number of arguments for the message.
+        const stringArgs = JSON.stringify(err.errorArguments);
+        const msg = err.errorArguments.length > UIStringArguments.length ?
+          `${err.errorId} has unexpected arguments ${stringArgs}` :
+          `${err.errorId} does not have the expected number of arguments.`;
+        i18nErrors.push(msg);
+      } else if (matchingString && value0) {
+        i18nErrors.push(str_(matchingString, {value0}));
+      } else if (matchingString) {
+        i18nErrors.push(str_(matchingString));
+      }
+    }
+
+    return {i18nErrors, warnings};
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   *
+   */
+  static async audit(artifacts, context) {
+    const {i18nErrors, warnings} = InstallableManifest.getInstallabilityErrors(artifacts);
+
+    const manifestUrl = artifacts.WebAppManifest ? artifacts.WebAppManifest.url : null;
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'reason', valueType: 'text', label: str_(UIStrings.columnValue)},
+    ];
+
+    // Errors for report table.
+    /** @type {LH.Audit.Details.Table['items']} */
+    const errorReasons = i18nErrors.map(reason => {
+      return {reason};
+    });
+
+    // If InstallabilityErrors is empty, double check ManifestValues to make sure nothing was missed.
+    // InstallabilityErrors can be empty erroneously in our DevTools web tests.
+    if (!errorReasons.length) {
+      const manifestValues = await ManifestValues.request(artifacts, context);
+      if (manifestValues.isParseFailure) {
+        errorReasons.push({
+          reason: manifestValues.parseFailureReason,
+        });
+      }
+    }
+
+    // Include the detailed pass/fail checklist as a diagnostic.
+    /** @type {LH.Audit.Details.DebugData} */
+    const debugData = {
+      type: 'debugdata',
+      manifestUrl,
+    };
+
+    if (errorReasons.length > 0) {
+      return {
+        score: 0,
+        warnings,
+        numericValue: errorReasons.length,
+        numericUnit: 'element',
+        displayValue: str_(UIStrings.displayValue, {itemCount: errorReasons.length}),
+        details: {...Audit.makeTableDetails(headings, errorReasons), debugData},
+      };
+    }
+    return {
+      score: 1,
+      warnings,
+      details: {...Audit.makeTableDetails(headings, errorReasons), debugData},
+    };
+  }
+}
+
+export default InstallableManifest;
+export {UIStrings};

package/core/audits/is-on-https.d.ts

@@ -0,0 +1,23 @@
+export default HTTPS;
+declare class HTTPS extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+    const displayValue: string;
+    const columnInsecureURL: string;
+    const columnResolution: string;
+    const allowed: string;
+    const blocked: string;
+    const warning: string;
+    const upgraded: string;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=is-on-https.d.ts.map

package/core/audits/is-on-https.js

@@ -0,0 +1,123 @@
+/**
+ * @license Copyright 2016 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.
+ */
+
+import {Audit} from './audit.js';
+import UrlUtils from '../lib/url-utils.js';
+import {NetworkRequest} from '../lib/network-request.js';
+import {NetworkRecords} from '../computed/network-records.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the useage of HTTPS on a page. This descriptive title is shown to users when all requests on a page are fufilled using HTTPS. */
+  title: 'Uses HTTPS',
+  /** Title of a Lighthouse audit that provides detail on the useage of HTTPS on a page. This descriptive title is shown to users when some, or all, requests on the page use HTTP instead of HTTPS. */
+  failureTitle: 'Does not use HTTPS',
+  /** Description of a Lighthouse audit that tells the user *why* HTTPS use *for all resources* is important. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'All sites should be protected with HTTPS, even ones that don\'t handle ' +
+      'sensitive data. This includes avoiding [mixed content](https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content), ' +
+      'where some resources are loaded over HTTP despite the initial request being served ' +
+      'over HTTPS. HTTPS prevents intruders from tampering with or passively listening ' +
+      'in on the communications between your app and your users, and is a prerequisite for ' +
+      'HTTP/2 and many new web platform APIs. ' +
+      '[Learn more about HTTPS](https://developer.chrome.com/docs/lighthouse/pwa/is-on-https/).',
+  /** [ICU Syntax] Label identifying the number of insecure network requests found by an audit of a web page. */
+  displayValue: `{itemCount, plural,
+    =1 {1 insecure request found}
+    other {# insecure requests found}
+    }`,
+  /** Label for a column in a data table; entries in the column will be the URLs of insecure (non-HTTPS) network requests. */
+  columnInsecureURL: 'Insecure URL',
+  /** Label for a column in a data table; entries in the column will be how the browser handled insecure (non-HTTPS) network requests. */
+  columnResolution: 'Request Resolution',
+  /** Value for the resolution column in a data table; denotes that the insecure URL was allowed by the browser. */
+  allowed: 'Allowed',
+  /** Value for the resolution column in a data table; denotes that the insecure URL was blocked by the browser. */
+  blocked: 'Blocked',
+  /** Value for the resolution column in a data table; denotes that the insecure URL may be blocked by the browser in the future. */
+  warning: 'Allowed with warning',
+  /** Value for the resolution column in a data table; denotes that the insecure URL was upgraded to a secure request by the browser. */
+  upgraded: 'Automatically upgraded to HTTPS',
+};
+
+const resolutionToString = {
+  MixedContentAutomaticallyUpgraded: UIStrings.upgraded,
+  MixedContentBlocked: UIStrings.blocked,
+  MixedContentWarning: UIStrings.warning,
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+
+class HTTPS extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'is-on-https',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['devtoolsLogs', 'InspectorIssues'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const devtoolsLogs = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const networkRecords = await NetworkRecords.request(devtoolsLogs, context);
+    const insecureURLs = networkRecords
+      .filter(record => !NetworkRequest.isSecureRequest(record))
+      .map(record => UrlUtils.elideDataURI(record.url));
+
+    /** @type {Array<{url: string, resolution?: LH.IcuMessage|string}>}  */
+    const items = Array.from(new Set(insecureURLs)).map(url => ({url, resolution: undefined}));
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'url', valueType: 'url', label: str_(UIStrings.columnInsecureURL)},
+      {key: 'resolution', valueType: 'text', label: str_(UIStrings.columnResolution)},
+    ];
+
+    for (const details of artifacts.InspectorIssues.mixedContentIssue) {
+      let item = items.find(item => item.url === details.insecureURL);
+      if (!item) {
+        item = {url: details.insecureURL};
+        items.push(item);
+      }
+      item.resolution = resolutionToString[details.resolutionStatus] ?
+        str_(resolutionToString[details.resolutionStatus]) :
+        details.resolutionStatus;
+    }
+
+    // If a resolution wasn't assigned from an InspectorIssue, then the item
+    // is not blocked by the browser but we've determined it is insecure anyhow.
+    // For example, if the URL is localhost, all `http` requests are valid
+    // (localhost is a secure context), but we still identify `http` requests
+    // as an "Allowed" insecure URL.
+    for (const item of items) {
+      if (!item.resolution) item.resolution = str_(UIStrings.allowed);
+    }
+
+    let displayValue;
+    if (items.length > 0) {
+      displayValue = str_(UIStrings.displayValue, {itemCount: items.length});
+    }
+
+    return {
+      score: Number(items.length === 0),
+      displayValue,
+      details: Audit.makeTableDetails(headings, items),
+    };
+  }
+}
+
+export default HTTPS;
+export {UIStrings};

package/core/audits/largest-contentful-paint-element.d.ts

@@ -0,0 +1,14 @@
+export default LargestContentfulPaintElement;
+declare class LargestContentfulPaintElement extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @return {LH.Audit.Product}
+     */
+    static audit(artifacts: LH.Artifacts): LH.Audit.Product;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=largest-contentful-paint-element.d.ts.map

package/core/audits/largest-contentful-paint-element.js

@@ -0,0 +1,69 @@
+/**
+ * @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.
+ */
+
+import {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Descriptive title of a diagnostic audit that provides the element that was determined to be the Largest Contentful Paint. */
+  title: 'Largest Contentful Paint element',
+  /** Description of a Lighthouse audit that tells the user that the element shown was determined to be the Largest Contentful Paint. */
+  description: 'This is the largest contentful element painted within the viewport. ' +
+    '[Learn more about the Largest Contentful Paint element](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class LargestContentfulPaintElement extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'largest-contentful-paint-element',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      supportedModes: ['navigation'],
+      requiredArtifacts: ['traces', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {LH.Audit.Product}
+   */
+  static audit(artifacts) {
+    const lcpElement = artifacts.TraceElements
+      .find(element => element.traceEventType === 'largest-contentful-paint');
+    const lcpElementDetails = [];
+    if (lcpElement) {
+      lcpElementDetails.push({
+        node: Audit.makeNodeItem(lcpElement.node),
+      });
+    }
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'node', valueType: 'node', label: str_(i18n.UIStrings.columnElement)},
+    ];
+
+    const details = Audit.makeTableDetails(headings, lcpElementDetails);
+
+    const displayValue = str_(i18n.UIStrings.displayValueElementsFound,
+      {nodeCount: lcpElementDetails.length});
+
+    return {
+      score: 1,
+      notApplicable: lcpElementDetails.length === 0,
+      displayValue,
+      details,
+    };
+  }
+}
+
+export default LargestContentfulPaintElement;
+export {UIStrings};

package/core/audits/layout-shift-elements.d.ts

@@ -0,0 +1,15 @@
+export default LayoutShiftElements;
+declare class LayoutShiftElements extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @return {LH.Audit.Product}
+     */
+    static audit(artifacts: LH.Artifacts): LH.Audit.Product;
+}
+export namespace UIStrings {
+    const title: string;
+    const description: string;
+    const columnContribution: string;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=layout-shift-elements.d.ts.map

package/core/audits/layout-shift-elements.js

@@ -0,0 +1,74 @@
+/**
+ * @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.
+ */
+
+import {Audit} from './audit.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Descriptive title of a diagnostic audit that provides up to the top five elements contributing to Cumulative Layout Shift. */
+  title: 'Avoid large layout shifts',
+  /** Description of a diagnostic audit that provides up to the top five elements contributing to Cumulative Layout Shift. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'These DOM elements contribute most to the CLS of the page. [Learn how to improve CLS](https://web.dev/optimize-cls/)',
+  /**  Label for a column in a data table; entries in this column will be the amount that the corresponding element contributes to the total CLS metric score. */
+  columnContribution: 'CLS Contribution',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class LayoutShiftElements extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'layout-shift-elements',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      requiredArtifacts: ['traces', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @return {LH.Audit.Product}
+   */
+  static audit(artifacts) {
+    const clsElements = artifacts.TraceElements
+      .filter(element => element.traceEventType === 'layout-shift');
+
+    const clsElementData = clsElements.map(element => {
+      return {
+        node: Audit.makeNodeItem(element.node),
+        score: element.score,
+      };
+    });
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'node', valueType: 'node', label: str_(i18n.UIStrings.columnElement)},
+      {key: 'score', valueType: 'numeric',
+        granularity: 0.001, label: str_(UIStrings.columnContribution)},
+    ];
+
+    const details = Audit.makeTableDetails(headings, clsElementData);
+    let displayValue;
+    if (clsElementData.length > 0) {
+      displayValue = str_(i18n.UIStrings.displayValueElementsFound,
+        {nodeCount: clsElementData.length});
+    }
+
+    return {
+      score: 1,
+      notApplicable: details.items.length === 0,
+      displayValue,
+      details,
+    };
+  }
+}
+
+export default LayoutShiftElements;
+export {UIStrings};

package/core/audits/lcp-lazy-loaded.d.ts

@@ -0,0 +1,21 @@
+export default LargestContentfulPaintLazyLoaded;
+declare class LargestContentfulPaintLazyLoaded extends Audit {
+    /**
+     * @param {LH.Artifacts.ImageElement} image
+     * @param {LH.Artifacts.ViewportDimensions} viewportDimensions
+     * @return {boolean}
+     */
+    static isImageInViewport(image: LH.Artifacts.ImageElement, viewportDimensions: LH.Artifacts.ViewportDimensions): boolean;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @return {LH.Audit.Product}
+     */
+    static audit(artifacts: LH.Artifacts): LH.Audit.Product;
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=lcp-lazy-loaded.d.ts.map