• 1분 빠르게 Docker로 Sentry-CLI 최신 버전 시작하기 - 버전 생성
• Docker로 Sentry-CLI 빠르게 시작하기 - 30초로 Source Maps 시작
• React용 Sentry 완전한 통합 상세 설명
• Vue용 Sentry 완전한 통합 상세 설명
• Sentry-CLI 사용 상세 설명

목차

• 핵심 Web Vitals
• 최대 콘텐츠 렌더링 (LCP)
• 첫 입력 지연 (FID)
• 누적 레이아웃 이동 (CLS)
• 기타 Web Vitals
• 첫 렌더링 (FP)
• 첫 콘텐츠 렌더링 (FCP)
• 첫 바이트 시간 (TTFB)
• 임계값
• 분포 히스토그램
• 브라우저 지원

공개 계정: 해커 오후 차

Web Vitals는 렌더링 시간(render time)、응답 시간(response time) 및 레이아웃 이동(layout shift)을 측정하기 위한 구글이 정의한 지표 세트입니다. 각 데이터 포인트는 애플리케이션 전반의 성능에 대한 통찰력을 제공합니다.

• https://web.dev/vitals/

브라우저 내의 Sentry SDK는 (지원되는 경우) Web Vitals 정보를 수집하고 해당 정보를 프론트엔드 트랜잭션(transaction)에 추가합니다. 그런 다음 이러한 중요한 정보를 몇 가지 차트에 집계하여 각 프론트엔드 트랜잭션(transaction)이 사용자에게 어떻게 실행되는지 빠르게 파악할 수 있습니다.

핵심 Web Vitals

이러한 Web Vitals는 구글에 의해 가장 중요하며 사용자 경험을 직접 측정하는 것으로 간주됩니다. Google 보고서에 따르면 2021년 5월부터 이러한 지표는 검색 순위에도 영향을 미칩니다.

• Google 보고서에 따르면 2021년 5월부터 이러한 지표는 검색 순위에도 영향을 미칩니다
• https://developers.google.com/search/blog/2020/11/timing-for-page-experience

최대 콘텐츠 렌더링 (LCP)

Largest Contentful Paint (LCP)는 가장 큰 콘텐츠가 뷰포트에 나타나는 렌더링 시간을 측정합니다. 이는 문서 객체 모델(DOM)에서 image、SVG 또는 text block과 같은 어떤 형태든 될 수 있습니다. 이는 가장 직관적인 정의를 가진 뷰포트에서 가장 큰 픽셀 영역입니다. LCP는 개발자가 사용자가 페이지의 주요 콘텐츠를 볼 때까지 얼마나 걸리는지 이해하는 데 도움이 됩니다.

• https://web.dev/lcp/

첫 입력 지연 (FID)

First Input Delay (FID)는 사용자가 뷰포트와 상호 작용하려고 시도할 때의 응답 시간을 측정합니다. 작업에는 버튼 클릭、링크 또는 기타 사용자 정의 Javascript controller가 포함될 수 있습니다. FID는 애플리케이션 페이지에서 성공적이거나 성공적이지 않은 상호 작용에 대한 중요한 데이터를 제공합니다.

• https://web.dev/fid/

누적 레이아웃 이동 (CLS)

Cumulative Layout Shift (CLS)는 렌더링 과정에서 각 예기치 않은 요소 이동의 개별 레이아웃 이동 점수의 합계입니다. 기사로 이동하여 페이지가 완전히 로드되기 전에 링크를 클릭하려고 시도하는 상황을 상상해 보세요. 이미지 렌더링으로 인해 링크가 아래로 이동할 수 있습니다. CLS 점수는 이 Web Vital을 나타내기 위해 지속 시간 대신 사용되는 방해적이고 시각적으로 불안정한 변화의 정도를 나타냅니다.

각 레이아웃 이동 점수는 영향(impact)과 거리(distance) 점수를 사용하여 계산됩니다. 영향 점수는 두 렌더링 프레임 사이에 요소가 영향을 미치는 총 표시 영역입니다. 거리 점수는 뷰포트에 대한 상대적인 이동 거리를 측정합니다.

레이아웃 이동 점수 = 영향 점수 * 거리 점수

위의 예를 살펴보겠습니다. 불안정한 요소 - 본문 텍스트(body text)가 있습니다. 영향 부분은 페이지의 약 50%이며 본문 텍스트를 20% 아래로 이동시킵니다. 레이아웃 이동 점수는 0.1이며, 이는 0.5*0.2의 곱과 같습니다. 따라서 CLS는 0.1입니다.

