GoogleChrome · paulirish · Aug 25, 2020 · Aug 3, 2020 · Aug 3, 2020 · Aug 6, 2020
diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap
@@ -99,6 +99,9 @@ Object {
     Object {
       "path": "image-size-responsive",
     },
+    Object {
+      "path": "jankless-font",
+    },
     Object {
       "path": "deprecations",
     },
@@ -749,6 +752,11 @@ Object {
           "id": "image-size-responsive",
           "weight": 1,
         },
+        Object {
+          "group": "best-practices-ux",
+          "id": "jankless-font",
+          "weight": 1,
+        },
         Object {
           "group": "best-practices-browser-compat",
           "id": "doctype",

diff --git a/lighthouse-cli/test/fixtures/perf/cors-fonts.css b/lighthouse-cli/test/fixtures/perf/cors-fonts.css
@@ -2,6 +2,7 @@
   font-family: 'Lobster Three';
   font-style: normal;
   font-weight: 700;
+  font-display: optional;
   src: url("http://localhost:10503/perf/lobster-two-v10-latin-700.woff2?cors=true") format('woff2');
 }
 .corsfont {

diff --git a/lighthouse-cli/test/fixtures/perf/fonts.html b/lighthouse-cli/test/fixtures/perf/fonts.html
@@ -17,6 +17,14 @@
         /* We don't need `local` but keep around for testing robustness of our regex */
         src: local("Lobster Two"), url("./lobster-two-v10-latin-700.woff2?delay=4000") format('woff2');
       }
+      @font-face {
+        font-family: 'Lobster Four';
+        font-style: normal;
+        font-weight: 700;
+        font-display: optional;
+        /* We don't need `local` but keep around for testing robustness of our regex */
+        src: local("Lobster Four"), url("./lobster-two-v10-latin-700.woff2?delay=1000") format('woff2');
+      }
       .webfont {
         font-family: Lobster, sans-serif;
       }
@@ -26,13 +34,24 @@
       .nofont {
         font-family: Unknown, sans-serif;
       }
+      .optionalfont {
+        font-family: Lobster Four, sans-serif;
+      }
     </style>
     <link rel="stylesheet" href="http://localhost:10503/perf/cors-fonts.css">
+    <!-- PASS(jankless-font): not applicable unless font-display: optional -->
+    <link rel="preload" href="http://localhost:10200/perf/fonts/lobster-v20-latin-regular.woff2" as="font">
+    <!-- PASS(jankless-font): font-display: optional & preloaded -->
+    <link rel="preload" href="http://localhost:10200/perf/lobster-two-v10-latin-700.woff2?delay=4000" as="font" crossorigin="anonymous">
+    <!-- PASS(jankless-font): font-display: optional & attempted preload, we ignore the re-requests from missing crossorigin attribute -->
+    <link rel="preload" href="http://localhost:10503/perf/lobster-two-v10-latin-700.woff2?cors=true" as="font">
   </head>
   <body>
     <p class="webfont">Let's load some sweet webfonts...</p>
     <p><strong class="webfont">Let's load some sweet webfonts...</strong></p>
     <p class="nofont">Some lovely text that uses the fallback font</p>
     <p class="corsfont">Some lovely text that uses a CORS font</p>
+    <!-- FAIL(jankless-font): font-display: optional but no preload -->
+    <p class="optionalfont">Some lovely text that uses an optional font</p>
   </body>
 </html>
diff --git a/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js b/lighthouse-cli/test/smokehouse/test-definitions/perf/expectations.js
@@ -147,9 +147,21 @@ module.exports = [
         'font-display': {
           score: 0,
           details: {
-            items: {
-              length: 2,
-            },
+            items: [
+              {
+                url: 'http://localhost:10200/perf/lobster-v20-latin-regular.woff2',
+              },
+            ],
+          },
+        },
+        'jankless-font': {
+          score: 0,
+          details: {
+            items: [
+              {
+                url: 'http://localhost:10200/perf/lobster-two-v10-latin-700.woff2?delay=1000',
+              },
+            ],
           },
         },
       },

diff --git a/lighthouse-cli/test/smokehouse/test-definitions/perf/perf-config.js b/lighthouse-cli/test/smokehouse/test-definitions/perf/perf-config.js
@@ -10,7 +10,9 @@ const perfConfig = {
   extends: 'lighthouse:default',
   settings: {
     throttlingMethod: 'devtools',
-    onlyCategories: ['performance'],
+    // jankless-font isn't a performance audit, but can easily leverage the font
+    // webpages present here, hence the inclusion of 'best-practices'.
+    onlyCategories: ['performance', 'best-practices'],
 
     // A mixture of under, over, and meeting budget to exercise all paths.
     budgets: [{

diff --git a/lighthouse-core/audits/font-display.js b/lighthouse-core/audits/font-display.js
@@ -54,9 +54,10 @@ class FontDisplay extends Audit {
 
   /**
    * @param {LH.Artifacts} artifacts
+   * @param {RegExp} passingFontDisplayRegex
    * @return {{passingURLs: Set<string>, failingURLs: Set<string>}}
    */
-  static findFontDisplayDeclarations(artifacts) {
+  static findFontDisplayDeclarations(artifacts, passingFontDisplayRegex) {
     /** @type {Set<string>} */
     const passingURLs = new Set();
     /** @type {Set<string>} */
@@ -78,7 +79,7 @@ class FontDisplay extends Audit {
         // followed either by a semicolon or the end of a block.
         const fontDisplayMatch = declaration.match(/font-display\s*:\s*(\w+)\s*(;|\})/);
         const rawFontDisplay = (fontDisplayMatch && fontDisplayMatch[1]) || '';
-        const hasPassingFontDisplay = PASSING_FONT_DISPLAY_REGEX.test(rawFontDisplay);
+        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.
@@ -141,7 +142,8 @@ class FontDisplay extends Audit {
   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);
+    const {passingURLs, failingURLs} =
+      FontDisplay.findFontDisplayDeclarations(artifacts, PASSING_FONT_DISPLAY_REGEX);
     /** @type {Array<string>} */
     const warningURLs = [];
 

diff --git a/lighthouse-core/audits/jankless-font.js b/lighthouse-core/audits/jankless-font.js
@@ -0,0 +1,98 @@
+/**
+ * @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.
+ */
+'use strict';
+
+/**
+ * @fileoverview
+ * Audit that checks whether fonts that use `font-display: optional` were preloaded.
+ */
+
+const Audit = require('./audit.js');
+const i18n = require('./../lib/i18n/i18n.js');
+const FontDisplay = require('./../audits/font-display.js');
+const PASSING_FONT_DISPLAY_REGEX = /^(optional)$/;
+const NetworkRecords = require('../computed/network-records.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on whether fonts that used `font-display: optional` were preloaded. This descriptive title is shown to users when all fonts that used `font-display: optional` were preloaded. */
+  title: 'Fonts with `font-display: optional` are preloaded',
+  /** Title of a Lighthouse audit that provides detail on whether fonts that used `font-display: optional` were preloaded. This descriptive title is shown to users when one or more fonts used `font-display: optional` and were not preloaded. */
+  failureTitle: 'Fonts with `font-display: optional` are not preloaded',
+  /** Description of a Lighthouse audit that tells the user why they should preload fonts if they are using `font-display: optional`. 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: 'Preloading optional fonts can reduce layout shifts and improve CLS. [Learn More](https://web.dev/optimize-cls/#web-fonts-causing-foutfoit)',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+class JanklessFontAudit extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'jankless-font',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['devtoolsLogs', 'URL', 'CSSUsage'],
+    };
+  }
+
+  /**
+   * Finds which font URLs were attempted to be preloaded,
+   * ignoring those that failed to be reused and were requested again.
+   * Note: document.fonts.load() is a valid way to preload fonts,
+   * but we are not currently checking for that.
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @return {Set<string>}
+   */
+  static getURLsAttemptedToPreload(networkRecords) {
+    const attemptedURLs = networkRecords
+      .filter(req => req.resourceType === 'Font')
+      .filter(req => req.isLinkPreload)
+      .map(req => req.url);
+
+    return new Set(attemptedURLs);
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const devtoolsLog = artifacts.devtoolsLogs[this.DEFAULT_PASS];
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+
+    // Gets the URLs of fonts where font-display: optional.
+    const optionalFontURLs =
+      FontDisplay.findFontDisplayDeclarations(artifacts, PASSING_FONT_DISPLAY_REGEX).passingURLs;
+
+    // Gets the URLs of fonts attempted to be preloaded.
+    const preloadedFontURLs =
+      JanklessFontAudit.getURLsAttemptedToPreload(networkRecords);
+
+    const results = Array.from(optionalFontURLs)
+      .filter(url => !preloadedFontURLs.has(url))
+      .map(url => {
+        return {url};
+      });
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'url', itemType: 'url', text: str_(i18n.UIStrings.columnURL)},
+    ];
+
+    return {
+      score: results.length > 0 ? 0 : 1,
+      details: Audit.makeTableDetails(headings, results),
+      notApplicable: optionalFontURLs.size === 0,
+    };
+  }
+}
+
+module.exports = JanklessFontAudit;
+module.exports.UIStrings = UIStrings;
diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js
@@ -218,6 +218,7 @@ const defaultConfig = {
     'content-width',
     'image-aspect-ratio',
     'image-size-responsive',
+    'jankless-font',
     'deprecations',
     'mainthread-work-breakdown',
     'bootup-time',
@@ -561,6 +562,7 @@ const defaultConfig = {
         {id: 'password-inputs-can-be-pasted-into', weight: 1, group: 'best-practices-ux'},
         {id: 'image-aspect-ratio', weight: 1, group: 'best-practices-ux'},
         {id: 'image-size-responsive', weight: 1, group: 'best-practices-ux'},
+        {id: 'jankless-font', weight: 1, group: 'best-practices-ux'},
         // Browser Compatibility
         {id: 'doctype', weight: 1, group: 'best-practices-browser-compat'},
         {id: 'charset', weight: 1, group: 'best-practices-browser-compat'},

diff --git a/lighthouse-core/lib/i18n/locales/en-US.json b/lighthouse-core/lib/i18n/locales/en-US.json
@@ -824,6 +824,15 @@
   "lighthouse-core/audits/is-on-https.js | warning": {
     "message": "Allowed with warning"
   },
+  "lighthouse-core/audits/jankless-font.js | description": {
+    "message": "Preloading optional fonts can reduce layout shifts and improve CLS. [Learn More](https://web.dev/optimize-cls/#web-fonts-causing-foutfoit)"
+  },
+  "lighthouse-core/audits/jankless-font.js | failureTitle": {
+    "message": "Fonts with `font-display: optional` are not preloaded"
+  },
+  "lighthouse-core/audits/jankless-font.js | title": {
+    "message": "Fonts with `font-display: optional` are preloaded"
+  },
   "lighthouse-core/audits/large-javascript-libraries.js | columnLibraryName": {
     "message": "Library"
   },

diff --git a/lighthouse-core/lib/i18n/locales/en-XL.json b/lighthouse-core/lib/i18n/locales/en-XL.json
@@ -824,6 +824,15 @@
   "lighthouse-core/audits/is-on-https.js | warning": {
     "message": "Âĺl̂óŵéd̂ ẃît́ĥ ẃâŕn̂ín̂ǵ"
   },
+  "lighthouse-core/audits/jankless-font.js | description": {
+    "message": "P̂ŕêĺôád̂ín̂ǵ ôṕt̂íôńâĺ f̂ón̂t́ŝ ćâń r̂éd̂úĉé l̂áŷóût́ ŝh́îf́t̂ś âńd̂ ím̂ṕr̂óv̂é ĈĹŜ. [Ĺêár̂ń M̂ór̂é](https://web.dev/optimize-cls/#web-fonts-causing-foutfoit)"
+  },
+  "lighthouse-core/audits/jankless-font.js | failureTitle": {
+    "message": "F̂ón̂t́ŝ ẃît́ĥ `font-display: optional` ár̂é n̂ót̂ ṕr̂él̂óâd́êd́"
+  },
+  "lighthouse-core/audits/jankless-font.js | title": {
+    "message": "F̂ón̂t́ŝ ẃît́ĥ `font-display: optional` ár̂é p̂ŕêĺôád̂éd̂"
+  },
   "lighthouse-core/audits/large-javascript-libraries.js | columnLibraryName": {
     "message": "L̂íb̂ŕâŕŷ"
   },