Firebase Summit에서 발표된 모든 내용을 살펴보고 Firebase로 앱을 빠르게 개발하고 안심하고 앱을 실행하는 방법을 알아보세요. 자세히 알아보기

콘솔에서 성능 데이터 모니터링

실시간 성능 데이터를 보려면 앱에서 실시간 데이터 처리와 호환되는 성능 모니터링 SDK 버전을 사용하는지 확인하세요. 실시간 성능 데이터에 대해 자세히 알아보십시오 .

대시보드에서 주요 메트릭 추적

주요 메트릭의 추세를 알아보려면 성능 대시보드 상단의 메트릭 보드에 추가하십시오. 주간 변경 사항을 확인하여 회귀를 빠르게 식별하거나 코드의 최근 변경 사항이 성능을 개선하고 있는지 확인할 수 있습니다.

Firebase Performance Monitoring 대시보드의 측정항목 보드 이미지

다음은 추적할 수 있는 몇 가지 추세의 예입니다.

  • 앱이 특정 JavaScript 파일을 로드할 때 변경한 첫 번째 입력 지연 개선
  • 자산에 CDN을 사용하도록 전환한 후 콘텐츠가 있는 첫 번째 페인트 시간 감소
  • 썸네일 사용을 구현한 이후 네트워크 요청에 대한 응답 페이로드 크기 감소
  • 생태계 중단 시 타사 API 호출에 대한 네트워크 응답 시간 증가

Firebase 프로젝트의 각 구성원은 자체 메트릭 보드를 구성할 수 있습니다. 자신에게 중요한 메트릭을 추적할 수 있는 반면 다른 프로젝트 구성원은 자신의 보드에서 완전히 다른 주요 메트릭 세트를 추적할 수 있습니다.

메트릭 보드에 메트릭을 추가하려면 다음 단계를 따르십시오.

  1. Firebase 콘솔에서 성능 대시보드 로 이동합니다.
  2. 빈 메트릭 카드를 클릭한 다음 보드에 추가할 기존 메트릭을 선택합니다.
  3. 더 많은 옵션(예: 지표 교체 또는 제거)을 보려면 채워진 지표 카드에서 를 클릭하십시오.

메트릭 보드는 시간 경과에 따라 수집된 메트릭 데이터를 그래픽 형식과 숫자 백분율 변경으로 표시합니다.

  • 각 측정항목 카드에는 선택한 시간 범위 동안 측정항목 값의 변화율과 가장 최근에 수집된 측정항목 값이 표시됩니다. 메트릭 보드 상단의 설명은 백분율 변화에 대한 해석입니다.
  • 기본적으로 메트릭 보드에는 코어 웹 바이탈 과 일치하는 메트릭의 75번째 백분위수 값이 표시됩니다. 다양한 사용자 세그먼트가 앱을 경험하는 방식을 보려면 대시보드 페이지 상단의 드롭다운에서 다른 백분위수를 선택하세요.

빨간색, 녹색 및 회색 색상은 무엇을 의미합니까?

대부분의 메트릭에는 원하는 추세 방향이 있으므로 메트릭 보드는 색상을 사용하여 메트릭 데이터의 추세가 좋은 방향인지 나쁜 방향인지에 대한 해석을 표시합니다.

예를 들어 페이지의 첫 번째 입력 지연 (작아야 하는 값)을 추적한다고 가정합니다. 이 값이 증가하면 메트릭 보드는 메트릭의 백분율 변화를 빨간색으로 표시하여 가능한 문제에 대한 주의를 환기시킵니다. 그러나 값이 감소하거나 변경되지 않으면 메트릭 보드에 백분율이 각각 녹색 또는 회색으로 표시됩니다.

메트릭에 네트워크 요청에 대한 응답 페이로드 크기 와 같이 명확한 추세 방향이 없는 경우 메트릭 보드는 데이터 추세에 관계없이 항상 메트릭의 백분율 변화를 회색으로 표시합니다.

실선과 점선은 무엇을 의미합니까?

  • 진한 파란색 실선 — 시간 경과에 따른 메트릭 값

  • 연한 파란색 파선 — 과거 특정 시간의 메트릭 값
    예를 들어 지난 7일의 차트를 표시하도록 선택하고 8월 30일 위로 마우스를 가져가면 밝은 파란색 파선이 8월 23일의 메트릭 값을 알려줍니다.



추적 및 해당 데이터 보기

성능 대시보드 하단에 있는 추적 테이블에서 앱의 모든 추적을 볼 수 있습니다. 테이블은 적절한 하위 탭 내에서 각 추적 유형을 그룹화합니다. 예를 들어 모든 네트워크 요청 추적은 네트워크 요청 하위 탭 아래에 나열됩니다.

트레이스 테이블에는 각 트레이스의 일부 상위 메트릭 값과 각 메트릭 값의 백분율 변경이 표시됩니다. 이러한 값은 대시보드 탭 상단에 설정된 백분위수 및 시간 범위 선택을 기반으로 계산됩니다. 여기 예시들이 있습니다 :

  • 75% 의 백분위수와 지난 7일 의 시간 범위를 선택하면 측정항목의 값은 가장 최근에 수집된 데이터의 75번째 백분위 수가 되고 백분율 변경은 7 이전 이후의 변경이 됩니다.
  • 그런 다음 시간 범위를 지난 24시간 으로 변경하면 측정항목의 값은 가장 최근 1시간 동안 수집된 데이터의 중앙값 이 되고 백분율 변경은 24시간 이전 이후의 변경이 됩니다.

