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).
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.
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()) {
if (!entry.hadRecentInput) {
console.log("Entry's layout shift score:", entry.value);
}
}
});
observer.observe({ type: "layout-shift", buffered: true });