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

Jump to bottom

core(layout-shift-elements): mention windowing in description #15680

Merged
merged 2 commits into from
Dec 11, 2023
Merged

core(layout-shift-elements): mention windowing in description #15680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4ee5569
core(layout-shift-elements): mention CLS normalization in description
adamraine Dec 9, 2023
f67788c
rephrase
adamraine Dec 11, 2023
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
20 changes: 12 additions & 8 deletions core/audits/layout-shift-elements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
import CumulativeLayoutShift from './metrics/cumulative-layout-shift.js';

const UIStrings = {
/** Descriptive title of a diagnostic audit that provides up to the top five elements contributing to Cumulative Layout Shift. */
/** Descriptive title of a diagnostic audit that provides the top elements affected by layout shifts. */
title: 'Avoid large layout shifts',
/** Description of a diagnostic audit that provides up to the top five elements contributing to Cumulative Layout Shift. The last sentence starting with 'Learn' becomes link text to additional documentation. */
description: 'These DOM elements contribute most to the CLS of the page. [Learn how to improve CLS](https://web.dev/articles/optimize-cls)',
/** Label for a column in a data table; entries in this column will be the amount that the corresponding element contributes to the total CLS metric score. */
columnContribution: 'CLS Contribution',
/** Description of a diagnostic audit that provides the top elements affected by layout shifts. "windowing" means the metric value is calculated using the subset of events in a small window of time during the run. "normalization" is a good substitute for "windowing". The last sentence starting with 'Learn' becomes link text to additional documentation. */
description: 'These DOM elements were most affected by layout shifts. Some layout shifts may not be included in the CLS metric value due to [windowing](https://web.dev/articles/cls#what_is_cls). [Learn how to improve CLS](https://web.dev/articles/optimize-cls)',
/** Label for a column in a data table; entries in this column will be the amount that the corresponding element affected by layout shifts. */
columnContribution: 'Layout shift impact',
};

const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
Expand Down Expand Up @@ -52,14 +52,18 @@
}));

if (clsElementData.length < impactByNodeId.size) {
const elementDataImpact = clsElementData.reduce((sum, {score}) => sum += score || 0, 0);
const remainingImpact = Math.max(clsSavings - elementDataImpact, 0);
const displayedNodeImpact = clsElementData.reduce((sum, {score}) => sum += score, 0);

// This is not necessarily the same as CLS due to normalization.
const totalNodeImpact = Array.from(impactByNodeId.values())
.reduce((sum, score) => sum + score);

Check warning on line 60 in core/audits/layout-shift-elements.js

View check run for this annotation

Codecov / codecov/patch

core/audits/layout-shift-elements.js#L55-L60 

Added lines #L55 - L60 were not covered by tests
clsElementData.push({
node: {
type: 'code',
value: str_(i18n.UIStrings.otherResourceType),
},
score: remainingImpact,
score: totalNodeImpact - displayedNodeImpact,

Check warning on line 66 in core/audits/layout-shift-elements.js

View check run for this annotation

Codecov / codecov/patch

core/audits/layout-shift-elements.js#L66 

Added line #L66 was not covered by tests
});
}

Expand Down
10 changes: 5 additions & 5 deletions core/test/fixtures/user-flows/reports/sample-flow-result.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1738,7 +1738,7 @@
"layout-shift-elements": {
"id": "layout-shift-elements",
"title": "Avoid large layout shifts",
"description": "These DOM elements contribute most to the CLS of the page. [Learn how to improve CLS](https://web.dev/articles/optimize-cls)",
"description": "These DOM elements were most affected by layout shifts. Some layout shifts may not be included in the CLS metric value due to [windowing](https://web.dev/articles/cls#what_is_cls). [Learn how to improve CLS](https://web.dev/articles/optimize-cls)",
"score": null,
"scoreDisplayMode": "informative",
"displayValue": "5 elements found",
Expand All @@ -1757,7 +1757,7 @@
"key": "score",
"valueType": "numeric",
"granularity": 0.001,
"label": "CLS Contribution"
"label": "Layout shift impact"
}
],
"items": [
Expand Down Expand Up @@ -9863,7 +9863,7 @@
"layout-shift-elements": {
"id": "layout-shift-elements",
"title": "Avoid large layout shifts",
"description": "These DOM elements contribute most to the CLS of the page. [Learn how to improve CLS](https://web.dev/articles/optimize-cls)",
"description": "These DOM elements were most affected by layout shifts. Some layout shifts may not be included in the CLS metric value due to [windowing](https://web.dev/articles/cls#what_is_cls). [Learn how to improve CLS](https://web.dev/articles/optimize-cls)",
"score": 0,
"scoreDisplayMode": "metricSavings",
"displayValue": "1 element found",
Expand All @@ -9882,7 +9882,7 @@
"key": "score",
"valueType": "numeric",
"granularity": 0.001,
"label": "CLS Contribution"
"label": "Layout shift impact"
}
],
"items": [
Expand Down Expand Up @@ -19644,7 +19644,7 @@
"layout-shift-elements": {
"id": "layout-shift-elements",
"title": "Avoid large layout shifts",
"description": "These DOM elements contribute most to the CLS of the page. [Learn how to improve CLS](https://web.dev/articles/optimize-cls)",
"description": "These DOM elements were most affected by layout shifts. Some layout shifts may not be included in the CLS metric value due to [windowing](https://web.dev/articles/cls#what_is_cls). [Learn how to improve CLS](https://web.dev/articles/optimize-cls)",
"score": null,
"scoreDisplayMode": "notApplicable",
"metricSavings": {
Expand Down
4 changes: 2 additions & 2 deletions core/test/results/sample_v2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2468,7 +2468,7 @@
"layout-shift-elements": {
"id": "layout-shift-elements",
"title": "Avoid large layout shifts",
"description": "These DOM elements contribute most to the CLS of the page. [Learn how to improve CLS](https://web.dev/articles/optimize-cls)",
"description": "These DOM elements were most affected by layout shifts. Some layout shifts may not be included in the CLS metric value due to [windowing](https://web.dev/articles/cls#what_is_cls). [Learn how to improve CLS](https://web.dev/articles/optimize-cls)",
"score": 0,
"scoreDisplayMode": "metricSavings",
"displayValue": "5 elements found",
Expand All @@ -2487,7 +2487,7 @@
"key": "score",
"valueType": "numeric",
"granularity": 0.001,
"label": "CLS Contribution"
"label": "Layout shift impact"
}
],
"items": [
Expand Down
4 changes: 2 additions & 2 deletions shared/localization/locales/en-US.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions shared/localization/locales/en-XL.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading