GoogleChrome · paulirish · Feb 8, 2018 · Oct 1, 2017 · Oct 1, 2017 · Oct 21, 2017
diff --git a/lighthouse-cli/test/fixtures/perf/level-2.js b/lighthouse-cli/test/fixtures/perf/level-2.js
@@ -0,0 +1,9 @@
+/**
+ * @license Copyright 2017 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.
+ */
+
+/* eslint-disable */
+
+document.write('<script src="level-3.js"></script>');
diff --git a/lighthouse-cli/test/fixtures/perf/level-3.js b/lighthouse-cli/test/fixtures/perf/level-3.js
@@ -0,0 +1,12 @@
+/**
+ * @license Copyright 2017 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.
+ */
+
+/* eslint-disable */
+
+const dummyDiv = document.createElement('div');
+dummyDiv.innerHTML = 'Hello!';
+
+document.body.appendChild(dummyDiv);
diff --git a/lighthouse-cli/test/fixtures/perf/preload_style.css b/lighthouse-cli/test/fixtures/perf/preload_style.css
@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "Lobster";
+  src: url("./lobster-v20-latin-regular.woff2") format("woff2");
+ }
+
+ body {
+   font-family: "Lobster";
+ }
diff --git a/lighthouse-cli/test/fixtures/perf/preload_tester.js b/lighthouse-cli/test/fixtures/perf/preload_tester.js
@@ -0,0 +1,9 @@
+/**
+ * @license Copyright 2017 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.
+ */
+
+/* eslint-disable */
+
+document.write('<script src="level-2.js?delay=500"></script>')
diff --git a/lighthouse-cli/test/fixtures/preload.html b/lighthouse-cli/test/fixtures/preload.html
@@ -0,0 +1,10 @@
+<html>
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+  <link rel="stylesheet" href="/perf/preload_style.css" />
+  <body>
+    There was nothing special about this site,
+    nothing was left to be seen,
+    not even a kite.
+    <script src="/perf/preload_tester.js"></script>
+  </body>
+</html>
diff --git a/lighthouse-cli/test/smokehouse/perf/expectations.js b/lighthouse-cli/test/smokehouse/perf/expectations.js
@@ -10,11 +10,11 @@
  */
 module.exports = [
   {
-    initialUrl: 'http://localhost:10200/online-only.html',
-    url: 'http://localhost:10200/online-only.html',
+    initialUrl: 'http://localhost:10200/preload.html',
+    url: 'http://localhost:10200/preload.html',
     audits: {
       'speed-index-metric': {
-        score: '>=90',
+        score: '>=80',
         extendedInfo: {
           value: {
             timings: {},
@@ -36,6 +36,15 @@ module.exports = [
         // Can be flaky, so test float rawValue instead of boolean score
         rawValue: '<1000',
       },
+      'uses-rel-preload': {
+        score: '<100',
+        rawValue: '>500',
+        details: {
+          items: {
+            length: 1,
+          },
+        },
+      },
     },
   },
   {

diff --git a/lighthouse-core/audits/critical-request-chains.js b/lighthouse-core/audits/critical-request-chains.js
@@ -78,6 +78,42 @@ class CriticalRequestChains extends Audit {
     return longest;
   }
 
+  /**
+   * @param {*} tree
+   */
+  static flattenRequests(tree) {
+    const flattendChains = {};
+    const chainMap = new Map();
+    CriticalRequestChains._traverse(tree, opts => {
+      let chain;
+      if (chainMap.has(opts.id)) {
+        chain = chainMap.get(opts.id);
+      } else {
+        chain = {};
+        flattendChains[opts.id] = chain;
+      }
+
+      const request = opts.node.request;
+      chain.request = {
+        url: request.url,
+        startTime: request.startTime,
+        endTime: request.endTime,
+        responseReceivedTime: request.responseReceivedTime,
+        transferSize: request.transferSize,
+      };
+      chain.children = {};
+      Object.keys(opts.node.children).forEach(chainId => {
+        const childChain = {};
+        chainMap.set(chainId, childChain);
+        chain.children[chainId] = childChain;
+      });
+
+      chainMap.set(opts.id, chain);
+    });
+
+    return flattendChains;
+  }
+
   /**
    * Audits the page to give a score for First Meaningful Paint.
    * @param {!Artifacts} artifacts The artifacts from the gather phase.
@@ -101,29 +137,31 @@ class CriticalRequestChains extends Audit {
           walk(child.children, depth + 1);
         }, '');
       }
+      // Convert
+      const flattenedChains = CriticalRequestChains.flattenRequests(chains);
 
       // Account for initial navigation
-      const initialNavKey = Object.keys(chains)[0];
-      const initialNavChildren = initialNavKey && chains[initialNavKey].children;
+      const initialNavKey = Object.keys(flattenedChains)[0];
+      const initialNavChildren = initialNavKey && flattenedChains[initialNavKey].children;
       if (initialNavChildren && Object.keys(initialNavChildren).length > 0) {
         walk(initialNavChildren, 0);
       }
 
-      const longestChain = CriticalRequestChains._getLongestChain(chains);
+      const longestChain = CriticalRequestChains._getLongestChain(flattenedChains);
 
       return {
         rawValue: chainCount === 0,
         displayValue: Util.formatNumber(chainCount),
         extendedInfo: {
           value: {
-            chains,
+            chains: flattenedChains,
             longestChain,
           },
         },
         details: {
           type: 'criticalrequestchain',
           header: {type: 'text', text: 'View critical network waterfall:'},
-          chains,
+          chains: flattenedChains,
           longestChain,
         },
       };

diff --git a/lighthouse-core/audits/uses-rel-preload.js b/lighthouse-core/audits/uses-rel-preload.js
@@ -0,0 +1,110 @@
+/**
+ * @license Copyright 2017 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');
+const Util = require('../report/v2/renderer/util');
+const UnusedBytes = require('./byte-efficiency/byte-efficiency-audit');
+const THRESHOLD_IN_MS = 100;
+
+class UsesRelPreloadAudit extends Audit {
+  /**
+   * @return {!AuditMeta}
+   */
+  static get meta() {
+    return {
+      category: 'Performance',
+      name: 'uses-rel-preload',
+      description: 'Preload key requests',
+      informative: true,
+      helpText: 'Consider using <link rel=preload> to prioritize fetching late-discovered ' +
+        'resources sooner [Learn more](https://developers.google.com/web/updates/2016/03/link-rel-preload).',
+      requiredArtifacts: ['devtoolsLogs', 'traces'],
+      scoringMode: Audit.SCORING_MODES.NUMERIC,
+    };
+  }
+
+  static _flattenRequests(chains, maxLevel, minLevel = 0) {
+    const requests = [];
+    const flatten = (chains, level) => {
+      Object.keys(chains).forEach(chain => {
+        if (chains[chain]) {
+          const currentChain = chains[chain];
+          if (level >= minLevel) {
+            requests.push(currentChain.request);
+          }
+
+          if (level < maxLevel) {
+            flatten(currentChain.children, level + 1);
+          }
+        }
+      });
+    };
+
+    flatten(chains, 0);
+
+    return requests;
+  }
+
+  /**
+   * @param {!Artifacts} artifacts
+   * @return {!AuditResult}
+   */
+  static audit(artifacts) {
+    const devtoolsLogs = artifacts.devtoolsLogs[UsesRelPreloadAudit.DEFAULT_PASS];
+
+    return Promise.all([
+      artifacts.requestCriticalRequestChains(devtoolsLogs),
+      artifacts.requestMainResource(devtoolsLogs),
+    ]).then(([critChains, mainResource]) => {
+      const results = [];
+      let maxWasted = 0;
+      // get all critical requests 2 + mainResourceIndex levels deep
+      const mainResourceIndex = mainResource.redirects ? mainResource.redirects.length : 0;
+
+      const criticalRequests = UsesRelPreloadAudit._flattenRequests(critChains,
+        3 + mainResourceIndex, 2 + mainResourceIndex);
+      criticalRequests.forEach(request => {
+        const networkRecord = request;
+        if (!networkRecord._isLinkPreload && networkRecord.protocol !== 'data') {
+          // calculate time between mainresource.endTime and resource start time
+          const wastedMs = Math.min(request._startTime - mainResource._endTime,
+            request._endTime - request._startTime) * 1000;
+
+          if (wastedMs >= THRESHOLD_IN_MS) {
+            maxWasted = Math.max(wastedMs, maxWasted);
+            results.push({
+              url: request.url,
+              wastedMs: Util.formatMilliseconds(wastedMs),
+            });
+          }
+        }
+      });
+
+      // sort results by wastedTime DESC
+      results.sort((a, b) => b.wastedMs - a.wastedMs);
+
+      const headings = [
+        {key: 'url', itemType: 'url', text: 'URL'},
+        {key: 'wastedMs', itemType: 'text', text: 'Potential Savings'},
+      ];
+      const details = Audit.makeTableDetails(headings, results);
+
+      return {
+        score: UnusedBytes.scoreForWastedMs(maxWasted),
+        rawValue: maxWasted,
+        displayValue: Util.formatMilliseconds(maxWasted),
+        extendedInfo: {
+          value: results,
+        },
+        details,
+      };
+    });
+  }
+}
+
+module.exports = UsesRelPreloadAudit;
diff --git a/lighthouse-core/config/default.js b/lighthouse-core/config/default.js
@@ -99,6 +99,7 @@ module.exports = {
     'deprecations',
     'mainthread-work-breakdown',
     'bootup-time',
+    'uses-rel-preload',
     'font-display',
     'manual/pwa-cross-browser',
     'manual/pwa-page-transitions',
@@ -279,6 +280,7 @@ module.exports = {
         {id: 'uses-request-compression', weight: 0, group: 'perf-hint'},
         {id: 'time-to-first-byte', weight: 0, group: 'perf-hint'},
         {id: 'redirects', weight: 0, group: 'perf-hint'},
+        {id: 'uses-rel-preload', weight: 0, group: 'perf-hint'},
         {id: 'total-byte-weight', weight: 0, group: 'perf-info'},
         {id: 'uses-long-cache-ttl', weight: 0, group: 'perf-info'},
         {id: 'dom-size', weight: 0, group: 'perf-info'},

diff --git a/lighthouse-core/gather/computed/critical-request-chains.js b/lighthouse-core/gather/computed/critical-request-chains.js
@@ -58,16 +58,6 @@ class CriticalRequestChains extends ComputedArtifact {
     const criticalRequests = networkRecords.filter(request =>
       CriticalRequestChains.isCritical(request, mainResource));
 
-    const flattenRequest = request => {
-      return {
-        url: request._url,
-        startTime: request.startTime,
-        endTime: request.endTime,
-        responseReceivedTime: request.responseReceivedTime,
-        transferSize: request.transferSize,
-      };
-    };
-
     // Create a tree of critical requests.
     const criticalRequestChains = {};
     for (const request of criticalRequests) {
@@ -103,7 +93,7 @@ class CriticalRequestChains extends ComputedArtifact {
         const parentRequestId = parentRequest.requestId;
         if (!node[parentRequestId]) {
           node[parentRequestId] = {
-            request: flattenRequest(parentRequest),
+            request: parentRequest,
             children: {},
           };
         }
@@ -124,7 +114,7 @@ class CriticalRequestChains extends ComputedArtifact {
 
       // node should now point to the immediate parent for this request.
       node[request.requestId] = {
-        request: flattenRequest(request),
+        request,
         children: {},
       };
     }