core(responsive-images): move images with no dimensions to offscreen …

…audit (#4487)
GoogleChrome · Feb 9, 2018 · c3620b1 · c3620b1
1 parent 9825c6c
commit c3620b1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/lighthouse-cli/test/fixtures/byte-efficiency/tester.html b/lighthouse-cli/test/fixtures/byte-efficiency/tester.html
@@ -103,6 +103,12 @@ <h2>Byte efficiency tester page</h2>
   <!-- FAIL(offscreen): image is offscreen -->
   <img style="margin-top: 1000px; width: 120px; height: 80px;" src="lighthouse-480x320.webp">
 
+  <!-- PASS(optimized): image is JPEG optimized -->
+  <!-- PASS(webp): image is WebP optimized -->
+  <!-- PASS(responsive): image is not visible -->
+  <!-- FAIL(offscreen): image is not visible -->
+  <div class="onscreen" style="display: none;"><img class="onscreen" style="width: 120px; height: 80px;" src="lighthouse-480x320.webp?invisible"></div>
+
   <!-- PASS(optimized): image is vector -->
   <!-- PASS(webp): image is vector -->
   <!-- PASS(responsive): image is vector -->

diff --git a/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js b/lighthouse-cli/test/smokehouse/byte-efficiency/expectations.js
@@ -67,6 +67,8 @@ module.exports = [
                 url: /lighthouse-unoptimized.jpg$/,
               }, {
                 url: /lighthouse-480x320.webp$/,
+              }, {
+                url: /lighthouse-480x320.webp\?invisible$/,
               }, {
                 url: /large.svg$/,
               },

diff --git a/lighthouse-core/audits/byte-efficiency/offscreen-images.js b/lighthouse-core/audits/byte-efficiency/offscreen-images.js
@@ -28,7 +28,7 @@ class OffscreenImages extends ByteEfficiencyAudit {
       name: 'offscreen-images',
       description: 'Offscreen images',
       informative: true,
-      helpText: 'Consider lazy-loading offscreen images to improve page load speed ' +
+      helpText: 'Consider lazy-loading offscreen and hidden images to improve page load speed ' +
         'and time to interactive. ' +
         '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images).',
       requiredArtifacts: ['ImageUsage', 'ViewportDimensions', 'traces', 'devtoolsLogs'],

diff --git a/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js b/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js
@@ -50,6 +50,12 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
     const totalBytes = image.networkRecord.resourceSize;
     const wastedBytes = Math.round(totalBytes * wastedRatio);
 
+    // If the image has 0 dimensions, it's probably hidden/offscreen, so let the offscreen-images
+    // audit handle it instead.
+    if (!usedPixels) {
+      return null;
+    }
+
     if (!Number.isFinite(wastedRatio)) {
       return new Error(`Invalid image sizing information ${url}`);
     }
@@ -85,6 +91,8 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
       }
 
       const processed = UsesResponsiveImages.computeWaste(image, DPR);
+      if (!processed) return;
+
       if (processed instanceof Error) {
         debugString = processed.message;
         Sentry.captureException(processed, {tags: {audit: this.meta.name}, level: 'warning'});