기타 Web Vitals

이러한 Web Vitals는 사용자가 덜 눈치채기 쉽지만 Core Web Vitals 문제를 해결하는 데 유용합니다.

첫 렌더링 (FP)

First Paint (FP)는 첫 번째 픽셀이 뷰포트에 나타나는 데 걸리는 시간을 측정하며, 이전에 표시된 콘텐츠와 비교하여 어떤 시각적 변화도 나타냅니다. 이는 문서 객체 모델 (DOM)에서 background color 、canvas 또는 image와 같은 어떤 형태든 될 수 있습니다. FP는 개발자가 렌더링 페이지에서 예기치 않은 일이 발생했는지 이해하는 데 도움이 됩니다.

첫 콘텐츠 렌더링 (FCP)

First Contentful Paint (FCP)는 첫 번째 콘텐츠가 뷰포트에 렌더링되는 시간을 측정합니다. 이는 문서 객체 모델 (DOM)에서 image、SVG 또는 text block과 같은 어떤 형태든 될 수 있습니다. FCP는 종종 First Paint (FP)와 겹칩니다. FCP는 개발자가 사용자가 페이지에서 콘텐츠 변경 사항을 볼 때까지 얼마나 걸리는지 이해하는 데 도움이 됩니다.

첫 바이트 시간 (TTFB)

Time To First Byte (TTFB)는 사용자 브라우저가 페이지 콘텐츠의 첫 번째 바이트를 수신하는 데 걸리는 시간을 측정합니다. TTFB는 개발자가 초기 응답(initial response)으로 인해 느린지 또는 렌더링 차단 콘텐츠(render-blocking content)로 인해 느린지 이해하는 데 도움이 됩니다.

임계값

Google의 "좋음(Good)"、"개선 필요(Needs Improvement)" 및 "나쁨(Poor)" 임계값은 해당 Web Vitals에 대한 데이터 포인트를 녹색、노란색 및 빨간색으로 분류하는 데 사용됩니다. "Needs improvement"는 Sentry에서 "Meh"라고 불립니다.

일부 Web Vitals(예: FP、FCP、LCP 및 TTFB)는 트랜잭션의 시작을 기준으로 측정됩니다. 다른 도구(예: Lighthouse)에서 생성된 값과 비교하면 값이 다를 수 있습니다.

lighthouse: https://github.com/GoogleChrome/lighthouse

분포 히스토그램

Web Vitals 히스토그램은 데이터 분포를 표시하며, 이를 통해 이상값을 발견하여 프론트엔드 성능 문제를 식별하고 진단하는 데 도움이 될 수 있습니다.

기본적으로 이상값은 제외되어 이러한 중요한 정보에 대한 더 자세한 뷰를 제공합니다. 이상값(Outlier)은 상한 외부 울타리(upper outer fence)를 상한으로 사용하여 결정됩니다. 상한을 초과하는 모든 데이터 포인트는 이상값(outlier)으로 간주됩니다.

• upper outer fence: https://en.wikipedia.org/wiki/Outlier#Tukey's_fences

각 Web Vital의 수직 표시는 관찰된 데이터 포인트의 75번째 백분위수입니다. 다시 말해, 기록된 값의 25%가 해당 수량을 초과합니다.

히스토그램에서 관심 영역을 발견하면 해당 영역을 클릭하고 드래그하여 확대하여 더 자세한 뷰를 얻을 수 있습니다. 또한 트랜잭션과 관련된 더 많은 정보를 히스토그램에서 확인할 수도 있습니다. 선택한 Web Vital 아래의 "Open in Discover"를 클릭하여 추가 조사를 위해 사용자 정의 쿼리를 작성합니다. 자세한 내용은 Discover Query Builder 전체 문서를 참조하세요.

• Query Builder: https://docs.sentry.io/product/discover-queries/query-builder/

모든 사용 가능한 데이터를 보려면 드롭다운 메뉴를 열고 "View All"을 클릭하세요. "View All"을 클릭하면 극단적인 이상값이 표시될 수 있습니다. 특정 영역을 클릭하고 드래그하여 확대하여 더 자세한 뷰를 얻을 수 있습니다.

브라우저 지원

공개 계정: 해커 오후 차