Performance API로 웹 성능 데이터 정밀 수집

웹 성능을 개선하려면 먼저 성능을 ‘측정’해야 한다. 브라우저가 제공하는 Performance API는 페이지 로딩 과정, 자원 요청 시간, 사용자 지연 등을 정밀하게 측정할 수 있는 강력한 도구다.
이 글에서는 Performance API의 핵심 기능과 실전 활용 패턴을 정리한다.

1. 기본: 페이지 로드 타임 측정

Performance API는 로딩 과정의 세부 데이터를 제공한다.

const timing = performance.timing;
const pageLoad = timing.loadEventEnd - timing.navigationStart;
console.log("Page Load Time: ", pageLoad);

2. Performance.now()로 정밀한 시간 측정

performance.now()는 밀리초 단위 고정밀 타이머로, 코드 실행 시간을 측정할 때 유용하다.

const start = performance.now();
heavyTask();
console.log(performance.now() - start);

3. PerformanceObserver로 실시간 성능 이벤트 수집

리소스 로딩, 페인트 이벤트 등을 실시간으로 관찰할 수 있다.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.name, entry.duration);
  });
});

observer.observe({ entryTypes: ["resource", "paint"] });

4. 사용자 지연: Event Timing API 활용

사용자가 입력했을 때 이벤트 처리까지 걸리는 지연을 확인할 수 있다.

observer.observe({ entryTypes: ["event"] });

이를 통해 입력 반응성이 떨어지는 구간을 찾아낼 수 있다.

5. 성능 데이터 서버 전송 패턴

페이지 종료 시점에는 sendBeacon과 함께 사용하면 안전하게 로그를 보낼 수 있다.

window.addEventListener("unload", () => {
  navigator.sendBeacon("/perf", JSON.stringify(performance.getEntries()));
});

마무리

Performance API는 단순 로드 시간 측정이 아니라 리소스, 페인트, 이벤트 등 다양한 성능 요소를 세밀하게 수집할 수 있는 강력한 도구다. 이를 기반으로 실제 사용자 환경에 맞춘 성능 개선 작업을 더 정교하게 수행할 수 있다.