PageViewTiming: 비동기 또는 동적 페이지 세부 정보

브라우저 모니터링의 PageViewTiming 이벤트 는 사용 가능한 즉시 각 데이터 포인트를 별도의 이벤트로 보냅니다. 타이밍을 제한하지 않기 때문에 발동 시점에 상관없이 첫 페인트나 첫 상호작용 데이터를 받을 수 있습니다. 이 문서에서는 PageViewTiming 및 해당 속성을 사용하여 시각적 및 응답성 관점에서 사이트, 구성요소 로드 및 사용자 성능 측정항목에 대한 데이터를 쿼리하는 이유와 방법을 설명합니다.

PageViewTiming을 사용하는 이유는 무엇입니까?

응용 프로그램에서 비동기 또는 동적 페이지를 사용하는 경우 사이트 또는 구성 요소 로드에 대한 추가 세부 정보가 필요할 수 있습니다. 그러나 페이지는 다양한 방식으로 콘텐츠를 로드할 수 있으며 사용자는 해당 콘텐츠와 상호 작용하는 시기를 제어합니다. 이것이 일부 사용자 중심 성능 메트릭이 브라우저 에이전트의 표준 창 로드(페이지 로드 시간) 외부에서 발생하는 이유입니다.

예를 들어, 사용자는 참을성이 없어 콘텐츠가 웹페이지에 표시되자마자 클릭을 시작할 수 있습니다. 또는 콘텐츠가 로드된 후 오랫동안 페이지를 사용하기 위해 기다릴 수 있습니다.

PageViewTiming 이벤트는 다른 이벤트에 종속되지 않는 보다 실시간 전달 메커니즘을 제공합니다. 추가 측정항목은 시각적 및 응답성 관점에서 사용자가 사이트를 경험하는 방식을 이해하는 데 도움이 될 수 있습니다.

Google의 핵심 Web Vitals 지원

브라우저 모니터링을 위한 에이전트 버전 1177 부터 Google의 Core Web Vitals 를 완벽하게 지원합니다. Pro 또는 그 이상의 브라우저 에이전트 가 필요합니다.

Core Web Vitals를 구성하는 메트릭은 시간이 지남에 따라 발전 합니다. 현재 세트는 사용자 경험의 세 가지 측면인 로딩, 상호 작용 및 시각적 안정성에 중점을 둡니다. 여기에는 다음 측정항목과 해당 임계값이 포함됩니다.

핵심 성능 평가 지표에는 로딩, 상호 작용 및 시각적 안정성이 포함됩니다.

LCP(Large Contentful Paint) : 로딩 성능을 측정합니다. 좋은 사용자 경험을 제공하려면 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 합니다.
FID(First Input Delay) : 상호작용성을 측정합니다. 좋은 사용자 경험을 제공하려면 페이지의 FID 가 100밀리초 미만이어야 합니다.
CLS(Cumulative Layout Shift) : 시각적 안정성을 측정합니다. 좋은 사용자 경험을 제공하기 위해 페이지는 0.1 미만 의 CLS를 유지해야 합니다.

이러한 각 측정항목에 대해 대부분의 사용자에게 권장되는 목표에 도달했는지 확인하기 위해 측정하기에 좋은 임계값은 모바일 및 데스크톱 장치에 걸쳐 분류된 페이지 로드의 75번째 백분위수 입니다.

자세히 알아보려면 Nerd Days에서 인지된 성능에 대해 이야기 하는 것을 시청하십시오.

자세한 시각적, 상호 작용 및 응답 메트릭

BrowserInteraction 및 PageView 이벤트는 페이지 창 로드 (또는 창 로드 및 AJAX) 타이밍을 수신하면 보고를 종료합니다. 그러나 페인트 및 상호 작용 메트릭은 언제든지 발생할 수 있습니다. PageViewTiming 는 이러한 측정항목을 다음과 같은 별도의 이벤트로 제공합니다.

이 타이밍의 변동성을 고려하십시오.
임의의 시간 초과를 설정하지 마십시오.
BrowserInteraction 및 PageView 이벤트를 무기한 보류하지 않도록 합니다.

