Merge branch 'master' into 1489alt

GoogleChrome · Jan 28, 2017 · 7739cd4 · 7739cd4
2 parents 3557139 + 312df2c
commit 7739cd4
Show file tree

Hide file tree

Showing 24 changed files with 561 additions and 187 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -44,8 +44,6 @@ module.exports = {
     "valid-jsdoc": 0,
     "comma-dangle": 0,
     "arrow-parens": 0,
-    // Compat: support for rest params is behind a flag for node v5.x
-    "prefer-rest-params": 0,
   },
   "parserOptions": {
     "ecmaVersion": 6,

diff --git a/lighthouse-cli/test/global-mocha-hooks.js b/lighthouse-cli/test/global-mocha-hooks.js
@@ -15,11 +15,11 @@ Object.keys(assert)
   .filter(key => typeof assert[key] === 'function')
   .forEach(key => {
     const _origFn = assert[key];
-    assert[key] = function() {
+    assert[key] = function(...args) {
       if (currTest) {
         currTest._assertions++;
       }
-      return _origFn.apply(this, arguments);
+      return _origFn.apply(this, args);
     };
   }
 );

diff --git a/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js b/lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js
@@ -121,7 +121,9 @@ module.exports = [
         score: false,
         extendedInfo: {
           value: {
-            length: 5
+            results: {
+              length: 5
+            }
           }
         }
       },
@@ -151,7 +153,9 @@ module.exports = [
         score: false,
         extendedInfo: {
           value: {
-            length: 2
+            results: {
+              length: 2
+            }
           }
         }
       },

diff --git a/lighthouse-core/audits/dobetterweb/uses-optimized-images.js b/lighthouse-core/audits/dobetterweb/uses-optimized-images.js
@@ -46,7 +46,7 @@ class UsesOptimizedImages extends Audit {
         'The following images could have smaller file sizes when compressed with ' +
         '[WebP](https://developers.google.com/speed/webp/) or JPEG at 80 quality. ' +
         '[Learn more about image optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization).',
-      requiredArtifacts: ['OptimizedImages']
+      requiredArtifacts: ['OptimizedImages', 'networkRecords']
     };
   }
 
@@ -67,6 +67,18 @@ class UsesOptimizedImages extends Audit {
    * @return {!AuditResult}
    */
   static audit(artifacts) {
+    const networkRecords = artifacts.networkRecords[Audit.DEFAULT_PASS];
+    return artifacts.requestNetworkThroughput(networkRecords).then(networkThroughput => {
+      return UsesOptimizedImages.audit_(artifacts, networkThroughput);
+    });
+  }
+
+  /**
+   * @param {!Artifacts} artifacts
+   * @param {number} networkThroughput
+   * @return {!AuditResult}
+   */
+  static audit_(artifacts, networkThroughput) {
     const images = artifacts.OptimizedImages;
 
     if (images.rawValue === -1) {
@@ -114,7 +126,10 @@ class UsesOptimizedImages extends Audit {
 
     let displayValue = '';
     if (totalWastedBytes > 1000) {
-      displayValue = `${Math.round(totalWastedBytes / KB_IN_BYTES)}KB potential savings`;
+      const totalWastedKb = Math.round(totalWastedBytes / KB_IN_BYTES);
+      // Only round to nearest 10ms since we're relatively hand-wavy
+      const totalWastedMs = Math.round(totalWastedBytes / networkThroughput * 100) * 10;
+      displayValue = `${totalWastedKb}KB (~${totalWastedMs}ms) potential savings`;
     }
 
     let debugString;
@@ -134,8 +149,8 @@ class UsesOptimizedImages extends Audit {
           tableHeadings: {
             url: 'URL',
             total: 'Original (KB)',
-            webpSavings: 'WebP savings',
-            jpegSavings: 'JPEG savings'
+            webpSavings: 'WebP Savings (%)',
+            jpegSavings: 'JPEG Savings (%)',
           }
         }
       }

diff --git a/lighthouse-core/audits/dobetterweb/uses-responsive-images.js b/lighthouse-core/audits/dobetterweb/uses-responsive-images.js
@@ -44,7 +44,7 @@ class UsesResponsiveImages extends Audit {
         'Image sizes served should be based on the device display size to save network bytes. ' +
         'Learn more about [responsive images](https://developers.google.com/web/fundamentals/design-and-ui/media/images) ' +
         'and [client hints](https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints).',
-      requiredArtifacts: ['ImageUsage', 'ContentWidth']
+      requiredArtifacts: ['ImageUsage', 'ContentWidth', 'networkRecords']
     };
   }
 
@@ -68,20 +68,17 @@ class UsesResponsiveImages extends Audit {
       return null;
     }
 
-    // TODO(#1517): use an average transfer time for data URI images
-    const size = image.networkRecord.resourceSize;
-    const transferTimeInMs = 1000 * (image.networkRecord.endTime -
-        image.networkRecord.responseReceivedTime);
-    const wastedBytes = Math.round(size * wastedRatio);
-    const wastedTime = Math.round(transferTimeInMs * wastedRatio);
-    const percentSavings = Math.round(100 * wastedRatio);
-    const label = `${Math.round(size / KB_IN_BYTES)}KB total, ${percentSavings}% potential savings`;
+    const totalBytes = image.networkRecord.resourceSize;
+    const wastedBytes = Math.round(totalBytes * wastedRatio);
 
     return {
       wastedBytes,
-      wastedTime,
       isWasteful: wastedRatioFullDPR > WASTEFUL_THRESHOLD_AS_RATIO,
-      result: {url, label},
+      result: {
+        url,
+        totalKb: Math.round(totalBytes / KB_IN_BYTES) + ' KB',
+        potentialSavings: Math.round(100 * wastedRatio) + '%'
+      },
     };
   }
 
@@ -90,12 +87,23 @@ class UsesResponsiveImages extends Audit {
    * @return {!AuditResult}
    */
   static audit(artifacts) {
+    const networkRecords = artifacts.networkRecords[Audit.DEFAULT_PASS];
+    return artifacts.requestNetworkThroughput(networkRecords).then(networkThroughput => {
+      return UsesResponsiveImages.audit_(artifacts, networkThroughput);
+    });
+  }
+
+  /**
+   * @param {!Artifacts} artifacts
+   * @param {number} networkThroughput
+   * @return {!AuditResult}
+   */
+  static audit_(artifacts, networkThroughput) {
     const images = artifacts.ImageUsage;
     const contentWidth = artifacts.ContentWidth;
 
     let debugString;
     let totalWastedBytes = 0;
-    let totalWastedTime = 0;
     let hasWastefulImage = false;
     const DPR = contentWidth.devicePixelRatio;
     const results = images.reduce((results, image) => {
@@ -112,7 +120,6 @@ class UsesResponsiveImages extends Audit {
       }
 
       hasWastefulImage = hasWastefulImage || processed.isWasteful;
-      totalWastedTime += processed.wastedTime;
       totalWastedBytes += processed.wastedBytes;
       results.push(processed.result);
       return results;
@@ -121,16 +128,25 @@ class UsesResponsiveImages extends Audit {
     let displayValue;
     if (results.length) {
       const totalWastedKB = Math.round(totalWastedBytes / KB_IN_BYTES);
-      displayValue = `${totalWastedKB}KB (~${totalWastedTime}ms) potential savings`;
+      // Only round to nearest 10ms since we're relatively hand-wavy
+      const totalWastedMs = Math.round(totalWastedBytes / networkThroughput * 100) * 10;
+      displayValue = `${totalWastedKB}KB (~${totalWastedMs}ms) potential savings`;
     }
 
     return UsesResponsiveImages.generateAuditResult({
       debugString,
       displayValue,
       rawValue: !hasWastefulImage,
       extendedInfo: {
-        formatter: Formatter.SUPPORTED_FORMATS.URLLIST,
-        value: results
+        formatter: Formatter.SUPPORTED_FORMATS.TABLE,
+        value: {
+          results,
+          tableHeadings: {
+            url: 'URL',
+            totalKb: 'Original (KB)',
+            potentialSavings: 'Potential Savings (%)'
+          }
+        }
       }
     });
   }