Performance Observer API: 런타임 성능 지표 및 병목 현상 분석

오늘날 경쟁이 치열한 디지털 환경에서 웹사이트와 웹 애플리케이션의 성능은 사용자 참여와 비즈니스 성공에 매우 중요합니다. 느린 로딩 시간과 반응 없는 인터페이스는 사용자의 불만, 거래 포기, 그리고 궁극적으로는 수익 손실로 이어질 수 있습니다. Performance Observer API는 개발자가 런타임 성능 지표를 모니터링 및 분석하고, 병목 현상을 식별하며, 사용자의 위치나 기기에 관계없이 더 부드럽고 빠르며 즐거운 사용자 경험을 위해 애플리케이션을 최적화할 수 있도록 지원하는 강력한 도구입니다.

Performance Observer API란 무엇인가?

Performance Observer API는 웹 애플리케이션에서 성능 관련 이벤트가 발생할 때 이를 관찰하고 반응하는 메커니즘을 제공하는 자바스크립트 API입니다. 주기적인 샘플링이나 수동 계측에 의존하는 기존의 성능 모니터링 기술과 달리, Performance Observer API는 실시간으로 성능 데이터를 캡처하는 더 효율적이고 유연한 방법을 제공합니다. 이를 통해 개발자는 특정 성능 항목 유형을 구독하고 새로운 항목이 기록될 때마다 알림을 받을 수 있습니다.

이러한 "관찰 후 반응" 접근 방식은 사전 예방적인 성능 모니터링을 가능하게 하여, 개발자가 성능 문제가 사용자 경험에 영향을 미치기 전에 이를 식별하고 해결할 수 있도록 합니다. 이 API는 최신 브라우저 전반에 걸쳐 표준화되어 있어 일관된 동작과 크로스 플랫폼 호환성을 보장합니다.

주요 개념 및 기능

Performance Observer API를 효과적으로 활용하려면 핵심 개념과 기능을 이해하는 것이 중요합니다.

• PerformanceEntry: 단일 성능 측정 또는 이벤트를 나타냅니다. 성능 항목에는 이벤트 유형, 시작 및 종료 시간, 기타 관련 속성에 대한 정보가 포함됩니다. 예시로는 resource, mark, measure, navigation, longtask, event 등이 있습니다.
• PerformanceObserver: 특정 성능 항목 유형을 구독하고 브라우저의 성능 타임라인에 새로운 항목이 추가될 때마다 알림을 받을 수 있게 해주는 객체입니다.
• observe() 메서드: 특정 성능 항목 유형을 수신하도록 PerformanceObserver를 구성하는 데 사용됩니다. 관찰하려는 항목 유형과 과거 항목을 받기 위한 buffered 옵션을 지정할 수 있습니다.
• disconnect() 메서드: PerformanceObserver가 성능 이벤트를 수신하는 것을 중지하는 데 사용됩니다.
• takeRecords() 메서드: 관찰되었지만 아직 옵저버의 콜백 함수에 의해 처리되지 않은 모든 성능 항목의 배열을 반환합니다.
• 콜백 함수: 새로운 성능 항목이 관찰될 때마다 실행되는 함수입니다. 이 함수는 관찰된 항목을 포함하는 PerformanceObserverEntryList 객체를 받습니다.

지원되는 성능 항목 유형

Performance Observer API는 다양한 성능 항목 유형을 지원하며, 각 유형은 웹 애플리케이션 성능의 다양한 측면에 대한 구체적인 통찰력을 제공합니다. 가장 일반적으로 사용되는 항목 유형은 다음과 같습니다.

