core(metrics): move FMP to computed artifact

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

@@ -7,7 +7,6 @@
 
 const Audit = require('./audit');
 const Util = require('../report/v2/renderer/util');
-const LHError = require('../lib/errors');
 
 class FirstMeaningfulPaint extends Audit {
  /**
@@ -43,75 +42,20 @@ class FirstMeaningfulPaint extends Audit {
  * @param {LH.Audit.Context} context
  * @return {!Promise<!AuditResult>}
  */
- static audit(artifacts, context) {
- const trace = artifacts.traces[this.DEFAULT_PASS];
- return artifacts.requestTraceOfTab(trace).then(tabTrace => {
- if (!tabTrace.firstMeaningfulPaintEvt) {
- throw new LHError(LHError.errors.NO_FMP);
- }
-
- // navigationStart is currently essential to FMP calculation.
- // see: https://github.com/GoogleChrome/lighthouse/issues/753
- if (!tabTrace.navigationStartEvt) {
- throw new LHError(LHError.errors.NO_NAVSTART);
- }
-
- const result = this.calculateScore(tabTrace, context);
-
- return {
- score: result.score,
- rawValue: parseFloat(result.duration),
- displayValue: Util.formatMilliseconds(result.duration),
- debugString: result.debugString,
- extendedInfo: {
- value: result.extendedInfo,
- },
- };
- });
- }
-
- static calculateScore(traceOfTab, context) {
- // Expose the raw, unchanged monotonic timestamps from the trace, along with timing durations
- const extendedInfo = {
- timestamps: {
- navStart: traceOfTab.timestamps.navigationStart,
- fCP: traceOfTab.timestamps.firstContentfulPaint,
- fMP: traceOfTab.timestamps.firstMeaningfulPaint,
- onLoad: traceOfTab.timestamps.onLoad,
- endOfTrace: traceOfTab.timestamps.traceEnd,
- },
- timings: {
- navStart: 0,
- fCP: traceOfTab.timings.firstContentfulPaint,
- fMP: traceOfTab.timings.firstMeaningfulPaint,
- onLoad: traceOfTab.timings.onLoad,
- endOfTrace: traceOfTab.timings.traceEnd,
- },
- fmpFellBack: traceOfTab.fmpFellBack,
- };
-
- Object.keys(extendedInfo.timings).forEach(key => {
- const val = extendedInfo.timings[key];
- if (typeof val !== 'number' || Number.isNaN(val)) {
- extendedInfo.timings[key] = undefined;
- extendedInfo.timestamps[key] = undefined;
- } else {
- extendedInfo.timings[key] = parseFloat(extendedInfo.timings[key].toFixed(3));
- }
- });
-
- const firstMeaningfulPaint = traceOfTab.timings.firstMeaningfulPaint;
- const score = Audit.computeLogNormalScore(
- firstMeaningfulPaint,
- context.options.scorePODR,
- context.options.scoreMedian
- );
+ static async audit(artifacts, context) {
+ const trace = artifacts.traces[Audit.DEFAULT_PASS];
+ const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+ const metricComputationData = {trace, devtoolsLog, settings: context.settings};
+ const metricResult = await artifacts.requestFirstMeaningfulPaint(metricComputationData);
 
  return {
- score,
- duration: firstMeaningfulPaint.toFixed(1),
- rawValue: firstMeaningfulPaint,
- extendedInfo,
+ score: Audit.computeLogNormalScore(
+ metricResult.timing,
+ context.options.scorePODR,
+ context.options.scoreMedian
+ ),
+ rawValue: metricResult.timing,
+ displayValue: Util.formatMilliseconds(metricResult.timing),
  };
  }
 }

lighthouse-core/audits/metrics.js

@@ -0,0 +1,68 @@
+/**
+ * @license Copyright 2018 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 Metrics extends Audit {
+ /**
+ * @return {!AuditMeta}
+ */
+ static get meta() {
+ return {
+ name: 'metrics',
+ informative: true,
+ description: 'Metrics',
+ helpText: 'Collects all available metrics.',
+ requiredArtifacts: ['traces', 'devtoolsLogs'],
+ };
+ }
+
+ /**
+ * @param {!Artifacts} artifacts
+ * @return {!AuditResult}
+ */
+ static async audit(artifacts, context) {
+ const trace = artifacts.traces[Audit.DEFAULT_PASS];
+ const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+ const metricComputationData = {trace, devtoolsLog, settings: context.settings};
+
+ const traceOfTab = await artifacts.requestTraceOfTab(trace);
+ const firstContentfulPaint = await artifacts.requestFirstContentfulPaint(metricComputationData);
+ const firstMeaningfulPaint = await artifacts.requestFirstMeaningfulPaint(metricComputationData);
+ const timeToInteractive = await artifacts.requestConsistentlyInteractive(metricComputationData);
+ const metrics = [];
+
+ // Include the simulated/observed performance metrics
+ const metricsMap = {firstContentfulPaint, firstMeaningfulPaint, timeToInteractive};
+ for (const [metricName, values] of Object.entries(metricsMap)) {
+ metrics.push(Object.assign({metricName}, values));
+ }
+
+ // Include all timestamps of interest from trace of tab
+ for (const [traceEventName, timing] of Object.entries(traceOfTab.timings)) {
+ const uppercased = traceEventName.slice(0, 1).toUpperCase() + traceEventName.slice(1);
+ const metricName = `trace${uppercased}`;
+ const timestamp = traceOfTab.timestamps[traceEventName];
+ metrics.push({metricName, timing, timestamp});
+ }
+
+ const headings = [
+ {key: 'metricName', itemType: 'text', text: 'Name'},
+ {key: 'timing', itemType: 'ms', granularity: 10, text: 'Value (ms)'},
+ ];
+
+ const tableDetails = Audit.makeTableDetails(headings, metrics);
+
+ return {
+ score: 1,
+ rawValue: timeToInteractive.timing,
+ details: tableDetails,
+ };
+ }
+}
+
+module.exports = Metrics;

