ampproject · sebastianbenz · Mar 19, 2021 · Mar 19, 2021
diff --git a/packages/page-experience/lib/PageExperienceGuide.js b/packages/page-experience/lib/PageExperienceGuide.js
@@ -28,7 +28,9 @@ const CHECK_DIR = path.join(__dirname, 'checks');
  */
 class Recommendations {
   constructor() {
-    this.results = {};
+    this.results = {
+      details: {},
+    };
     this.currentCheck = '';
   }
 
@@ -48,6 +50,10 @@ class Recommendations {
     this.addResult('FAIL', result);
   }
 
+  addDetails(details) {
+    this.results.details[this.currentCheck] = details;
+  }
+
   addResult(status, result) {
     result.status = status;
     this.results[this.currentCheck] = result;

diff --git a/packages/page-experience/lib/checks/fontDisplay.js b/packages/page-experience/lib/checks/fontDisplay.js
@@ -48,12 +48,12 @@ const checkDisplayOptional = (pageData, result) => {
     title: 'Improve LCP and CLS using `font-display: optional`',
     url: 'https://web.dev/optimize-webfont-loading/',
     message: `Load the critical webfonts using \`font-display: optional\` to improve LCP on slow connections and avoid content shifts.`,
-    details: {
-      headings: [
-        {label: 'Font', valueType: 'text', key: 'font'},
-        {key: 'fix', valueType: 'text', label: 'Suggestion'},
-      ],
-    },
+  });
+  result.addDetails({
+    headings: [
+      {label: 'Font', valueType: 'text', key: 'font'},
+      {key: 'fix', valueType: 'text', label: 'Suggestion'},
+    ],
     items,
   });
 };

diff --git a/packages/page-experience/lib/checks/fontPreloading.js b/packages/page-experience/lib/checks/fontPreloading.js
@@ -60,12 +60,12 @@ const checkPreloads = (pageData, result) => {
     url: 'https://web.dev/optimize-webfont-loading/',
     message:
       'Preload critical fonts to help the browser discover fonts used in the first viewport quicker.',
-    details: {
-      headings: [
-        {label: 'Font', valueType: 'text', key: 'font'},
-        {key: 'fix', valueType: 'text', label: 'Suggestion'},
-      ],
-    },
+  });
+  result.addDetails({
+    headings: [
+      {label: 'Font', valueType: 'text', key: 'font'},
+      {key: 'fix', valueType: 'text', label: 'Suggestion'},
+    ],
     items,
   });
 };