추가 자료	코멘트
`firstPaint` 그리고 `firstContentfulPaint`	`firstPaint` 및 `firstContentfulPaint` 속성은 이미 `BrowserInteraction` 및 `PageView` 이벤트에서 사용할 수 있습니다. 그러나 window onload 이벤트가 발생하기 전에 항상 안정적으로 캡처되는 것은 아닙니다. `PageViewTiming` 을 사용하면 원래 페이지 로드 시간 이후에 발생하더라도 이러한 측정항목을 캡처할 수 있습니다. 이를 통해 해당 로드 이벤트의 응답성과 콘텐츠의 시각적 렌더링 간의 상관 관계를 더 잘 이해할 수 있습니다.
`largestContentfulPaint`	`largestContentfulPaint` , 측정항목은 에이전트 버전 1163 이상 에서 사용할 수 있습니다. 뷰포트에 표시되는 가장 큰 콘텐츠 요소의 렌더링 시간을 보고합니다. Google의 연구에 따르면 가장 큰 요소가 렌더링된 시점을 확인하는 것이 페이지의 주요 콘텐츠가 로드되고 유용한 시점을 측정하는 더 정확한 방법입니다. 제한 사항 및 고려 사항을 포함하여 이 메트릭에 대한 자세한 내용은 w3c draft 를 참조하십시오. 또한 LCP를 사용하여 CLS(누적 레이아웃 이동) 점수 속성을 보고합니다. 이 속성은 `cumulativeLayoutShift` 으로 보고됩니다. 가장 큰 콘텐츠가 포함된 페인트는 Google에서 핵심 성과 보고서로 식별한 세 가지 측정항목 중 하나입니다. 최대 2.5초의 LCP 값은 "양호"로 간주되고 2.5-4.0초 사이는 "개선 필요"로 간주되며 4.0초 이상은 "나쁨"으로 간주됩니다.
`firstInteraction` 그리고 `firstInputDelay`	`firstInteraction` 및 `firstInputDelay` 을 추가하면 사용자가 해당 시각적 콘텐츠와 상호작용하는 방식을 빠르게 결정할 수 있습니다. 이 측정항목은 상호작용한 시기뿐 아니라 상호작용 유형(마우스다운, 포인터다운 등)과 사이트에서 응답을 받는 데 걸린 시간을 알려줍니다. `firstInputDelay` 측정항목은 `FirstContentfulPaint` 및 TTI(Time to Interactive) 측정항목의 중간에 있습니다. 첫 번째 입력이 만들어질 수 있는 시점과 브라우저의 메인 스레드가 모든 상호작용에 응답할 수 있는 시점 사이의 시간을 측정합니다. 또한 사용자의 첫 번째 상호 작용 순간에 누적 레이아웃 이동(CLS) 점수 속성을 보고합니다. 이 속성은 다음과 같이 보고됩니다. `cumulativeLayoutShift.` 첫 번째 입력 지연은 Google에서 핵심 성능 향상 으로 식별한 세 가지 측정항목 중 하나입니다. 최대 100ms의 FID 값은 "양호"로 간주되고 100-300ms 사이는 "개선 필요"로 간주되고 300ms 초과는 "나쁨"으로 간주됩니다. 자세한 설명은 브라우저 모니터링 릴리스 정보 를 참조하십시오.
`cumulativeLayoutShift`	CLS(누적 레이아웃 이동) 는 에이전트 v1177 이상 에서 사용할 수 있습니다. CLS는 사용자가 예상치 못한 레이아웃 변경을 경험하는 빈도를 정량화하는 데 도움이 되기 때문에 시각적 안정성 을 측정하기 위한 중요한 사용자 중심 메트릭입니다. 낮은 CLS는 페이지를 즐겁게 만드는 데 도움이 됩니다. 이것은 Google에서 핵심 성능 향상 으로 식별한 세 가지 측정항목 중 하나입니다. 누적 레이아웃 이동은 Google에서 핵심 성능 향상 요소로 식별한 세 가지 측정항목 중 하나입니다. CLS 점수가 0.1 이하이면 "양호", 0.1-0.25이면 "개선 필요", 0.25 이상이면 "나쁨"으로 간주됩니다.
`timingName`	`firstPaint` , `firstContentfulPaint` , `firstInteraction, largestContentfulPaint, pageHide and windowUnload` 등의 `timingName` 속성을 사용하여 다양한 유형의 활동을 검토할 수 있습니다. 예를 들어, `PageViewTiming` 이벤트는 `timingName` 가 `firstPaint` 이고 `firstPaint` 값이 `.03` 수 있습니다. 이벤트에는 표준 `BrowserInteraction` 및 `PageView` 이벤트에 포함된 모든 기본 속성도 포함됩니다.
`elementId`	지정된 경우 `largestContentfulPaint` 요소의 `Id` 입니다. 이 값은 LCP 메트릭으로만 보고됩니다. 이 값은 `null` 일 수 있습니다.
`elementSize`	이것은 `largestContentfulPaint` 요소의 보고된 크기입니다. 이 값은 LCP 메트릭으로만 보고됩니다.
`pageHide`	에이전트 v1177 이상 에서 사용 가능한 `pageHide` 이벤트는 브라우저가 세션 기록과 다른 페이지를 표시하는 과정에서 현재 페이지를 숨길 때 전송됩니다. 예를 들어 사용자가 브라우저의 뒤로 버튼을 클릭하면 이전 페이지가 표시되기 전에 현재 페이지에서 `pageHide` 이벤트를 수신합니다. `pageHide` 이벤트에 대한 지원 문서 및 브라우저 호환성은 MDN Web Docs 사이트 를 참조하십시오. 또한 `pageHide` 을 사용하여 CLS(누적 레이아웃 이동) 점수 속성을 보고합니다. 이 속성은 다음과 같이 보고됩니다. `cumulativeLayoutShift.`
`windowLoad`	`windowLoad` 이벤트는 에이전트 v1177 이상 에서 사용할 수 있습니다. 스타일시트 및 이미지와 같은 모든 종속 리소스를 포함하여 전체 페이지가 로드되면 시작됩니다. `windowLoad` 이벤트에 대한 지원 문서 및 브라우저 호환성은 MDN Web Docs 사이트 를 참조하십시오. 또한 `windowLoad` 을 사용하여 CLS(누적 레이아웃 이동) 점수 속성을 보고합니다. 이 속성은 다음과 같이 보고됩니다. `cumulativeLayoutShift.`
`windowUnload`	`windowUnload` 이벤트는 에이전트 v1163 이상 에서 사용할 수 있습니다. 문서 또는 하위 리소스가 언로드될 때 시작됩니다. `windowUnload` 이벤트에 대한 지원 문서 및 브라우저 호환성은 MDN Web Docs 사이트 를 참조하십시오. 또한 `windowUnload` 을 사용하여 CLS(누적 레이아웃 이동) 점수 속성을 보고합니다. 이 속성은 `cumulativeLayoutShift` 로 보고됩니다.