• resource: 이미지, 스크립트, 스타일시트, 폰트와 같은 개별 리소스의 로딩에 대한 정보를 제공합니다. 이 항목 유형에는 리소스 URL, 시작 및 종료 시간, 가져오기(fetch) 시간, 전송 크기 등의 세부 정보가 포함됩니다.
• mark: 특정 코드 섹션의 지속 시간을 측정하기 위해 코드 내에 사용자 지정 타임스탬프를 생성할 수 있습니다. 마크를 사용하여 데이터 처리나 UI 렌더링과 같은 중요한 작업의 시작과 끝을 추적할 수 있습니다.
• measure: 두 마크 사이의 지속 시간을 계산하는 데 사용됩니다. 이 항목 유형은 사용자 지정 코드 섹션의 성능을 측정하는 편리한 방법을 제공합니다.
• navigation: DNS 조회 시간, TCP 연결 시간, 요청 및 응답 시간, DOM 처리 시간을 포함한 페이지의 네비게이션 타이밍에 대한 정보를 제공합니다.
• longtask: 메인 스레드를 장시간(일반적으로 50밀리초 이상) 차단하는 작업을 식별합니다. 긴 작업은 UI 반응성 저하와 버벅거림(jank)을 유발할 수 있습니다.
• event: click, keydown, scroll과 같은 특정 브라우저 이벤트에 대한 타이밍 정보를 기록합니다.
• layout-shift: 페이지에서 예기치 않은 레이아웃 변경을 추적합니다. 이러한 변경은 사용자에게 불편함을 주고 사용자 경험에 부정적인 영향을 미칠 수 있습니다.
• largest-contentful-paint: 가장 큰 콘텐츠 요소가 페이지에 표시되기까지 걸리는 시간을 측정합니다.
• first-input-delay: 브라우저가 첫 번째 사용자 상호작용(예: 클릭 또는 탭)에 응답하는 데 걸리는 시간을 측정합니다.
• element: 페이지의 특정 요소 렌더링에 대한 타이밍 정보를 보고합니다.

실용적인 예제 및 사용 사례

Performance Observer API는 웹 애플리케이션 성능을 개선하기 위해 다양한 시나리오에서 사용될 수 있습니다. 다음은 몇 가지 실용적인 예제입니다.

1. 리소스 로딩 시간 모니터링

resource 항목 유형을 사용하면 이미지, 스크립트, 스타일시트와 같은 개별 리소스의 로딩 시간을 추적할 수 있습니다. 이 정보는 페이지 로드 시간에 영향을 미치는 느린 리소스를 식별하는 데 사용될 수 있습니다. 예를 들어, 다음 코드를 사용하여 리소스 로딩 시간을 모니터링할 수 있습니다.

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

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

            

              
                Copy
              
            
          

이 코드는 resource 항목을 수신하고 리소스 URL과 지속 시간을 콘솔에 기록하는 PerformanceObserver를 생성합니다. 이 데이터를 분석하여 느리게 로딩되는 리소스를 식별하고 이미지를 압축하거나, 콘텐츠 전송 네트워크(CDN)를 사용하거나, 서버 구성을 최적화하여 개선할 수 있습니다.

글로벌 관점: 리소스 로딩 시간을 모니터링할 때 사용자의 지리적 위치를 고려하세요. 인터넷 연결이 느린 지역의 사용자는 훨씬 더 긴 로딩 시간을 경험할 수 있습니다. 지리적으로 분산된 서버를 갖춘 CDN을 사용하면 이 문제를 완화하는 데 도움이 될 수 있습니다.

2. 사용자 지정 코드 실행 시간 측정

mark 및 measure 항목 유형을 사용하면 사용자 지정 코드 섹션의 실행 시간을 측정할 수 있습니다. 이는 애플리케이션 로직의 성능 병목 현상을 식별하는 데 유용합니다. 예를 들어, 다음 코드를 사용하여 특정 함수의 지속 시간을 측정할 수 있습니다.

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

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

            

              
                Copy
              
            
          

이 코드는 측정하려는 코드 섹션 앞뒤에 start와 end라는 두 개의 마크를 생성합니다. 그런 다음 performance.measure() 메서드를 사용하여 두 마크 사이의 지속 시간을 계산합니다. PerformanceObserver는 measure 항목을 수신하고 측정 이름과 지속 시간을 콘솔에 기록합니다. 이 데이터를 분석하여 성능이 저하된 코드 섹션을 식별하고 캐싱, 메모이제이션 또는 알고리즘 최적화와 같은 기술을 사용하여 최적화할 수 있습니다.

실행 가능한 인사이트: 애플리케이션의 크리티컬 패스(가장 자주 실행되고 성능에 가장 큰 영향을 미치는 코드 시퀀스)를 식별하세요. 이러한 크리티컬 패스에 최적화 노력을 집중하여 가장 큰 성능 향상을 달성하세요.

