Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core(lhr): rename perf-hint, perf-info, etc #5102

Merged
merged 7 commits into from
May 3, 2018
Merged

core(lhr): rename perf-hint, perf-info, etc #5102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
08eab5d
core(lhr): rename perf-hint, etc.
paulirish May 3, 2018
cc2ae7c
final varname renames within the JS
paulirish May 3, 2018
c249d14
fix merge
paulirish May 3, 2018
cae32d6
feedback.
paulirish May 3, 2018
13e3dc4
lint
paulirish May 3, 2018
eb02a7f
Merge branch 'master' into perfhint-renames
paulirish May 3, 2018
c99fe08
it fits.
paulirish May 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/configuration.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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