diff --git a/packages/page-experience/test-data/checks/fontDisplay/font-display-optional.json b/packages/page-experience/test-data/checks/fontDisplay/font-display-optional.json
@@ -1 +1,3 @@
-{}
+{
+  "details": {}
+}
diff --git a/packages/page-experience/test-data/checks/fontDisplay/font-display-swap-google-fonts.json b/packages/page-experience/test-data/checks/fontDisplay/font-display-swap-google-fonts.json
@@ -1,9 +1,6 @@
 {
-  "fontDisplay": {
-    "title": "Improve LCP and CLS using `font-display: optional`",
-    "url": "https://web.dev/optimize-webfont-loading/",
-    "message": "Load the critical webfonts using `font-display: optional` to improve LCP on slow connections and avoid content shifts.",
-    "details": {
+  "details": {
+    "fontDisplay": {
       "headings": [
         {
           "label": "Font",
@@ -15,14 +12,19 @@
           "valueType": "text",
           "label": "Suggestion"
         }
+      ],
+      "items": [
+        {
+          "font": "Open Sans",
+          "fix": "Add the `&display=optional` parameter to the end of your Google Font import declaration ([read more](https://web.dev/font-display/#google-fonts))."
+        }
       ]
-    },
-    "items": [
-      {
-        "font": "Open Sans",
-        "fix": "Add the `&display=optional` parameter to the end of your Google Font import declaration ([read more](https://web.dev/font-display/#google-fonts))."
-      }
-    ],
+    }
+  },
+  "fontDisplay": {
+    "title": "Improve LCP and CLS using `font-display: optional`",
+    "url": "https://web.dev/optimize-webfont-loading/",
+    "message": "Load the critical webfonts using `font-display: optional` to improve LCP on slow connections and avoid content shifts.",
     "status": "WARN"
   }
 }
diff --git a/packages/page-experience/test-data/checks/fontDisplay/font-display-swap-non-critical.json b/packages/page-experience/test-data/checks/fontDisplay/font-display-swap-non-critical.json
@@ -1 +1,3 @@
-{}
+{
+  "details": {}
+}
diff --git a/packages/page-experience/test-data/checks/fontDisplay/font-display-swap.json b/packages/page-experience/test-data/checks/fontDisplay/font-display-swap.json
@@ -1,9 +1,6 @@
 {
-  "fontDisplay": {
-    "title": "Improve LCP and CLS using `font-display: optional`",
-    "url": "https://web.dev/optimize-webfont-loading/",
-    "message": "Load the critical webfonts using `font-display: optional` to improve LCP on slow connections and avoid content shifts.",
-    "details": {
+  "details": {
+    "fontDisplay": {
       "headings": [
         {
           "label": "Font",
@@ -15,14 +12,19 @@
           "valueType": "text",
           "label": "Suggestion"
         }
+      ],
+      "items": [
+        {
+          "font": "Open Sans",
+          "fix": "Add `font-display: optional` to your font-face declaration."
+        }
       ]
-    },
-    "items": [
-      {
-        "font": "Open Sans",
-        "fix": "Add `font-display: optional` to your font-face declaration."
-      }
-    ],
+    }
+  },
+  "fontDisplay": {
+    "title": "Improve LCP and CLS using `font-display: optional`",
+    "url": "https://web.dev/optimize-webfont-loading/",
+    "message": "Load the critical webfonts using `font-display: optional` to improve LCP on slow connections and avoid content shifts.",
     "status": "WARN"
   }
 }
diff --git a/packages/page-experience/test-data/checks/fontDisplay/missing-fontface-is-ignored.json b/packages/page-experience/test-data/checks/fontDisplay/missing-fontface-is-ignored.json
@@ -1 +1,3 @@
-{}
+{
+  "details": {}
+}
diff --git a/packages/page-experience/test-data/checks/fontDisplay/no-font-display-non-critical.json b/packages/page-experience/test-data/checks/fontDisplay/no-font-display-non-critical.json
@@ -1 +1,3 @@
-{}
+{
+  "details": {}
+}
diff --git a/packages/page-experience/test-data/checks/fontDisplay/no-font-display.json b/packages/page-experience/test-data/checks/fontDisplay/no-font-display.json
@@ -1,9 +1,6 @@
 {
-  "fontDisplay": {
-    "title": "Improve LCP and CLS using `font-display: optional`",
-    "url": "https://web.dev/optimize-webfont-loading/",
-    "message": "Load the critical webfonts using `font-display: optional` to improve LCP on slow connections and avoid content shifts.",
-    "details": {
+  "details": {
+    "fontDisplay": {
       "headings": [
         {
           "label": "Font",
@@ -15,14 +12,19 @@
           "valueType": "text",
           "label": "Suggestion"
         }
+      ],
+      "items": [
+        {
+          "font": "Open Sans",
+          "fix": "Add `font-display: optional` to your font-face declaration."
+        }
       ]
-    },
-    "items": [
-      {
-        "font": "Open Sans",
-        "fix": "Add `font-display: optional` to your font-face declaration."
-      }
-    ],
+    }
+  },
+  "fontDisplay": {
+    "title": "Improve LCP and CLS using `font-display: optional`",
+    "url": "https://web.dev/optimize-webfont-loading/",
+    "message": "Load the critical webfonts using `font-display: optional` to improve LCP on slow connections and avoid content shifts.",
     "status": "WARN"
   }
 }
diff --git a/packages/page-experience/test-data/checks/fontPreloading/critical-font-not-preloaded.json b/packages/page-experience/test-data/checks/fontPreloading/critical-font-not-preloaded.json
@@ -1,9 +1,6 @@
 {
-  "fontPreloading": {
-    "title": "Preload critical fonts",
-    "url": "https://web.dev/optimize-webfont-loading/",
-    "message": "Preload critical fonts to help the browser discover fonts used in the first viewport quicker.",
-    "details": {
+  "details": {
+    "fontPreloading": {
       "headings": [
         {
           "label": "Font",
@@ -15,14 +12,19 @@
           "valueType": "text",
           "label": "Suggestion"
         }
+      ],
+      "items": [
+        {
+          "font": "Open Sans",
+          "fix": "Add `<link rel=\"preload\" href=\"file:///fonts/OpenSans-Regular-webfont.woff2\" as=\"font\" crossorigin>` to your `<head>`."
+        }
       ]
-    },
-    "items": [
-      {
-        "font": "Open Sans",
-        "fix": "Add `<link rel=\"preload\" href=\"file:///fonts/OpenSans-Regular-webfont.woff2\" as=\"font\" crossorigin>` to your `<head>`."
-      }
-    ],
+    }
+  },
+  "fontPreloading": {
+    "title": "Preload critical fonts",
+    "url": "https://web.dev/optimize-webfont-loading/",
+    "message": "Preload critical fonts to help the browser discover fonts used in the first viewport quicker.",
     "status": "WARN"
   }
 }
diff --git a/packages/page-experience/test-data/checks/fontPreloading/critical-font-preloaded.json b/packages/page-experience/test-data/checks/fontPreloading/critical-font-preloaded.json
@@ -1 +1,3 @@
-{}
+{
+  "details": {}
+}
diff --git a/packages/page-experience/test-data/checks/fontPreloading/google-font.json b/packages/page-experience/test-data/checks/fontPreloading/google-font.json
@@ -1 +1,3 @@
-{}
+{
+  "details": {}
+}
diff --git a/...ages/page-experience/test-data/checks/fontPreloading/non-critical-font-not-preloaded.json b/...ages/page-experience/test-data/checks/fontPreloading/non-critical-font-not-preloaded.json
@@ -1 +1,3 @@
-{}
+{
+  "details": {}
+}
diff --git a/packages/page-experience/test-data/checks/fontPreloading/non-critical-font-preloaded.json b/packages/page-experience/test-data/checks/fontPreloading/non-critical-font-preloaded.json
@@ -1 +1,3 @@
-{}
+{
+  "details": {}
+}