자바스크립트 "Layout Instability API"

Layout Instability API는 웹 개발자가 웹 페이지의 시각적 안정성을 측정할 수 있도록 하는 새로운 JavaScript API입니다. 페이지 내용이 로드될 때 예기치 않게 이동할 때 발생하는 레이아웃 이동 문제를 해결하기 위해 도입되었습니다.

​

레이아웃 변경은 페이지와의 상호 작용을 어렵게 만들거나 콘텐츠가 가려지거나 화면 밖으로 밀려날 수 있으므로 사용자에게 실망스러울 수 있습니다. 사용자 참여 및 검색 엔진 순위에 부정적인 영향을 줄 수 있으므로 웹 개발자에게도 문제가 될 수 있습니다.

​

Layout Instability API를 사용하면 개발자가 페이지에서 레이아웃 이동의 양과 기간을 측정할 수 있습니다. CLS(Cumulative Layout Shift) 및 LS(Layout Stability)라는 두 가지 새로운 성능 지표를 제공합니다. 이러한 메트릭을 사용하여 레이아웃 변경을 유발하는 페이지 영역을 식별하고 시간이 지남에 따라 개선 사항을 추적할 수 있습니다.

​

다음은 Layout Instability API를 사용하여 페이지의 CLS를 측정하는 방법의 예입니다.

​

let cls = 0;

​

const observer = new PerformanceObserver((list) => {

for (const entry of list.getEntries()) {

if (entry.entryType === 'layout-shift') {

cls += entry.value;

}

}

});

​

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

​

window.addEventListener('beforeunload', () => {

navigator.sendBeacon('/log-cls', cls);

});

​

이 예에서는 페이지에서 레이아웃 이동 이벤트를 수신 대기하는 `PerformanceObserver`를 만듭니다. 레이아웃 이동 이벤트가 감지될 때마다 페이지에 대한 CLS의 누계에 해당 값을 추가합니다.

​

사용자가 페이지 밖으로 이동하면 `navigator.sendBeacon` 메서드를 사용하여 로깅을 위해 CLS 값을 서버로 보냅니다.

​

다음은 Layout Instability API를 사용하여 페이지의 LS를 측정하는 방법의 예입니다.

​

let lsEntries = [];

​

const observer = new PerformanceObserver((list) => {

for (const entry of list.getEntries()) {

if (entry.entryType === 'layout-shift') {

lsEntries.push(entry);

}

}

});

​

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

​

window.addEventListener('beforeunload', () => {

const totalLsDuration = lsEntries.reduce((acc, cur) => acc + cur.duration, 0);

const lsCount = lsEntries.length;

const ls = lsCount === 0 ? 0 : totalLsDuration / lsCount;

​

navigator.sendBeacon('/log-ls', ls);

});

​

이 예에서는 페이지에서 레이아웃 이동 이벤트를 수신 대기하는 `PerformanceObserver`를 만듭니다. 레이아웃 이동 이벤트가 감지될 때마다 이벤트를 LS 항목 배열에 추가합니다.

​

사용자가 페이지 밖으로 이동하면 모든 LS 이벤트의 총 기간을 LS 이벤트 수로 나누어 LS 값을 계산합니다. 그런 다음 `navigator.sendBeacon` 메서드를 사용하여 로깅을 위해 LS 값을 서버로 보냅니다.

​

이 예는 Layout Instability API를 사용하여 웹 페이지의 시각적 안정성을 측정하는 방법을 보여줍니다. 개발자는 시간 경과에 따라 CLS 및 LS 메트릭을 추적하여 사용자 경험에 부정적인 영향을 미칠 수 있는 레이아웃 변경 문제를 식별하고 수정할 수 있습니다.