Skip to content

Commit

Permalink
core(lhr): rename perf-hint, perf-info, etc (#5102)
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulirish
paulirish authored May 3, 2018
1 parent 4ea3f4d commit 9eb7882
Show file tree
Hide file tree
Showing 11 changed files with 190 additions and 188 deletions.
10 changes: 5 additions & 5 deletions docs/configuration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,9 +153,9 @@ The categories property controls how to score and organize the audit results in
name: 'Performance',
description: 'This category judges your performance',
audits: [
{id: 'first-meaningful-paint', weight: 2, group: 'perf-metric'},
{id: 'first-interactive', weight: 3, group: 'perf-metric'},
{id: 'consistently-interactive', weight: 5, group: 'perf-metric'},
{id: 'first-meaningful-paint', weight: 2, group: 'metrics'},
{id: 'first-interactive', weight: 3, group: 'metrics'},
{id: 'consistently-interactive', weight: 5, group: 'metrics'},
],
}
}
Expand Down Expand Up @@ -184,12 +184,12 @@ The groups property controls how to visually group audits within a category. For
categories: {
performance: {
audits: [
{id: 'my-performance-metric', weight: 2, group: 'perf-metric'},
{id: 'my-performance-metric', weight: 2, group: 'metrics'},
],
}
},
groups: {
'perf-metric': {
'metrics': {
title: 'Metrics',
description: 'These metrics encapsulate your web app\'s performance across a number of dimensions.'
},
Expand Down
2 changes: 1 addition & 1 deletion docs/understanding-results.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ An object containing the display groups of audits for the report, keyed by the g
### Example
```json
{
"perf-metric": {
"metrics": {
"title": "Metrics",
"description": "These metrics are super cool."
},
Expand Down
62 changes: 31 additions & 31 deletions lighthouse-core/config/default-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,15 +188,15 @@ module.exports = {
],

groups: {
'perf-metric': {
'metrics': {
title: 'Metrics',
description: 'These metrics encapsulate your web app\'s performance across a number of dimensions.',
},
'perf-hint': {
'load-opportunities': {
title: 'Opportunities',
description: 'These are opportunities to speed up your application by optimizing the following resources.',
},
'perf-info': {
'diagnostics': {
title: 'Diagnostics',
description: 'More information about the performance of your application.',
},
Expand Down Expand Up @@ -251,38 +251,38 @@ module.exports = {
name: 'Performance',
description: 'These encapsulate your web app\'s current performance and opportunities to improve it.',
audits: [
{id: 'first-contentful-paint', weight: 3, group: 'perf-metric'},
{id: 'first-meaningful-paint', weight: 1, group: 'perf-metric'},
{id: 'speed-index', weight: 4, group: 'perf-metric'},
{id: 'interactive', weight: 5, group: 'perf-metric'},
{id: 'first-cpu-idle', weight: 2, group: 'perf-metric'},
{id: 'estimated-input-latency', weight: 0, group: 'perf-metric'},
{id: 'first-contentful-paint', weight: 3, group: 'metrics'},
{id: 'first-meaningful-paint', weight: 1, group: 'metrics'},
{id: 'speed-index', weight: 4, group: 'metrics'},
{id: 'interactive', weight: 5, group: 'metrics'},
{id: 'first-cpu-idle', weight: 2, group: 'metrics'},
{id: 'estimated-input-latency', weight: 0, group: 'metrics'},

{id: 'render-blocking-resources', weight: 0, group: 'perf-hint'},
{id: 'uses-responsive-images', weight: 0, group: 'perf-hint'},
{id: 'offscreen-images', weight: 0, group: 'perf-hint'},
{id: 'unminified-css', weight: 0, group: 'perf-hint'},
{id: 'unminified-javascript', weight: 0, group: 'perf-hint'},
{id: 'unused-css-rules', weight: 0, group: 'perf-hint'},
{id: 'uses-optimized-images', weight: 0, group: 'perf-hint'},
{id: 'uses-webp-images', weight: 0, group: 'perf-hint'},
{id: 'uses-text-compression', weight: 0, group: 'perf-hint'},
{id: 'uses-rel-preconnect', weight: 0, group: 'perf-hint'},
{id: 'time-to-first-byte', weight: 0, group: 'perf-hint'},
{id: 'redirects', weight: 0, group: 'perf-hint'},
{id: 'uses-rel-preload', weight: 0, group: 'perf-hint'},
{id: 'efficient-animated-content', weight: 0, group: 'perf-hint'},
{id: 'total-byte-weight', weight: 0, group: 'perf-info'},
{id: 'uses-long-cache-ttl', weight: 0, group: 'perf-info'},
{id: 'dom-size', weight: 0, group: 'perf-info'},
{id: 'critical-request-chains', weight: 0, group: 'perf-info'},
{id: 'render-blocking-resources', weight: 0, group: 'load-opportunities'},
{id: 'uses-responsive-images', weight: 0, group: 'load-opportunities'},
{id: 'offscreen-images', weight: 0, group: 'load-opportunities'},
{id: 'unminified-css', weight: 0, group: 'load-opportunities'},
{id: 'unminified-javascript', weight: 0, group: 'load-opportunities'},
{id: 'unused-css-rules', weight: 0, group: 'load-opportunities'},
{id: 'uses-optimized-images', weight: 0, group: 'load-opportunities'},
{id: 'uses-webp-images', weight: 0, group: 'load-opportunities'},
{id: 'uses-text-compression', weight: 0, group: 'load-opportunities'},
{id: 'uses-rel-preconnect', weight: 0, group: 'load-opportunities'},
{id: 'time-to-first-byte', weight: 0, group: 'load-opportunities'},
{id: 'redirects', weight: 0, group: 'load-opportunities'},
{id: 'uses-rel-preload', weight: 0, group: 'load-opportunities'},
{id: 'efficient-animated-content', weight: 0, group: 'load-opportunities'},
{id: 'total-byte-weight', weight: 0, group: 'diagnostics'},
{id: 'uses-long-cache-ttl', weight: 0, group: 'diagnostics'},
{id: 'dom-size', weight: 0, group: 'diagnostics'},
{id: 'critical-request-chains', weight: 0, group: 'diagnostics'},
{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: 'user-timings', weight: 0, group: 'diagnostics'},
{id: 'bootup-time', weight: 0, group: 'diagnostics'},
{id: 'screenshot-thumbnails', weight: 0},
{id: 'mainthread-work-breakdown', weight: 0, group: 'perf-info'},
{id: 'font-display', weight: 0, group: 'perf-info'},
{id: 'mainthread-work-breakdown', weight: 0, group: 'diagnostics'},
{id: 'font-display', weight: 0, group: 'diagnostics'},
],
},
'pwa': {
Expand Down
2 changes: 1 addition & 1 deletion lighthouse-core/config/full-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ module.exports = {
categories: {
'performance': {
audits: [
{id: 'unused-javascript', weight: 0, group: 'perf-hint'},
{id: 'unused-javascript', weight: 0, group: 'load-opportunities'},
],
},
},
Expand Down
95 changes: 48 additions & 47 deletions lighthouse-core/report/html/renderer/performance-category-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,24 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
* @return {!Element}
*/
_renderMetric(audit) {
const tmpl = this.dom.cloneTemplate('#tmpl-lh-perf-metric', this.templateContext);
const element = this.dom.find('.lh-perf-metric', tmpl);
const tmpl = this.dom.cloneTemplate('#tmpl-lh-metric', this.templateContext);
const element = this.dom.find('.lh-metric', tmpl);
element.id = audit.result.name;
// FIXME(paulirish): currently this sets a 'lh-perf-metric--fail' class on error'd audits
element.classList.add(`lh-perf-metric--${Util.calculateRating(audit.result.score)}`);
// FIXME(paulirish): currently this sets a 'lh-metric--fail' class on error'd audits
element.classList.add(`lh-metric--${Util.calculateRating(audit.result.score)}`);

const titleEl = this.dom.find('.lh-perf-metric__title', tmpl);
const titleEl = this.dom.find('.lh-metric__title', tmpl);
titleEl.textContent = audit.result.description;

const valueEl = this.dom.find('.lh-perf-metric__value', tmpl);
const valueEl = this.dom.find('.lh-metric__value', tmpl);
valueEl.textContent = audit.result.displayValue;

const descriptionEl = this.dom.find('.lh-perf-metric__description', tmpl);
const descriptionEl = this.dom.find('.lh-metric__description', tmpl);
descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));

if (audit.result.error) {
element.classList.remove(`lh-perf-metric--fail`);
element.classList.add(`lh-perf-metric--error`);
element.classList.remove(`lh-metric--fail`);
element.classList.add(`lh-metric--error`);
descriptionEl.textContent = '';
valueEl.textContent = 'Error!';
const tooltip = this.dom.createChildOf(descriptionEl, 'span', 'lh-error-tooltip-content');
Expand All @@ -45,19 +45,17 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
* @param {number} scale
* @return {!Element}
*/
_renderPerfHintAudit(audit, scale) {
const tooltipAttrs = {title: audit.result.displayValue};

_renderOpportunity(audit, scale) {
const element = this.dom.createElement('details', [
'lh-perf-hint',
`lh-perf-hint--${Util.calculateRating(audit.result.score)}`,
'lh-load-opportunity',
`lh-load-opportunity--${Util.calculateRating(audit.result.score)}`,
'lh-expandable-details',
].join(' '));
element.id = audit.result.name;

const summary = this.dom.createChildOf(element, 'summary', 'lh-perf-hint__summary ' +
'lh-expandable-details__summary');
const titleEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__title');
const summary = this.dom.createChildOf(element, 'summary', 'lh-load-opportunity__summary ' +
'lh-expandable-details__summary');
const titleEl = this.dom.createChildOf(summary, 'div', 'lh-load-opportunity__title');
titleEl.textContent = audit.result.description;

this.dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'});
Expand All @@ -70,32 +68,35 @@ class PerformanceCategoryRenderer extends CategoryRenderer {

const details = audit.result.details;
const summaryInfo = /** @type {!DetailsRenderer.OpportunitySummary}
*/ (details && details.summary);
*/ (details && details.summary);
// eslint-disable-next-line no-console
console.assert(summaryInfo, 'Missing `summary` for perf-hint audit');
console.assert(summaryInfo, 'Missing `summary` for load-opportunities audit');
// eslint-disable-next-line no-console
console.assert(typeof summaryInfo.wastedMs === 'number',
'Missing numeric `summary.wastedMs` for perf-hint audit');
'Missing numeric `summary.wastedMs` for load-opportunities audit');
if (!summaryInfo || !summaryInfo.wastedMs) {
return element;
}

const sparklineContainerEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__sparkline',
tooltipAttrs);
const elemAttrs = {title: audit.result.displayValue};
const sparklineContainerEl = this.dom.createChildOf(summary, 'div',
'lh-load-opportunity__sparkline', elemAttrs);
const sparklineEl = this.dom.createChildOf(sparklineContainerEl, 'div', 'lh-sparkline');
const sparklineBarEl = this.dom.createChildOf(sparklineEl, 'div', 'lh-sparkline__bar');
sparklineBarEl.style.width = summaryInfo.wastedMs / scale * 100 + '%';

const statsEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__stats', tooltipAttrs);
const statsMsEl = this.dom.createChildOf(statsEl, 'div', 'lh-perf-hint__primary-stat');
const statsEl = this.dom.createChildOf(summary, 'div', 'lh-load-opportunity__stats', elemAttrs);
const statsMsEl = this.dom.createChildOf(statsEl, 'div', 'lh-load-opportunity__primary-stat');
statsMsEl.textContent = Util.formatMilliseconds(summaryInfo.wastedMs);

if (summaryInfo.wastedBytes) {
const statsKbEl = this.dom.createChildOf(statsEl, 'div', 'lh-perf-hint__secondary-stat');
const statsKbEl = this.dom.createChildOf(statsEl, 'div',
'lh-load-opportunity__secondary-stat');
statsKbEl.textContent = Util.formatBytesToKB(summaryInfo.wastedBytes);
}

const descriptionEl = this.dom.createChildOf(element, 'div', 'lh-perf-hint__description');
const descriptionEl = this.dom.createChildOf(element, 'div',
'lh-load-opportunity__description');
descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));

if (audit.result.debugString) {
Expand All @@ -119,16 +120,16 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
this.createPermalinkSpan(element, category.id);
element.appendChild(this.renderCategoryScore(category));

const metricAudits = category.audits.filter(audit => audit.group === 'perf-metric');
const metricAuditsEl = this.renderAuditGroup(groups['perf-metric'], {expandable: false});
const metricAudits = category.audits.filter(audit => audit.group === 'metrics');
const metricAuditsEl = this.renderAuditGroup(groups['metrics'], {expandable: false});

// Metrics
const keyMetrics = metricAudits.filter(a => a.weight >= 3);
const otherMetrics = metricAudits.filter(a => a.weight < 3);

const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metrics-container');
const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metrics-column');
const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metrics-column');
const metricsBoxesEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-metric-container');
const metricsColumn1El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');
const metricsColumn2El = this.dom.createChildOf(metricsBoxesEl, 'div', 'lh-metric-column');

keyMetrics.forEach(item => {
metricsColumn1El.appendChild(this._renderMetric(item));
Expand All @@ -153,30 +154,30 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
element.appendChild(metricAuditsEl);

// Opportunities
const hintAudits = category.audits
.filter(audit => audit.group === 'perf-hint' && audit.result.score < 1)
const opportunityAudits = category.audits
.filter(audit => audit.group === 'load-opportunities' && audit.result.score < 1)
.sort((auditA, auditB) => auditB.result.rawValue - auditA.result.rawValue);
if (hintAudits.length) {
const maxWaste = Math.max(...hintAudits.map(audit => audit.result.rawValue));
if (opportunityAudits.length) {
const maxWaste = Math.max(...opportunityAudits.map(audit => audit.result.rawValue));
const scale = Math.ceil(maxWaste / 1000) * 1000;
const hintAuditsEl = this.renderAuditGroup(groups['perf-hint'], {expandable: false});
hintAudits.forEach(item => hintAuditsEl.appendChild(this._renderPerfHintAudit(item, scale)));
hintAuditsEl.open = true;
element.appendChild(hintAuditsEl);
const groupEl = this.renderAuditGroup(groups['load-opportunities'], {expandable: false});
opportunityAudits.forEach(item => groupEl.appendChild(this._renderOpportunity(item, scale)));
groupEl.open = true;
element.appendChild(groupEl);
}

// Diagnostics
const infoAudits = category.audits
.filter(audit => audit.group === 'perf-info' && audit.result.score < 1);
if (infoAudits.length) {
const infoAuditsEl = this.renderAuditGroup(groups['perf-info'], {expandable: false});
infoAudits.forEach(item => infoAuditsEl.appendChild(this.renderAudit(item)));
infoAuditsEl.open = true;
element.appendChild(infoAuditsEl);
const diagnosticAudits = category.audits
.filter(audit => audit.group === 'diagnostics' && audit.result.score < 1);
if (diagnosticAudits.length) {
const groupEl = this.renderAuditGroup(groups['diagnostics'], {expandable: false});
diagnosticAudits.forEach(item => groupEl.appendChild(this.renderAudit(item)));
groupEl.open = true;
element.appendChild(groupEl);
}

const passedElements = category.audits
.filter(audit => (audit.group === 'perf-hint' || audit.group === 'perf-info') &&
.filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') &&
audit.result.score === 1)
.map(audit => this.renderAudit(audit));

Expand Down
Loading

0 comments on commit 9eb7882

Please sign in to comment.