lighthouse-core/config/default-config.js

@@ -100,6 +100,7 @@ module.exports = {
  'uses-rel-preload',
  'font-display',
  'network-requests',
+ 'metrics',
  'manual/pwa-cross-browser',
  'manual/pwa-page-transitions',
  'manual/pwa-each-page-has-url',
@@ -287,6 +288,7 @@ module.exports = {
  {id: 'dom-size', weight: 0, group: 'perf-info'},
  {id: 'critical-request-chains', weight: 0, group: 'perf-info'},
  {id: 'network-requests', weight: 0},
+ {id: 'metrics', weight: 0},
  {id: 'user-timings', weight: 0, group: 'perf-info'},
  {id: 'bootup-time', weight: 0, group: 'perf-info'},
  {id: 'screenshot-thumbnails', weight: 0},

lighthouse-core/gather/computed/metrics/first-meaningful-paint.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright 2018 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 MetricArtifact = require('./metric');
+const LHError = require('../../../lib/errors');
+
+class FirstMeaningfulPaint extends MetricArtifact {
+ get name() {
+ return 'FirstMeaningfulPaint';
+ }
+
+ /**
+ * @param {LH.Artifacts.MetricComputationData} data
+ * @return {Promise<LH.Artifacts.Metric>}
+ */
+ computeObservedMetric(data) {
+ const {traceOfTab} = data;
+ if (!traceOfTab.timestamps.firstMeaningfulPaint) {
+ throw new LHError(LHError.errors.NO_FMP);
+ }
+
+ return Promise.resolve({
+ timing: traceOfTab.timings.firstMeaningfulPaint,
+ timestamp: traceOfTab.timestamps.firstMeaningfulPaint,
+ });
+ }
+}
+
+module.exports = FirstMeaningfulPaint;

lighthouse-core/gather/computed/trace-of-tab.js

@@ -92,7 +92,7 @@ class TraceOfTab extends ComputedArtifact {
  firstMeaningfulPaint = lastCandidate;
  }
 
- const onLoad = frameEvents.find(e => e.name === 'loadEventEnd' && e.ts > navigationStart.ts);
+ const load = frameEvents.find(e => e.name === 'loadEventEnd' && e.ts > navigationStart.ts);
  const domContentLoaded = frameEvents.find(
  e => e.name === 'domContentLoadedEventEnd' && e.ts > navigationStart.ts
  );
@@ -116,7 +116,7 @@ class TraceOfTab extends ComputedArtifact {
  firstContentfulPaint,
  firstMeaningfulPaint,
  traceEnd: {ts: traceEnd.ts + (traceEnd.dur || 0)},
- onLoad,
+ load,
  domContentLoaded,
  };
 
@@ -138,7 +138,8 @@ class TraceOfTab extends ComputedArtifact {
  firstPaintEvt: firstPaint,
  firstContentfulPaintEvt: firstContentfulPaint,
  firstMeaningfulPaintEvt: firstMeaningfulPaint,
- onLoadEvt: onLoad,
+ loadEvt: load,
+ domContentLoadedEvt: domContentLoaded,
  fmpFellBack,
  };
  }

lighthouse-core/lib/traces/pwmetrics-events.js

@@ -24,6 +24,16 @@ function safeGet(object, path) {
  return object;
 }
 
+function findValueInMetricsAuditFn(metricName, timingOrTimestamp) {
+ return auditResults => {
+ const metricsAudit = auditResults.metrics;
+ if (!metricsAudit || !metricsAudit.details || !metricsAudit.details.items) return;
+
+ const values = metricsAudit.details.items.find(item => item.metricName === metricName);
+ return values && values[timingOrTimestamp];
+ };
+}
+
 class Metrics {
  constructor(traceEvents, auditResults) {
  this._traceEvents = traceEvents;
@@ -39,38 +49,20 @@ class Metrics {
  {
  name: 'Navigation Start',
  id: 'navstart',
- getTs: auditResults => {
- const fmpExt = auditResults['first-meaningful-paint'].extendedInfo;
- return safeGet(fmpExt, 'value.timestamps.navStart');
- },
- getTiming: auditResults => {
- const fmpExt = auditResults['first-meaningful-paint'].extendedInfo;
- return safeGet(fmpExt, 'value.timings.navStart');
- },
+ getTs: findValueInMetricsAuditFn('traceNavigationStart', 'timestamp'),
+ getTiming: findValueInMetricsAuditFn('traceNavigationStart', 'timing'),
  },
  {
  name: 'First Contentful Paint',
  id: 'ttfcp',
- getTs: auditResults => {
- const fmpExt = auditResults['first-meaningful-paint'].extendedInfo;
- return safeGet(fmpExt, 'value.timestamps.fCP');
- },
- getTiming: auditResults => {
- const fmpExt = auditResults['first-meaningful-paint'].extendedInfo;
- return safeGet(fmpExt, 'value.timings.fCP');
- },
+ getTs: findValueInMetricsAuditFn('traceFirstContentfulPaint', 'timestamp'),
+ getTiming: findValueInMetricsAuditFn('traceFirstContentfulPaint', 'timing'),
  },
  {
  name: 'First Meaningful Paint',
  id: 'ttfmp',
- getTs: auditResults => {
- const fmpExt = auditResults['first-meaningful-paint'].extendedInfo;
- return safeGet(fmpExt, 'value.timestamps.fMP');
- },
- getTiming: auditResults => {
- const fmpExt = auditResults['first-meaningful-paint'].extendedInfo;
- return safeGet(fmpExt, 'value.timings.fMP');
- },
+ getTs: findValueInMetricsAuditFn('traceFirstMeaningfulPaint', 'timestamp'),
+ getTiming: findValueInMetricsAuditFn('traceFirstMeaningfulPaint', 'timing'),
  },
  {
  name: 'Perceptual Speed Index',
@@ -147,26 +139,20 @@ class Metrics {
  {
  name: 'End of Trace',
  id: 'eot',
- getTs: auditResults => {
- const ttiExt = auditResults['first-meaningful-paint'].extendedInfo;
- return safeGet(ttiExt, 'value.timestamps.endOfTrace');
- },
- getTiming: auditResults => {
- const ttiExt = auditResults['first-meaningful-paint'].extendedInfo;
- return safeGet(ttiExt, 'value.timings.endOfTrace');
- },
+ getTs: findValueInMetricsAuditFn('traceTraceEnd', 'timestamp'),
+ getTiming: findValueInMetricsAuditFn('traceTraceEnd', 'timing'),
  },
  {
  name: 'On Load',
  id: 'onload',
- getTs: auditResults => {
-  const ttiExt = auditResults['first-meaningful-paint'].extendedInfo;
-  return safeGet(ttiExt, 'value.timestamps.onLoad');
-  },
- getTiming: auditResults => {
-  const ttiExt = auditResults['first-meaningful-paint'].extendedInfo;
-  return safeGet(ttiExt, 'value.timings.onLoad');
- },
+ getTs: findValueInMetricsAuditFn('traceLoad', 'timestamp'),
+ getTiming: findValueInMetricsAuditFn('traceLoad', 'timing'),
+ },
+ {
+ name: 'DOM Content Loaded',
+ id: 'dcl',
+ getTs: findValueInMetricsAuditFn('traceDomContentLoaded', 'timestamp'),
+ getTiming: findValueInMetricsAuditFn('traceDomContentLoaded', 'timing'),
  },
  ];
  }