LayoutShift: value property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The value read-only property of the LayoutShift interface returns the layout shift score calculated as the impact fraction (fraction of the viewport that was shifted) multiplied by the distance fraction (distance moved as a fraction of viewport).
Value
A number between 0.0 and 1.0 indicating the layout shift score.
It is calculated as the impact fraction (fraction of the viewport that was shifted) multiplied by the distance fraction (distance moved as a fraction of viewport).
layout shift score = impact fraction * distance fraction
For more details, see Layout shift score on web.dev.
Examples
Logging the entry's layout shift score
The following example shows how use the value property to log the layout shift score.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Count layout shifts without recent user input only
if (!entry.hadRecentInput) {
console.log("Entry's layout shift score:", entry.value);
}
}
});
observer.observe({ type: "layout-shift", buffered: true });
Specifications
| Specification |
|---|
| Layout Instability API # dom-layoutshift-value |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
value
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.