PROPOSAL: new structure for metrics + lantern

lighthouse-core/audits/first-contentful-paint.js

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright 2016 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');
+
+class FirstContentfulPaint extends Audit {
+  /**
+   * @return {!AuditMeta}
+   */
+  static get meta() {
+    return {
+      name: 'first-contentful-paint',
+      description: 'First Contentful Paint',
+      failureDescription: 'First Contentful Paint',
+      helpText: 'Foo',
+      requiredArtifacts: ['traces', 'devtoolsLogs'],
+    };
+  }
+
+  /**
+   * @param {!Artifacts} artifacts
+   * @return {!AuditResult}
+   */
+  static async audit(artifacts, context) {
+    const result = await artifacts.requestFirstContentfulPaint({
+      trace: artifacts.traces.defaultPass,
+      devtoolsLog: artifacts.devtoolsLogs.defaultPass,
+      throttling: context.config.settings.throttling,
+    })
+
+    return {
+      rawValue: result.timing,
+      score: 100 - 100 * (result.timing / 10000),
+    };
+  }
+}
+
+module.exports = FirstContentfulPaint;

lighthouse-core/audits/predictive-perf.js

@@ -72,40 +72,6 @@ class PredictivePerf extends Audit {
     return scriptUrls;
   }
 
-  /**
-   * @param {!Node} dependencyGraph
-   * @return {!Object}
-   */
-  static computeRTTAndServerResponseTime(dependencyGraph) {
-    const records = [];
-    dependencyGraph.traverse(node => {
-      if (node.type === Node.TYPES.NETWORK) records.push(node.record);
-    });
-
-    // First pass compute the estimated observed RTT to each origin's servers.
-    const rttByOrigin = new Map();
-    for (const [origin, summary] of NetworkAnalyzer.estimateRTTByOrigin(records).entries()) {
-      rttByOrigin.set(origin, summary.min);
-    }
-
-    // We'll use the minimum RTT as the assumed connection latency since we care about how much addt'l
-    // latency each origin introduces as Lantern will be simulating with its own connection latency.
-    const minimumRtt = Math.min(...Array.from(rttByOrigin.values()));
-    // We'll use the observed RTT information to help estimate the server response time
-    const responseTimeSummaries = NetworkAnalyzer.estimateServerResponseTimeByOrigin(records, {
-      rttByOrigin,
-    });
-
-    const additionalRttByOrigin = new Map();
-    const serverResponseTimeByOrigin = new Map();
-    for (const [origin, summary] of responseTimeSummaries.entries()) {
-      additionalRttByOrigin.set(origin, rttByOrigin.get(origin) - minimumRtt);
-      serverResponseTimeByOrigin.set(origin, summary.median);
-    }
-
-    return {additionalRttByOrigin, serverResponseTimeByOrigin};
-  }
-
   /**
    * @param {!Node} dependencyGraph
    * @param {!TraceOfTabArtifact} traceOfTab
@@ -245,7 +211,7 @@ class PredictivePerf extends Audit {
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
     const devtoolsLogs = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     return Promise.all([
-      artifacts.requestPageDependencyGraph(trace, devtoolsLogs),
+      artifacts.requestPageDependencyGraph({trace, devtoolsLogs}),
       artifacts.requestTraceOfTab(trace),
     ]).then(([graph, traceOfTab]) => {
       const graphs = {

lighthouse-core/config/config.js

@@ -341,6 +341,7 @@ class Config {
     this._artifacts = expandArtifacts(configJSON.artifacts);
     this._categories = configJSON.categories;
     this._groups = configJSON.groups;
+    this._settings = configJSON.settings || {};
 
     // validatePasses must follow after audits are required
     validatePasses(configJSON.passes, this._audits);
@@ -748,6 +749,11 @@ class Config {
   get groups() {
     return this._groups;
   }
+
+  /** @type {Object} */
+  get settings() {
+    return this._settings;
+  }
 }
 
 /**

lighthouse-core/config/default.js

@@ -7,8 +7,24 @@
 
 /* eslint-disable max-len */
 
