Firefox Tomorrow

web api interface

LayoutShiftAttribution

View on MDN ↗

Limited availability

The LayoutShiftAttribution interface provides debugging information about elements which have shifted.

Instances of LayoutShiftAttribution are returned in an array by calling sources.

Instance properties

  • node Read only Experimental
    • : Returns the element that has shifted (null if it has been removed).
  • previousRect Read only Experimental
    • : Returns a DOMRectReadOnly object representing the position of the element before the shift.
  • currentRect Read only Experimental
    • : Returns a DOMRectReadOnly object representing the position of the element after the shift.

Instance methods

  • toJSON() Experimental
    • : 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

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also