core(response-compression): add transferSize sanity check (#3606)

* core(uses-response-compression): fix to use transferSize over resourceSize

* switch to still using resourceSize

* rename back to original

lighthouse-core/audits/byte-efficiency/uses-request-compression.js

@@ -48,7 +48,8 @@ class ResponsesAreCompressed extends ByteEfficiencyAudit {
       // we require at least 10% savings off the original size AND at least 1400 bytes
       // if the savings is smaller than either, we don't care
       if (1 - gzipSize / originalSize < IGNORE_THRESHOLD_IN_PERCENT ||
-          gzipSavings < IGNORE_THRESHOLD_IN_BYTES
+          gzipSavings < IGNORE_THRESHOLD_IN_BYTES ||
+          record.transferSize < gzipSize
       ) {
         return;
       }

lighthouse-core/gather/gatherers/dobetterweb/response-compression.js

@@ -29,7 +29,7 @@ class ResponseCompression extends Gatherer {
       const isChromeExtensionResource = record.url.startsWith(CHROME_EXTENSION_PROTOCOL);
 
       if (!isTextBasedResource || !record.resourceSize || !record.finished ||
-        isChromeExtensionResource) {
+        isChromeExtensionResource || !record.transferSize || record.statusCode === 304) {
         return;
       }
 
@@ -43,6 +43,7 @@ class ResponseCompression extends Gatherer {
           requestId: record.requestId,
           url: record.url,
           mimeType: record.mimeType,
+          transferSize: record.transferSize,
           resourceSize: record.resourceSize,
         });
       }

lighthouse-core/test/audits/byte-efficiency/uses-response-compression-test.js

@@ -5,18 +5,18 @@
  */
 'use strict';
 
-const KB_BYTES = 1024;
+const KB = 1024;
 const ResponsesAreCompressedAudit =
   require('../../../audits/byte-efficiency/uses-request-compression.js');
 const assert = require('assert');
 
-function generateResponse(filename, type, originalSize, gzipSize) {
-  return {
-    url: `http://google.com/${filename}`,
-    mimeType: `${type}`,
-    resourceSize: originalSize,
-    gzipSize,
-  };
+function generateResponse(options) {
+  return Object.assign({
+    url: `http://google.com/${options.file}`,
+    transferSize: options.resourceSize || 0,
+    resourceSize: 0,
+    gzipSize: 0,
+  }, options);
 }
 
 /* eslint-env mocha */
@@ -25,9 +25,9 @@ describe('Page uses optimized responses', () => {
   it('fails when responses are collectively unoptimized', () => {
     const auditResult = ResponsesAreCompressedAudit.audit_({
       ResponseCompression: [
-        generateResponse('index.js', 'text/javascript', 100 * KB_BYTES, 90 * KB_BYTES), // 10kb & 10%
-        generateResponse('index.css', 'text/css', 50 * KB_BYTES, 37 * KB_BYTES), //  13kb & 26% (hit)
-        generateResponse('index.json', 'application/json', 2048 * KB_BYTES, 1024 * KB_BYTES), // 1024kb & 50% (hit)
+        generateResponse({file: 'index.js', resourceSize: 100 * KB, gzipSize: 90 * KB}), // 10kb & 10%
+        generateResponse({file: 'index.css', resourceSize: 50 * KB, gzipSize: 37 * KB}), //  13kb & 26% (hit)
+        generateResponse({file: 'index.json', resourceSize: 2048 * KB, gzipSize: 1024 * KB}), // 1024kb & 50% (hit)
       ],
     });
 
@@ -37,9 +37,11 @@ describe('Page uses optimized responses', () => {
   it('passes when all responses are sufficiently optimized', () => {
     const auditResult = ResponsesAreCompressedAudit.audit_({
       ResponseCompression: [
-        generateResponse('index.js', 'text/javascript', 1000 * KB_BYTES, 910 * KB_BYTES), // 90kb & 9%
-        generateResponse('index.css', 'text/css', 6 * KB_BYTES, 4.5 * KB_BYTES), // 1,5kb & 25% (hit)
-        generateResponse('index.json', 'application/json', 10 * KB_BYTES, 10 * KB_BYTES), // 0kb & 0%
+        generateResponse({file: 'index.js', resourceSize: 1000 * KB, gzipSize: 910 * KB}), // 90kb & 9%
+        generateResponse({file: 'index.css', resourceSize: 6 * KB, gzipSize: 4.5 * KB}), // 1,5kb & 25% (hit)
+        generateResponse({file: 'index.json', resourceSize: 10 * KB, gzipSize: 10 * KB}), // 0kb & 0%
+        generateResponse({file: 'compressed.json', resourceSize: 10 * KB, transferSize: 3 * KB,
+          gzipSize: 6 * KB}), // 0kb & 0%
       ],
     });
 

lighthouse-core/test/gather/gatherers/dobetterweb/response-compression-test.js

@@ -18,9 +18,11 @@ const traceData = {
   networkRecords: [
     {
       _url: 'http://google.com/index.js',
+      _statusCode: 200,
       _mimeType: 'text/javascript',
       _requestId: 0,
       _resourceSize: 9,
+      _transferSize: 10,
       _resourceType: {
         _isTextType: true,
       },
@@ -33,9 +35,11 @@ const traceData = {
     },
     {
       _url: 'http://google.com/index.css',
+      _statusCode: 200,
       _mimeType: 'text/css',
       _requestId: 1,
       _resourceSize: 6,
+      _transferSize: 7,
       _resourceType: {
         _isTextType: true,
       },
@@ -45,9 +49,25 @@ const traceData = {
     },
     {
       _url: 'http://google.com/index.json',
+      _statusCode: 200,
       _mimeType: 'application/json',
       _requestId: 2,
       _resourceSize: 7,
+      _transferSize: 8,
+      _resourceType: {
+        _isTextType: true,
+      },
+      _responseHeaders: [],
+      content: '1234567',
+      finished: true,
+    },
+    {
+      _url: 'http://google.com/index.json',
+      _statusCode: 304, // ignore for being a cache not modified response
+      _mimeType: 'application/json',
+      _requestId: 2,
+      _resourceSize: 7,
+      _transferSize: 7,
       _resourceType: {
         _isTextType: true,
       },
@@ -57,9 +77,11 @@ const traceData = {
     },
     {
       _url: 'http://google.com/other.json',
+      _statusCode: 200,
       _mimeType: 'application/json',
       _requestId: 2,
       _resourceSize: 7,
+      _transferSize: 8,
       _resourceType: {
         _isTextType: true,
       },
@@ -69,9 +91,11 @@ const traceData = {
     },
     {
       _url: 'http://google.com/index.jpg',
+      _statusCode: 200,
       _mimeType: 'images/jpg',
       _requestId: 3,
       _resourceSize: 10,
+      _transferSize: 10,
       _resourceType: {
         _isTextType: false,
       },
@@ -124,6 +148,7 @@ describe('Optimized responses', () => {
           _mimeType: 'text/css',
           _requestId: 1,
           _resourceSize: 10,
+          _transferSize: 10,
           _resourceType: {
             _isTextType: true,
           },
@@ -136,6 +161,7 @@ describe('Optimized responses', () => {
           _mimeType: 'text/css',
           _requestId: 1,
           _resourceSize: 123,
+          _transferSize: 123,
           _resourceType: {
             _isTextType: true,
           },
@@ -157,8 +183,10 @@ describe('Optimized responses', () => {
   function createNetworkRequests(traceData) {
     traceData.networkRecords = traceData.networkRecords.map(record => {
       record.url = record._url;
+      record.statusCode = record._statusCode;
       record.mimeType = record._mimeType;
       record.resourceSize = record._resourceSize;
+      record.transferSize = record._transferSize;
       record.responseHeaders = record._responseHeaders;
       record.requestId = record._requestId;
       record.resourceType = () => {