Update LayoutShiftAttribution documentation for impact-area ordering

[anediaz]

Description

Updates the LayoutShiftAttribution interface documentation to reflect the standardization of impact-area ordering for LayoutShift.sources, as implemented in Chrome 143.

Motivation

The Chromium team has defined a standardized ordering for LayoutShiftAttribution entries based on impact area to ensure consistent and predictable behavior across browser implementations.
This documentation update helps developers understand how layout shift sources are ordered and what behavior they can reliably expect when using the Performance API to analyze layout shifts.

Additional details

• Chromium Issue: https://issues.chromium.org/issues/450950606
• Chromium Patch: https://chromium-review.googlesource.com/c/chromium/src/+/7196706
• Target Milestone: Chrome 143
• Component: Blink > PerformanceAPIs

Related issues and pull requests

N/A

[github-actions]

[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

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 this see [Debug Web Vitals in the field](https://web.dev/articles/debug-performance-in-the-field).

[github-actions]

[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

	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 this see [Debug Web Vitals in the field](https://web.dev/articles/debug-performance-in-the-field).

[github-actions]

[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

	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 });
	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 });

[sideshowbarker]

Howdy — this has linter failures that need to be resolved.