호환성 및 요구 사항

요구 사항:

설치 요구 사항 을 충족합니다.
이 이벤트를 보고하려면 브라우저 에이전트 버전 1153 이상 과 Pro 또는 Pro+SPA 에이전트 가 필요합니다.

브라우저 에이전트 릴리스 정보 를 따라 새 메트릭이 릴리스되는 시기를 알아보세요.

이러한 메트릭은 다음 브라우저 버전에서 지원됩니다. 지원되지 않는 브라우저의 경우 PageViewTiming 이벤트가 기록되지 않습니다.

메트릭	지원되는 브라우저 버전
`cumulativeLayoutShift`	크롬 79 메트릭이 안정으로 상승했습니다. 메트릭 정의의 변경 사항은 이 로그에 보고됩니다. 크롬 77 API를 통해 노출된 메트릭: Layout Instability API 를 통해 사용 가능한 누적 레이아웃 이동
`firstPaint` `firstContentfulPaint`	데스크톱 및 모바일용 Chrome 60 이상(Android 웹뷰 및 Android용 Chrome) 데스크탑용 Opera 47 이상 Android 모바일용 Opera 44 이상 삼성 모바일 인터넷
`largestContentfulPaint`	데스크톱 및 모바일용 Chrome 77 이상
`firstInteraction` `firstInputDelay`	이러한 측정항목에는 `addEventListener` 브라우저 API 가 필요합니다. 이 API는 다음을 포함한 모든 최신 브라우저에서 사용할 수 있습니다. 애플 사파리 구글 크롬 Microsoft Internet Explorer(IE) 버전 9 이상 모질라 파이어 폭스
`pageHide`	이 측정항목은 현재 데스크톱 및 모바일의 모든 브라우저에서 지원됩니다. MDN 문서를 통한 호환성 매트릭스 .
`windowLoad`	이 측정항목은 현재 데스크톱 및 모바일의 모든 브라우저에서 지원됩니다. MDN 문서를 통한 호환성 매트릭스 .
`windowUnload`	이 측정항목은 현재 데스크톱 및 모바일의 모든 브라우저에서 지원됩니다. MDN 문서를 통한 호환성 매트릭스 .