메트릭 값 또는 특정 메트릭에 대한 백분율 변경을 기준으로 각 하위 탭의 트레이스 목록을 정렬할 수 있습니다. 이를 통해 앱의 잠재적인 문제를 빠르게 식별할 수 있습니다.

특정 추적에 대한 모든 메트릭과 데이터를 보려면 추적 테이블에서 추적 이름을 클릭하십시오. 이 페이지의 다음 섹션에서 자세한 내용을 제공합니다.

특정 추적에 대한 더 많은 데이터 보기

Performance Monitoring은 측정항목 변경 사항을 강조표시하는 Firebase 콘솔의 문제 해결 페이지를 제공하므로 앱과 사용자에 대한 성능 문제의 영향을 쉽고 빠르게 해결하고 최소화할 수 있습니다. 예를 들어 다음 시나리오에서 잠재적인 성능 문제에 대해 알아볼 때 문제 해결 페이지를 사용할 수 있습니다.

  • 대시보드에서 관련 메트릭을 선택하고 큰 델타를 확인합니다.
  • 추적 테이블에서 맨 위에 가장 큰 델타를 표시하도록 정렬하면 상당한 비율의 변화를 볼 수 있습니다.
  • 성능 문제를 알리는 이메일 알림을 받습니다.

다음과 같은 방법으로 문제 해결 페이지에 액세스할 수 있습니다.

  • 메트릭 대시보드에서 메트릭 세부 정보 보기 버튼을 클릭합니다.
  • 측정항목 카드에서 => 세부정보 보기 를 선택합니다. 문제 해결 페이지에는 선택한 메트릭에 대한 정보가 표시됩니다.
  • 추적 테이블에서 추적 이름 또는 해당 추적과 연결된 행의 메트릭 값을 클릭합니다.
  • 이메일 알림에서 지금 조사 를 클릭합니다.

트레이스 테이블에서 트레이스 이름을 클릭하면 관심 있는 메트릭으로 드릴다운할 수 있습니다. 필터 버튼을 클릭하여 속성별로 데이터를 필터링합니다. 예를 들면 다음과 같습니다.

속성별로 필터링되는 Firebase Performance Monitoring 데이터의 이미지
  • 페이지 URL 로 필터링하여 사이트의 특정 페이지에 대한 데이터 보기
  • 효과적인 연결 유형 으로 필터링하여 3g 연결이 앱에 미치는 영향 알아보기
  • 데이터베이스 위치가 특정 지역에 영향을 미치지 않도록 국가 별로 필터링

추적에 대해 수집된 모든 측정항목 보기

추적을 클릭하면 관심 있는 측정항목으로 드릴다운할 수 있습니다.

  • 네트워크 요청 추적 - 사용 가능한 메트릭 탭은 응답 시간응답 페이로드 크기 입니다.
  • 사용자 지정 코드 추적 - 기간 메트릭 탭은 항상 사용할 수 있습니다(이 유형의 추적에 대한 기본 메트릭). 사용자 지정 코드 추적에 사용자 지정 메트릭을 추가한 경우 해당 메트릭 탭도 표시됩니다.
  • 페이지 로드 추적 — 사용 가능한 메트릭 탭에는 첫 번째 페인트 , 첫 번째 콘텐츠 페인트 , 첫 번째 입력 지연 및 DOM 관련 이벤트가 포함됩니다.
Firebase Performance Monitoring 분포도 이미지

메트릭 탭 바로 아래에서 선택한 메트릭에 대한 성능 요약을 찾을 수 있습니다. 여기에는 시간 경과에 따른 메트릭 추세에 대한 한 문장 개요와 선택한 전체 날짜 범위에 걸쳐 데이터 분포를 시각화하는 차트가 포함됩니다.

데이터에 대한 자세한 정보 보기

속성별로 데이터를 필터링 및 세그먼트화하거나 클릭하여 앱 사용 세션의 컨텍스트에서 데이터를 볼 수 있습니다.

예를 들어 최근 네트워크 응답 시간이 느린 이유와 국가가 성능에 영향을 미치는지 여부를 이해하려면 다음 단계를 따르십시오.

  1. 속성 드롭다운에서 국가 를 선택합니다.
  2. 표에서 최신 값을 기준으로 정렬하여 네트워크 응답 시간에 가장 큰 영향을 미치는 국가를 확인하세요.
  3. 최신 값이 가장 큰 국가를 선택하여 그래프에 표시합니다. 그런 다음 그래프의 타임라인 위로 커서를 가져가면 해당 국가에서 네트워크 응답 시간이 느려진 시기를 알 수 있습니다.
  4. 특정 국가에서 네트워크 응답 시간 문제의 근본 원인을 자세히 조사하려면 해당 국가에 대한 필터를 추가하고 다른 속성(예: 무선 유형 및 장치)에 대해 계속 조사합니다.