Skip to content

Commit

Permalink
Update links to CLS
Browse files Browse the repository at this point in the history
  • Loading branch information
wbamberg committed May 14, 2024
1 parent 384b1c2 commit a9885bd
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 4 deletions.
2 changes: 1 addition & 1 deletion files/en-us/learn/performance/multimedia/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ Browsers begin rendering content as HTML is parsed, often before all assets, inc

Without the `width` and `height` attributes, no placeholder space is created, creating a noticeable {{glossary('jank')}}, or layout shift, in the page when the image loads after the page is rendered. Page reflow and repaints are performance and usability issues.

The [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) metric measures jank on page load, or how much visible content shifts in the viewport and by how much. The main culprits of bad CLS are replaced elements without declared dimensions that reflow when the asset loads, including images, ad, embeds, and iframes without an size or {{cssxref("aspect-ratio")}} and web fonts.
The {{glossary("CLS")}} metric measures jank on page load, or how much visible content shifts in the viewport and by how much. The main culprits of bad CLS are replaced elements without declared dimensions that reflow when the asset loads, including images, ad, embeds, and iframes without an size or {{cssxref("aspect-ratio")}} and web fonts.

In responsive designs, when a container is narrower than an image, the following CSS is generally used to keep images from breaking out of their containers:

Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/layoutshift/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ A layout shift happens when any element that is visible in the viewport changes

The Layout Instability API provides a way to measure and report on these layout shifts. All tools for debugging layout shifts, including those in the browser's developer tools, use this API. The API can also be used to observe and debug layout shifts by logging the information to the console, to send the data to a server endpoint, or to web page analytics.

Popular performance tools, use this API to calculate a [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) score.
Performance tools can use this API to calculate a {{glossary("CLS")}} score.

{{InheritanceDiagram}}

Expand Down Expand Up @@ -87,4 +87,4 @@ observer.observe({ type: "layout-shift", buffered: true });
## See also

- {{domxref("LayoutShiftAttribution")}}
- [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls)
- {{glossary("CLS")}}
2 changes: 1 addition & 1 deletion files/en-us/web/api/layoutshift/lastinputtime/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ browser-compat: api.LayoutShift.lastInputTime

The **`lastInputTime`** read-only property of the {{domxref("LayoutShift")}} interface returns the time of the most recent excluding input or `0` if no excluding input has occurred.

Layout shifts are only bad if the user wasn't expecting them. Many layout shift metrics (like [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls)) exclude shifts that occurred soon after certain user interactions. These interactions are called _excluding inputs_. Excluding inputs are:
Layout shifts are only bad if the user wasn't expecting them. Layout shift metrics like {{glossary("CLS")}} exclude shifts that occurred soon after certain user interactions. These interactions are called _excluding inputs_. Excluding inputs are:

- Any events which signal a user's active interaction with the document: ([`mousedown`](/en-US/docs/Web/API/Element/mousedown_event), [`keydown`](/en-US/docs/Web/API/Element/keydown_event), and [`pointerdown`](/en-US/docs/Web/API/Element/pointerdown_event))
- Any events which directly changes the size of the viewport.
Expand Down

0 comments on commit a9885bd

Please sign in to comment.