3. 긴 작업 식별

longtask 항목 유형은 메인 스레드를 장시간 차단하는 작업을 식별합니다. 긴 작업은 UI 반응성 저하와 버벅거림을 유발하여 사용자 경험을 저해할 수 있습니다. 다음 코드를 사용하여 긴 작업을 모니터링할 수 있습니다.

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

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

            

              
                Copy
              
            
          

이 코드는 longtask 항목을 수신하고 작업 이름과 지속 시간을 콘솔에 기록하는 PerformanceObserver를 생성합니다. 이 데이터를 분석하여 장시간 실행되는 작업을 식별하고 이를 더 작은 덩어리로 나누거나, 비동기 작업을 사용하거나, 웹 워커로 오프로드하여 최적화할 수 있습니다.

글로벌 작성 가이드라인: 기술적인 개념을 설명할 때는 다양한 수준의 기술 전문 지식을 가진 독자가 접근할 수 있는 명확하고 간결한 언어를 사용하세요. 전문 용어를 피하고 익숙하지 않은 용어에 대한 맥락을 제공하세요.

4. 네비게이션 타이밍 분석

navigation 항목 유형은 DNS 조회 시간, TCP 연결 시간, 요청 및 응답 시간, DOM 처리 시간을 포함한 페이지의 네비게이션 타이밍에 대한 자세한 정보를 제공합니다. 이 데이터는 페이지 로딩 프로세스의 병목 현상을 식별하는 데 사용될 수 있습니다. 예를 들어, 다음 코드를 사용하여 네비게이션 타이밍을 분석할 수 있습니다.

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

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

            

              
                Copy
              
            
          

이 코드는 navigation 항목을 수신하고 다양한 타이밍 지표를 콘솔에 기록하는 PerformanceObserver를 생성합니다. 이 데이터를 분석하여 느린 DNS 조회, 느린 TCP 연결, 느린 요청 처리, 느린 응답 처리 또는 느린 DOM 처리와 같은 병목 현상을 식별할 수 있습니다. 그런 다음 DNS 구성을 최적화하거나, 서버 성능을 개선하거나, HTML 및 자바스크립트 코드를 최적화하는 등 이러한 병목 현상을 해결하기 위한 적절한 조치를 취할 수 있습니다.

SEO 최적화: 콘텐츠 전체에 관련 키워드를 자연스럽게 사용하세요. 이 섹션에서는 "네비게이션 타이밍", "DNS 조회 시간", "TCP 연결 시간", "페이지 로딩 프로세스"와 같은 키워드가 자연스럽게 통합되었습니다.

5. 레이아웃 변경 모니터링

layout-shift 항목 유형은 페이지에서 예기치 않은 레이아웃 변경을 추적합니다. 이러한 변경은 사용자에게 불편함을 주고 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 종종 크기가 지정되지 않은 이미지, 늦게 로드되는 광고 또는 동적으로 삽입된 콘텐츠로 인해 발생합니다. 다음 코드를 사용하여 레이아웃 변경을 모니터링할 수 있습니다.

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

observer.observe({ entryTypes: ["layout-shift"] });

            

              
                Copy
              
            
          

이 코드는 layout-shift 항목을 수신하고 변경 값(변경의 크기를 나타내는 점수)을 콘솔에 기록하는 PerformanceObserver를 생성합니다. 값이 높을수록 더 큰 변경을 나타냅니다. hadRecentInput 속성은 변경이 사용자 입력 후 500ms 이내에 발생했는지 여부를 나타냅니다. 사용자 입력에 의해 트리거된 변경은 일반적으로 덜 문제가 되는 것으로 간주됩니다. sources 속성은 변경을 일으킨 요소에 대한 세부 정보를 제공합니다. 이 데이터를 분석하여 이미지에 크기를 지정하거나, 광고 공간을 예약하거나, 리플로우를 유발할 수 있는 콘텐츠의 동적 삽입을 피함으로써 레이아웃 변경 문제를 식별하고 수정할 수 있습니다.

실행 가능한 인사이트: Google의 Lighthouse와 같은 도구를 사용하여 레이아웃 변경 문제를 식별하고 수정 권장 사항을 얻으세요. 사용자 입력 없이 발생하는 변경을 우선적으로 수정하세요.