누적 레이아웃 시프트

CLS(Cumulative Layout Shift)는 웹페이지 콘텐츠의 안정성을 측정하는 지표입니다. 전체 설명은 web.dev/cls 를 참조하십시오.

New Relic에서 CLS를 캡처하는 방법

Layout Instability API 에 의해 보고된 페이지 레이아웃의 이동은 페이지 수명 동안 집계되고 모든 PageViewTiming 이벤트에 대한 속성으로 보고되며 해당 이벤트가 발생했을 때 CLS 값을 나타냅니다.

이 모델을 사용하여 사용자는 페이지 수명의 여러 지점에서 CLS 값을 볼 수 있습니다. 예를 들어 CLS 값은 처음 사용자가 페이지와 상호 작용하거나 페이지를 숨길 때까지입니다.

다른 CLS 소스 근사화

Lighthouse는 페이지가 로드되는 시점까지만 CLS 값을 캡처하므로 개발 또는 랩 환경에서 유용합니다. windowLoad PageViewTiming 이벤트를 보면 Lighthouse 값을 근사화할 수 있습니다.

CrUX 보고서는 페이지의 수명 동안 캡처된 값을 사용하므로 RUM 환경에서 최악의 경우 변화를 분석하는 데 유용합니다. windowUnload PageViewTiming 이벤트의 CLS 속성을 보면 CrUX 값을 근사화할 수 있습니다. 샘플 세트가 다르고 수명이 긴 웹 페이지의 값이 포함되는 방식이 다르기 때문에 이러한 값은 정확히 동일하지 않습니다. New Relic 브라우저 모니터링 에이전트는 페이지가 언로드될 때 CLS를 캡처하는 반면 CrUX는 페이지 수명 동안 메트릭을 수집하고 업데이트합니다.

CLS 집계 방식

2021년 7월부터 Google은 CLS 값이 집계되는 방식을 업데이트했습니다. 브라우저 모니터링 에이전트 버전 v12xx 는 CLS 메트릭 진화에 설명된 방법을 사용합니다.

브라우저 모니터링 에이전트 v12xx 이상:

레이아웃 이동 값은 창에서 캡처됩니다. 서로 1초 이내에 발생했지만 첫 번째와 마지막 이동 사이에 5초를 넘지 않는 레이아웃 전환은 동일한 창의 일부입니다. CLS 점수는 레이아웃 이동 값의 합계가 가장 높은 창의 레이아웃 이동 값 합계를 나타냅니다.

브라우저 에이전트 v12xx 이전:

CLS 점수는 페이지 수명의 해당 시점까지 발생한 모든 레이아웃 이동의 합계를 나타냅니다.

이벤트 데이터 쿼리

다음은 시작하는 데 도움이 되는 이벤트 데이터에 대한 몇 가지 샘플 쿼리입니다.

시계열에 대해 첫 번째 페인트와 첫 번째 콘텐츠가 포함된 페인트의 95번째 백분위수를 표시합니다.

SELECT FILTER(percentile(firstPaint, 95), where(timingName = 'firstPaint')) as 'fp', FILTER(percentile(firstContentfulPaint, 95), where(timingName = 'firstContentfulPaint')) as 'fcp' FROM PageViewTiming TIMESERIES 1 minute SINCE 1 hour ago

트랜잭션 이름 및 상호 작용 유형을 기준으로 시계열에 대한 첫 번째 입력 지연의 95번째 백분위수를 표시합니다.

SELECT percentile(firstInputDelay, 95) as 'fid' FROM PageViewTiming WHERE timingName = 'firstInteraction' TIMESERIES 1 minute FACET browserTransactionName, interactionType SINCE 3 hours ago

첫 번째 상호작용 시간 범위에 의해 패싯 처리된 첫 번째 입력 지연 타이밍의 히스토그램을 표시합니다.

FROM PageViewTiming SELECT histogram(firstInputDelay, 1000, 10) SINCE 3 hours ago WHERE timingName = 'firstInteraction' FACET CASES (WHERE firstInteraction < 1, WHERE firstInteraction >= 1 AND firstInteraction < 5, WHERE firstInteraction >= 5)

사용자의 편의를 위해 제공되는 기계 번역입니다.