Sentry 성능 개선

하니·2025년 2월 22일

React 길잡이

목록 보기
13/21

Web Vitals

선택한 프로젝트에 대한 페이지 로드 및 상호 작용 성능에 대한 개요를 제공한다. 어떤 페이지가 웹 성능에 가장 큰 영향을 미치는지 더 잘 이해할 수 있다.

  • 이러한 지표는 어떤 Web Vital페이지에 가장 많은 주의를 기울여야 하는지 우선순위를 정하는 데 도움이 될 수 있다.
  • Opportunity 열 : 100으로 최대화할 경우 애플리케이션의 전체 성능 점수에 대한 페이지 점수의 잠재적인 개선을 표시한다.

Network Requests

애플리케이션의 HTTP 요청 성능을 추적하고 이를 제공하는 도메인을 자세히 살펴보세요.

  • HTTP 요청의 전반적인 동작을 요약한 세 가지 그래프
    • 분당 요청(처리량) 차트, 평균 기간 차트, 3xx, 4xx, 5xx HTTP 응답 상태 코드의 백분율을 보여주는 차트

Assets

프론트엔드에서 JavaScript와 CSS를 로딩할 때의 성능을 디버깅할 수 있는 브라우저 자산 성능 모니터링을 제공한다.

  • JavaScript, CSS, 이미지 및 CSS에서 시작하는 특정 자산(예: 글꼴)만 지원
  • Reuqest Per Minute
    이 파일이 1분당 몇 번 요청되었는지
    높은 PRM = 자주 요청되는 중요한 파일
  • Average Duration
    파일을 다운로드하는데 걸리는 평균 시간
    사용자 체감 속도와 직결되기 때문에 낮을수록 좋다.
  • Time Spent
    특정 시간 동안 이 파일을 처리하는데 소요된 총 시간
    높은 값 = 서버 리소스를 많이 사용
  • Avg Encoded Size
    파일의 압축된 평균 크기
    다운로드 속도에 영향을 미치기 때문에 작을수록 좋다.

최적화 우선순위
1. Average Duration이 높은 파일들 먼저
2. Size가 큰 파일들
3. PRM이 높은 파일들

profile
Hi, I am HANI Developer(╹◡╹). .....1hani me?

0개의 댓글