6. 최대 콘텐츠풀 페인트(LCP) 측정

largest-contentful-paint 항목 유형은 가장 큰 콘텐츠 요소가 페이지에 표시되기까지 걸리는 시간을 측정합니다. LCP는 페이지의 인지된 로딩 속도를 반영하는 핵심 웹 바이탈입니다. 좋은 LCP 점수는 2.5초 이하입니다. 다음 코드를 사용하여 LCP를 측정할 수 있습니다.

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

이 코드는 largest-contentful-paint 항목을 수신하고 시작 시간, 요소 및 URL을 콘솔에 기록하는 PerformanceObserver를 생성합니다. 이 데이터를 분석하여 가장 큰 콘텐츠 요소를 식별하고 이미지 크기를 최적화하거나, CDN을 사용하거나, 리소스를 미리 로드하여 로딩 시간을 최적화할 수 있습니다.

글로벌 관점: 사용자의 화면 크기와 해상도에 따라 LCP 요소가 달라질 수 있다는 점을 고려하세요. 다양한 기기와 화면 크기에서 좋은 LCP 점수를 보장하도록 애플리케이션을 설계하세요.

7. 최초 입력 지연(FID) 측정

first-input-delay 항목 유형은 브라우저가 첫 번째 사용자 상호작용(예: 클릭 또는 탭)에 응답하는 데 걸리는 시간을 측정합니다. FID는 페이지의 상호작용성을 반영하는 또 다른 핵심 웹 바이탈입니다. 좋은 FID 점수는 100밀리초 이하입니다. 다음 코드를 사용하여 FID를 측정할 수 있습니다.

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

이 코드는 first-input 항목을 수신하고 지연 시간, 이벤트 유형 및 대상 요소를 콘솔에 기록하는 PerformanceObserver를 생성합니다. 이 데이터를 분석하여 긴 입력 지연의 원인을 식별하고 자바스크립트 코드를 최적화하여 메인 스레드에서 소요되는 시간을 줄일 수 있습니다.

실행 가능한 인사이트: 장시간 실행되는 작업을 더 작은 덩어리로 나누고, 웹 워커를 사용하여 작업을 백그라운드 스레드로 오프로드하며, 이벤트 리스너를 최적화하여 사용자 상호작용의 처리 시간을 줄이세요.

고급 기술 및 고려 사항

위에 설명된 기본 사용 사례 외에도 Performance Observer API는 웹 애플리케이션 성능에 대한 더 깊은 통찰력을 얻기 위해 더 고급 시나리오에서 사용될 수 있습니다. 다음은 몇 가지 고급 기술 및 고려 사항입니다.

1. 버퍼링 사용

observe() 메서드의 buffered 옵션을 사용하면 PerformanceObserver가 생성되기 전에 기록된 과거 성능 항목을 검색할 수 있습니다. 이는 초기 페이지 로드 중이나 모니터링 코드가 로드되기 전에 발생하는 성능 데이터를 캡처하는 데 유용합니다. 예를 들어:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

이 코드는 navigation 및 resource 항목을 수신하고 옵저버가 생성되기 전에 기록된 모든 과거 항목을 검색하는 PerformanceObserver를 생성합니다.

2. 성능 항목 필터링

분석에 가장 관련 있는 데이터에 집중하기 위해 특정 기준에 따라 성능 항목을 필터링할 수 있습니다. 예를 들어, URL 또는 콘텐츠 유형에 따라 리소스 항목을 필터링할 수 있습니다.

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

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

            

              
                Copy
              
            
          

이 코드는 resource 항목을 수신하고 .jpg 확장자를 가진 이미지 리소스 항목만 포함하도록 필터링하는 PerformanceObserver를 생성합니다.

3. 웹 워커 사용

메인 스레드의 성능에 영향을 미치지 않으려면 성능 모니터링 및 분석을 웹 워커로 오프로드할 수 있습니다. 이를 통해 UI를 차단하지 않고 백그라운드에서 성능 데이터를 수집하고 처리할 수 있습니다. 예를 들어, 성능 이벤트를 수신하고 분석을 위해 데이터를 메인 스레드로 보내는 웹 워커를 만들 수 있습니다.

