report: minimum time scale, text tweaks

lighthouse-core/audits/byte-efficiency/unused-css-rules.js

@@ -19,7 +19,7 @@ class UnusedCSSRules extends ByteEfficiencyAudit {
   static get meta() {
     return {
       name: 'unused-css-rules',
-      description: 'Unused CSS rules',
+      description: 'Defer unused CSS',
       scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
       helpText: 'Remove unused rules from stylesheets to reduce unnecessary ' +
           'bytes consumed by network activity. ' +

lighthouse-core/audits/screenshot-thumbnails.js

@@ -76,17 +76,16 @@ class ScreenshotThumbnails extends Audit {
 
     const speedline = await artifacts.requestSpeedline(trace);
 
-    let minimumTimelineDuration = 0;
+    // Make the minimum time range 3s so sites that load super quickly don't get a single screenshot
+    let minimumTimelineDuration = context.options.minimumTimelineDuration || 3000;
     // Ensure thumbnails cover the full range of the trace (TTI can be later than visually complete)
     if (context.settings.throttlingMethod !== 'simulate') {
       const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
       const metricComputationData = {trace, devtoolsLog, settings: context.settings};
       const tti = artifacts.requestInteractive(metricComputationData);
       try {
-        minimumTimelineDuration = (await tti).timing;
-      } catch (_) {
-        minimumTimelineDuration = 0;
-      }
+        minimumTimelineDuration = Math.max((await tti).timing, minimumTimelineDuration);
+      } catch (_) {}
     }
 
     const thumbnails = [];

lighthouse-core/report/html/renderer/performance-category-renderer.js

@@ -157,9 +157,11 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
         .sort((auditA, auditB) => this._getWastedMs(auditB) - this._getWastedMs(auditA));
 
     if (opportunityAudits.length) {
+      // Scale the sparklines relative to savings, minimum 2s to not overstate small savings
+      const minimumScale = 2000;
       const wastedMsValues = opportunityAudits.map(audit => this._getWastedMs(audit));
       const maxWaste = Math.max(...wastedMsValues);
-      const scale = Math.ceil(maxWaste / 1000) * 1000;
+      const scale = Math.max(Math.ceil(maxWaste / 1000) * 1000, minimumScale);
       const groupEl = this.renderAuditGroup(groups['load-opportunities'], {expandable: false});
       const tmpl = this.dom.cloneTemplate('#tmpl-lh-opportunity-header', this.templateContext);
       const headerEl = this.dom.find('.lh-load-opportunity__header', tmpl);

lighthouse-core/test/audits/screenshot-thumbnails-test.js

@@ -24,13 +24,14 @@ describe('Screenshot thumbnails', () => {
   });
 
   it('should extract thumbnails from a trace', () => {
+    const options = {minimumTimelineDuration: 500};
     const settings = {throttlingMethod: 'provided'};
     const artifacts = Object.assign({
       traces: {defaultPass: pwaTrace},
       devtoolsLogs: {}, // empty devtools logs to test just thumbnails without TTI behavior
     }, computedArtifacts);
 
-    return ScreenshotThumbnailsAudit.audit(artifacts, {settings}).then(results => {
+    return ScreenshotThumbnailsAudit.audit(artifacts, {settings, options}).then(results => {
       results.details.items.forEach((result, index) => {
         const framePath = path.join(__dirname,
             `../fixtures/traces/screenshots/progressive-app-frame-${index}.jpg`);
@@ -47,13 +48,14 @@ describe('Screenshot thumbnails', () => {
   }).timeout(10000);
 
   it('should scale the timeline to TTI when observed', () => {
+    const options = {minimumTimelineDuration: 500};
     const settings = {throttlingMethod: 'devtools'};
     const artifacts = Object.assign({
       traces: {defaultPass: pwaTrace},
       devtoolsLogs: {defaultPass: pwaDevtoolsLog},
     }, computedArtifacts);
 
-    return ScreenshotThumbnailsAudit.audit(artifacts, {settings}).then(results => {
+    return ScreenshotThumbnailsAudit.audit(artifacts, {settings, options}).then(results => {
       assert.equal(results.details.items[0].timing, 158);
       assert.equal(results.details.items[9].timing, 1582);
 
@@ -65,18 +67,31 @@ describe('Screenshot thumbnails', () => {
   });
 
   it('should not scale the timeline to TTI when simulate', () => {
+    const options = {minimumTimelineDuration: 500};
     const settings = {throttlingMethod: 'simulate'};
     const artifacts = Object.assign({
       traces: {defaultPass: pwaTrace},
     }, computedArtifacts);
     computedArtifacts.requestInteractive = () => ({timing: 20000});
 
-    return ScreenshotThumbnailsAudit.audit(artifacts, {settings}).then(results => {
+    return ScreenshotThumbnailsAudit.audit(artifacts, {settings, options}).then(results => {
       assert.equal(results.details.items[0].timing, 82);
       assert.equal(results.details.items[9].timing, 818);
     });
   });
 
+  it('should scale the timeline to minimumTimelineDuration', () => {
+    const settings = {throttlingMethod: 'simulate'};
+    const artifacts = Object.assign({
+      traces: {defaultPass: pwaTrace},
+    }, computedArtifacts);
+
+    return ScreenshotThumbnailsAudit.audit(artifacts, {settings, options: {}}).then(results => {
+      assert.equal(results.details.items[0].timing, 300);
+      assert.equal(results.details.items[9].timing, 3000);
+    });
+  });
+
   it('should handle nonsense times', async () => {
     const settings = {throttlingMethod: 'simulate'};
     const artifacts = {
@@ -86,7 +101,7 @@ describe('Screenshot thumbnails', () => {
     };
 
     try {
-      await ScreenshotThumbnailsAudit.audit(artifacts, {settings});
+      await ScreenshotThumbnailsAudit.audit(artifacts, {settings, options: {}});
       assert.fail('should have thrown');
     } catch (err) {
       assert.equal(err.message, 'INVALID_SPEEDLINE');

lighthouse-core/test/results/sample_v2.json

@@ -2007,7 +2007,7 @@
       "displayValue": "",
       "scoreDisplayMode": "numeric",
       "name": "unused-css-rules",
-      "description": "Unused CSS rules",
+      "description": "Defer unused CSS",
       "helpText": "Remove unused rules from stylesheets to reduce unnecessary bytes consumed by network activity. [Learn more](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery).",
       "details": {
         "type": "table",