LayoutShiftAttribution

Instance properties

LayoutShiftAttribution.node Read only

Returns the element that has shifted (null if it has been removed).

LayoutShiftAttribution.previousRect Read only

Returns a DOMRectReadOnly object representing the position of the element before the shift.

LayoutShiftAttribution.currentRect Read only

Returns a DOMRectReadOnly object representing the position of the element after the shift.

Instance methods

LayoutShiftAttribution.toJSON()

Returns a JSON representation of the LayoutShiftAttribution object.

Examples

The following example observes layout shifts and identifies the most impactful element. The sources array is sorted by impact area, in descending order — so the first element (sources[0]) represents the element that contributed most to the layout shift. For more detail on that, see Debug Web Vitals in the field.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.sources || entry.sources.length === 0) continue;

    const mostImpactfulSource = entry.sources[0];
    console.log("Layout shift score:", entry.value);
    console.log("Most impactful element:", largestShiftSource.node);
    console.log("Previous position:", largestShiftSource.previousRect);
    console.log("Current position:", largestShiftSource.currentRect);
  }
});

observer.observe({ type: "layout-shift", buffered: true });

Specifications

Browser compatibility

See also

• Debug layout shifts
• Debug Web Vitals in the field