글로벌 작성 가이드라인: 글로벌 독자에게 관련 있는 예제를 사용하세요. 특정 국가나 문화에 국한된 예제는 피하세요.

4. 분석 플랫폼과 통합

Performance Observer API를 분석 플랫폼과 통합하여 중앙 위치에서 성능 데이터를 수집하고 분석할 수 있습니다. 이를 통해 시간 경과에 따른 성능 추세를 추적하고, 성능 저하를 식별하며, 성능 지표를 다른 사용자 행동 데이터와 연관시킬 수 있습니다. 해당 API를 사용하거나 서버 측 엔드포인트에 로깅하여 성능 항목을 분석 플랫폼으로 보낼 수 있습니다.

5. 구형 브라우저를 위한 폴리필 사용

Performance Observer API는 대부분의 최신 브라우저에서 지원되지만 구형 브라우저에서는 사용하지 못할 수 있습니다. 구형 브라우저를 지원하려면 API의 대체 구현을 제공하는 폴리필을 사용할 수 있습니다. 온라인에는 애플리케이션에서 사용할 수 있는 여러 폴리필이 있습니다.

Performance Observer API 사용을 위한 모범 사례

Performance Observer API를 효과적으로 활용하고 일반적인 함정을 피하려면 다음 모범 사례를 따르세요.

• 목표와 관련된 지표만 모니터링하세요. 성능에 영향을 줄 수 있는 과도한 데이터 수집을 피하세요.
• 가장 중요한 데이터에 집중하기 위해 필터링을 사용하세요. 특정 기준에 따라 성능 항목을 필터링하여 처리해야 할 데이터 양을 줄이세요.
• 성능 모니터링을 웹 워커로 오프로드하세요. 이렇게 하면 성능 모니터링이 메인 스레드의 성능에 영향을 미치는 것을 방지할 수 있습니다.
• 시간 경과에 따른 성능 추세를 추적하기 위해 분석 플랫폼과 통합하세요. 이를 통해 성능 저하를 식별하고 성능 지표를 다른 사용자 행동 데이터와 연관시킬 수 있습니다.
• 구형 브라우저를 지원하기 위해 폴리필을 사용하세요. 이렇게 하면 성능 모니터링 코드가 다양한 브라우저에서 작동하도록 보장할 수 있습니다.
• 성능 모니터링 코드를 철저히 테스트하세요. 코드가 자체적으로 성능 문제를 일으키지 않는지 확인하세요.
• 데이터 개인 정보 보호 규정을 유의하세요. 사용자의 동의 없이 개인 식별 정보(PII)를 수집하지 않도록 하세요.

SEO 최적화: 매력적인 메타 설명을 작성하세요. 블로그 게시물의 내용을 요약한 간결한 설명이 JSON 메타데이터에 제공됩니다.

결론

Performance Observer API는 개발자가 런타임 성능 지표를 모니터링 및 분석하고, 병목 현상을 식별하며, 더 부드럽고 빠르며 즐거운 사용자 경험을 위해 웹 애플리케이션을 최적화할 수 있도록 지원하는 강력한 도구입니다. API의 주요 개념과 기능을 이해하고 사용 모범 사례를 따르면 애플리케이션 성능에 대한 귀중한 통찰력을 얻고 위치나 기기에 관계없이 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다. 웹 애플리케이션이 점점 더 복잡해짐에 따라 Performance Observer API는 최적의 성능과 사용자 만족을 보장하는 데 필수적인 도구로 계속 남을 것입니다.

무엇보다도 사용자 경험을 최우선으로 생각하는 것을 기억하세요. 성능 최적화는 항상 사용자에게 원활하고 즐거운 경험을 제공하려는 목표에 의해 주도되어야 합니다. Performance Observer API를 효과적으로 사용하면 애플리케이션의 성능을 더 깊이 이해하고 사용자 경험을 개선하기 위한 정보에 입각한 결정을 내릴 수 있습니다.

성능의 글로벌 영향을 신중하게 고려함으로써 개발자는 전 세계 사용자에게 빠르고 반응이 좋으며 접근 가능한 웹 애플리케이션을 만들 수 있습니다. 이를 위해서는 네트워크 지연, 기기 기능, 문화적 선호도와 같은 요소를 고려하는 전체적인 접근 방식이 필요합니다.