+const emulation = require('../lib/emulation');
+
 module.exports = {
-  settings: {},
+  settings: {
+    onlyAudits: ['first-contentful-paint'],
+    throttling: {
+      // method: 'devtools',
+      // requestLatency: emulation.settings.TYPICAL_MOBILE_THROTTLING_METRICS.latency,
+      // downloadThroughput: emulation.settings.TYPICAL_MOBILE_THROTTLING_METRICS.downloadThroughput,
+      // uploadThroughput: emulation.settings.TYPICAL_MOBILE_THROTTLING_METRICS.uploadThroughput,
+
+      method: 'lantern',
+      rtt: 160,
+      throughput: 128 * 1000,
+
+      cpuSlowdownMultiplier: emulation.settings.CPU_THROTTLE_METRICS.rate,
+    },
+  },
   passes: [{
     passName: 'defaultPass',
     recordTrace: true,
@@ -72,6 +88,7 @@ module.exports = {
     ],
   }],
   audits: [
+    'first-contentful-paint',
     'is-on-https',
     'redirects-http',
     'service-worker',
@@ -264,6 +281,7 @@ module.exports = {
       name: 'Performance',
       description: 'These encapsulate your web app\'s current performance and opportunities to improve it.',
       audits: [
+        {id: 'first-contentful-paint', weight: 5, group: 'perf-metric'},
         {id: 'first-meaningful-paint', weight: 5, group: 'perf-metric'},
         {id: 'first-interactive', weight: 5, group: 'perf-metric'},
         {id: 'consistently-interactive', weight: 5, group: 'perf-metric'},

lighthouse-core/config/lantern.js

@@ -0,0 +1,50 @@
+/**
+ * @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';
+
+module.exports = {
+  extends: 'lighthouse:default',
+  settings: {
+    throttling: {
+      method: 'lantern',
+      rtt: emulation.settings.TYPICAL_MOBILE_THROTTLING_METRICS.targetLatency,
+      throughput: emulation.settings.TYPICAL_MOBILE_THROTTLING_METRICS.targetDownloadThroughput,
+      cpuSlowdownMultiplier: emulation.settings.CPU_THROTTLE_METRICS.rate,
+    },
+    skipAudits: [
+      // disabled for now because their results are not meaningful/cannot be computed anymore
+      'first-meaningful-paint',
+      'first-interactive',
+      'consistently-interactive',
+      'estimated-input-latency',
+      'speed-index-metric',
+      'offscreen-images',
+      'load-fast-enough-for-pwa',
+    ],
+  },
+  passes: [
+    {
+      passName: 'defaultPass',
+      // overwrite the throttling and load wait parameters
+      useThrottling: false,
+      pauseAfterLoadMs: 0,
+      networkQuietThresholdMs: 500,
+      cpuQuietThresholdMs: 500,
+      // no need to add any gatherers yet, but this property is required
+      gatherers: [],
+    },
+  ],
+  audits: [
+    'predictive-perf',
+  ],
+  categories: {
+    performance: {
+      audits: [
+        {id: 'predictive-perf', weight: 5, group: 'perf-metric'},
+      ],
+    },
+  },
+};

lighthouse-core/gather/computed/computed-artifact.js

@@ -20,10 +20,6 @@ class ComputedArtifact {
     this._allComputedArtifacts = allComputedArtifacts;
   }
 
-  get requiredNumberOfArtifacts() {
-    return 1;
-  }
-
   /* eslint-disable no-unused-vars */
 
   /**
@@ -38,34 +34,20 @@ class ComputedArtifact {
     throw new Error('compute_() not implemented for computed artifact ' + this.name);
   }
 
-  /**
-   * Asserts that the length of the array is the same as the number of inputs the class expects
-   * @param {!Array<*>} artifacts
-   */
-  _assertCorrectNumberOfArtifacts(artifacts) {
-    const actual = artifacts.length;
-    const expected = this.requiredNumberOfArtifacts;
-    if (actual !== expected) {
-      const className = this.constructor.name;
-      throw new Error(`${className} requires ${expected} artifacts but ${actual} were given`);
-    }
-  }
-
   /* eslint-enable no-unused-vars */
 
   /**
    * Request a computed artifact, caching the result on the input artifact.
-   * @param {...*} artifacts
+   * @param {*} artifacts
    * @return {!Promise<*>}
    */
-  request(...artifacts) {
-    this._assertCorrectNumberOfArtifacts(artifacts);
+  request(artifacts) {
     if (this._cache.has(artifacts)) {
       return Promise.resolve(this._cache.get(artifacts));
     }
 
     const artifactPromise = Promise.resolve()
-      .then(_ => this.compute_(...artifacts, this._allComputedArtifacts));
+      .then(_ => this.compute_(artifacts, this._allComputedArtifacts));
     this._cache.set(artifacts, artifactPromise);
 
     return artifactPromise;

lighthouse-core/gather/computed/first-contentful-paint.js

@@ -0,0 +1,137 @@
+/**
+ * @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 ComputedArtifact = require('./computed-artifact');
+const Node = require('../../lib/dependency-graph/node');
+const Simulator = require('../../lib/dependency-graph/simulator/simulator');
+
+const COEFFICIENTS = {
+  intercept: 1440,
+  optimistic: -1.75,
+  pessimistic: 2.73,
+};
+
+class FirstContentfulPaint extends ComputedArtifact {
+  get name() {
+    return 'FirstContentfulPaint';
+  }
+
+  /**
+   * @param {!Node} dependencyGraph
+   * @param {function()=} condition
+   * @return {!Set<string>}
+   */
+  static getScriptUrls(dependencyGraph, condition) {
+    const scriptUrls = new Set();
+
+    dependencyGraph.traverse(node => {
+      if (node.type === Node.TYPES.CPU) return;
+      if (node.record._resourceType !== WebInspector.resourceTypes.Script) return;
+      if (condition && !condition(node)) return;
+      scriptUrls.add(node.record.url);
+    });
+
+    return scriptUrls;
+  }
+
+  /**
+   * @param {!Node} dependencyGraph
+   * @param {!TraceOfTabArtifact} traceOfTab
+   * @return {!Node}
+   */
+  static getOptimisticGraph(dependencyGraph, traceOfTab) {
+    const fcp = traceOfTab.timestamps.firstContentfulPaint;
+    const blockingScriptUrls = FirstContentfulPaint.getScriptUrls(dependencyGraph, node => {
+      return (
+        node.endTime <= fcp && node.hasRenderBlockingPriority() && node.initiatorType !== 'script'
+      );
+    });
+
+    return dependencyGraph.cloneWithRelationships(node => {
+      if (node.endTime > fcp) return false;
+      // Include EvaluateScript tasks for blocking scripts
+      if (node.type === Node.TYPES.CPU) return node.isEvaluateScriptFor(blockingScriptUrls);
+      // Include non-script-initiated network requests with a render-blocking priority
+      return node.hasRenderBlockingPriority() && node.initiatorType !== 'script';
+    });
+  }
+
+  /**
+   * @param {!Node} dependencyGraph
+   * @param {!TraceOfTabArtifact} traceOfTab
+   * @return {!Node}
+   */
+  static getPessimisticGraph(dependencyGraph, traceOfTab) {
+    const fcp = traceOfTab.timestamps.firstContentfulPaint;
+    const blockingScriptUrls = FirstContentfulPaint.getScriptUrls(dependencyGraph, node => {
+      return node.endTime <= fcp && node.hasRenderBlockingPriority();
+    });
+
+    return dependencyGraph.cloneWithRelationships(node => {
+      if (node.endTime > fcp) return false;
+      // Include EvaluateScript tasks for blocking scripts
+      if (node.type === Node.TYPES.CPU) return node.isEvaluateScriptFor(blockingScriptUrls);
+      // Include all network requests that had render-blocking priority (even script-initiated)
+      return node.hasRenderBlockingPriority();
+    });
+  }
+
+  static async computeLantern(data, artifacts) {
+    const {trace, devtoolsLog} = data;
+    const graph = await artifacts.requestPageDependencyGraph({trace, devtoolsLog});
+    const traceOfTab = await artifacts.requestTraceOfTab(trace);
+    const networkAnalysis = await artifacts.requestNetworkAnalysis(devtoolsLog);
+
+    const optimisticGraph = FirstContentfulPaint.getOptimisticGraph(graph, traceOfTab);
+    const pessimisticGraph = FirstContentfulPaint.getPessimisticGraph(graph, traceOfTab);
+
+    const options = {...networkAnalysis, ...data.throttling};
+    const optimisticEstimate = new Simulator(optimisticGraph, options).simulate().timeInMs;
+    const pessimisticEstimate = new Simulator(pessimisticGraph, options).simulate().timeInMs;
+
+    const timing =
+      COEFFICIENTS.intercept +
+      COEFFICIENTS.optimistic * optimisticEstimate +
+      COEFFICIENTS.pessimistic * pessimisticEstimate;
+
+    return {
+      timing,
+      optimisticEstimate,
+      pessimisticEstimate,
+      optimisticGraph,
+      pessimisticGraph,
+    };
+  }
+
+  /**
+   * @param {{trace: Object, devtoolsLog: Object, throttling: Object}} data
+   * @return {Object}
+   */
+  async compute_(data, artifacts) {
+    if (data.throttling.method !== 'lantern') {
+      const traceOfTab = await artifacts.requestTraceOfTab(data.trace);
+      return {
+        timing: traceOfTab.timings.firstContentfulPaint,
+        timestamp: traceOfTab.timestamps.firstContentfulPaint,
+      };
+    }
+
+    return FirstContentfulPaint.computeLantern(data, artifacts);
+  }
+}
+
+/**
+ * @typedef MetricResult
+ * @property {number} timing
+ * @property {number|undefined} timestamp
+ * @property {number|undefined} optimisticEstimate
+ * @property {number|undefined} pessimisticEstimate
+ * @property {!Node|undefined} optimisticGraph
+ * @property {!Node|undefined} pessimisticGraph
+ */
+
+module.exports = FirstContentfulPaint;