W3cubDocs

/Web APIs

LayoutShift: value property

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.

js

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
value 77 79 No No 64 No 77 77 No 55 No 12.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift/value