뉴렐릭의 브라우저 에이전스 리소스 추적을 통한 페이지 렌더링 성능 향상

웹 개발자들은 기능이 풍부하고 시각적으로 뛰어난 애플리케이션을 제공하기 위해 노력합니다. 애플리케이션에는 사용자 경험에 직접적인 영향을 주지만 눈에는 보이지 않는 복잡성 계층이 존재합니다. 이미지, 스크립트, 스타일시트 같은 자산이 애플리케이션에 로드되는 방식이 바로 그러한 계층입니다. 왜 이것이 중요한지 실제 사례를 통해 설명하고 PerformanceResourceTiming API를 활용해 숨겨진 문제를 발견하고 실행 가능한 인사이트를 얻는 방법을 알아봅니다.

이미지가 누락된 사례

고품질 제품 이미지를 보여줌으로써 고객들의 구매를 유도하는 이커머스 플랫폼을 운영하고 있는 경우를 가정해 보겠습니다. 개발 중에는 아무런 문제가 없었지만, 고객들이 제품 이미지가 가끔 로드되지 않는다고 불만을 토로하기 시작합니다. 게다가 일부 사용자에게만 문제가 발생합니다.

조사 결과, 특정 이미지를 로드하는 데 시간이 너무 오래 걸리거나 아예 로딩이 되지 않는 다는 사실이 밝혀졌습니다. 애플리케이션과 사용자 기반 전반에서 개별 리소스의 성능에 대한 가시성이 없다면, 근본 원인을 정확히 파악하기는 것은 거의 불가능합니다. 이 부분에서 PerformanceResourceTiming API가 도움을 줄 수 있습니다.

PerformanceResourceTiming API의 작동 방식

PerformanceResourceTiming API는 리소스가 애플리케이션에 로드되는 방법에 대한 세부 정보를 제공합니다. 브라우저가 이미지나 스크립트 같은 리소스를 로드하면 목록에 항목이 생성됩니다. 각 항목에는 다음과 같은 세부 메트릭이 포함됩니다.

• startTime: 리소스에 대한 요청이 시작된 시점입니다.
• fetchStart: 브라우저가 리소스를 가져오기 시작한 시점입니다.
• responseEnd: 리소스가 로딩을 마친 시점입니다.
• duration: 리소스를 로드하는 데 걸린 총 시간입니다.
• transferSize: 압축 후 리소스의 크기입니다.
• initiatorType: 리소스의 유형입니다.(예: "img", "script", "css")

설명을 제공하는 다른 많은 타이밍 값이 있습니다. 이 데이터를 로컬로 보려면, 브라우저의 개발자 콘솔에 “performance.getEntriesByType('resource')”을 입력하면 됩니다.

이 데이터를 사용하면, 리소스를 로드하는 데 걸린 시간, 지연이 발생한 위치, 리소스가 캐시되었는지 여부를 확인할 수 있습니다. 이러한 데이터 속성의 일반적인 용도는 다음과 같습니다.

• TCP 핸드셰이크 시간 측정(connectEnd - connectStart)
• DNS 룩업 시간 측정(domainLookupEnd - domainLookupStart)
• 리디렉션 시간 측정(redirectEnd - redirectStart)
• 중간 요청 시간 측정(firstInterimResponseStart - finalResponseHeadersStart)
• 요청 시간 측정(responseStart - requestStart)
• TLS 협상 시간 측정(requestStart - secureConnectionStart)
• 가져오기 시간 측정(리디렉션 없음) (responseEnd - fetchStart)
• ServiceWorker 처리 시간 측정(fetchStart - workerStart)
• 콘텐츠의 압축 여부 확인(decodedBodySize는 encodedBodySize가 될 수 없음)
• 로컬 캐시의 적중 여부 확인(transferSize는 0이어야 함)
• 현대적이고 빠른 프로토콜의 사용 여부 확인(nextHopProtocol은 HTTP/2 또는 HTTP/3이어야 함)
• 올바른 리소스의 렌더링-차단 여부 확인(renderBlockingStatus)

모든 페이지에서 모든 사용자에 대한 성능 데이터 집계

한 페이지뿐만 아니라 애플리케이션 전반의 모든 페이지에서 이러한 데이터를 수집할 수 있다고 상상해 보십시오. 한 명의 사용자뿐만 아니라 모든 페이지에서 모든 사용자에게 적용됩니다. PerformanceResourceTiming API를 뉴렐릭과 통합하면, 리소스 타이밍 메트릭을 대규모로 집계할 수 있습니다. 활용 방법은 다음과 같습니다.

1. 웹 애플리케이션에 브라우저 에이전트를 설치합니다.
2. 페이지 리소스 타이밍 데이터가 자동으로 수집되도록 브라우저 에이전트를 설정할 수 있습니다. 다음 방법으로 설정합니다. 웹 애플리케이션의 모든 페이지에서 뉴렐릭 브라우저 에이전트를 실행하면, 페이지 리소스 타이밍 데이터가 "BrowserPerformance" 이벤트로 자동 수집됩니다.
3. one.newrelic.com에서 브라우저 엔터티를 방문하여 Insights를 시각화합니다. 실행 가능한 실시간 데이터를 사용해 평균 로드 시간, 실패한 요청, 전송 크기 같은 메트릭을 시각화합니다. 

BrowserPerformance 이벤트와 연결된 지리적 데이터와 사용자 데이터를 활용하면, 애플리케이션 전반에서 모든 최종 사용자에 대한 데이터를 집계하여 다른 방법으로는 볼 수 없는 문제를 발견할 수 있습니다.

문제 해결

예시로 돌아가보겠습니다. 뉴렐릭에서 BrowserPerformance 이벤트 데이터를 사용해 모든 사용자에 대해 특정 이미지 세트가 느리게 로드되고 있음을 발견했습니다. 리디렉션 시간을 확인하면 이 세트에 속한 모든 이미지에 리디렉션 지연이 발생하는 것을 알 수 있습니다. 엔지니어링 팀과 협력하여 유효하지 않은 자산 경로를 리디렉션이 필요하지 않은 직접 경로로 대체합니다.

리디렉션 문제를 해결한 후, 데이터를 살펴보니 CDN에서 호스팅되는 이미지의 로딩 속도가 사용자, 특히 동남아시아의 경우 현저히 느려지는 것으로 나타났습니다. startTime과 responseEnd 메트릭을 분석한 결과, CDN의 엣지 서버와 사용자 위치 사이의 네트워크 지연 시간에 문제가 있다는 것을 알 수 있습니다. 이 데이터를 바탕으로 CDN 제공업체와 협력하여 해당 지역에서 더 가까운 엣지 노드를 사용할 수 있습니다.