Performance API로 어떤 성능 지표를 측정할 수 있나요?

Performance API는 navigation, resource, paint timing과 Web Vitals 관련 지표를 수집할 수 있습니다. 실제 사용자 환경의 병목을 파악하는 데 도움이 됩니다.

핵심 개념

핵심 기준은 로드 단계와 사용자 경험 지표 측정입니다.

Performance API는 페이지 로드, 리소스 다운로드, 페인트, 사용자 상호작용 시점에 대한 브라우저 측정값을 제공합니다. Navigation Timing은 문서 로드 단계를, Resource Timing은 느린 리소스를, PerformanceObserver는 LCP/CLS/INP 같은 사용자 경험 지표 수집에 활용됩니다.

동작 흐름

1. 브라우저의 어느 단계나 API가 관여하는지 확인합니다.
2. 사용자 경험, 보안, 접근성에 미치는 영향을 함께 봅니다.
3. DevTools나 실제 지표로 추측을 검증합니다.
4. 적용 후 캐시, 호환성, 예외 상황을 점검합니다.

실제 예시

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.entryType, entry.name, entry.duration);
  }
});
observer.observe({ type: 'resource', buffered: true });

예시는 핵심 흐름을 단순화한 것입니다. 실무에서는 팀의 배포 방식, 데이터 크기, 장애 영향도, 유지보수 비용까지 함께 고려해야 합니다.

실무에서 주의할 점

• 브라우저 구현 차이와 모바일 환경을 함께 확인해야 합니다.
• 성능 문제는 JavaScript만 보지 말고 네트워크와 렌더링 상태를 같이 봐야 합니다.
• 보안·접근성 기능은 편의성보다 안전한 기본값을 우선해야 합니다.

함께 연결해서 보면 좋은 키워드

PerformanceAPI, WebVitals, RUM, Performance

정리

한 줄로 정리하면, Performance API는 navigation, resource, paint timing과 Web Vitals 관련 지표를 수집할 수 있습니다. 실제 사용자 환경의 병목을 파악하는 데 도움이 됩니다. 개념의 정의뿐 아니라 적용 조건과 실패했을 때의 증상까지 함께 이해하는 것이 중요합니다.