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

페이지 로딩 성능 데이터에 대해 알아보기(웹 앱)

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

성능 모니터링은 추적 을 사용하여 앱에서 모니터링되는 프로세스에 대한 데이터를 수집합니다. 추적은 앱의 두 시점 사이에 캡처된 데이터가 포함된 보고서입니다.

웹 앱의 경우 Performance Monitoring은 페이지 로드 추적 이라는 앱의 각 페이지에 대한 추적을 자동으로 수집합니다. 각 페이지 로드 추적은 다음 기본 측정항목을 수집합니다.

  • 첫 번째 페인트 — 사용자가 페이지를 탐색하는 시점과 시각적인 변화가 발생 하는 시점 사이의 시간을 측정하는 측정항목

  • 첫 번째 콘텐츠가 포함된 페인트 — 사용자가 페이지를 탐색하는 시점과 이미지나 텍스트와 같은 의미 있는 콘텐츠가 표시되는 시점 사이의 시간을 측정하는 측정항목

  • domInteractive — 사용자가 페이지를 탐색하는 시점과 페이지가 사용자에 대해 상호작용하는 것으로 간주되는 시점 사이의 시간을 측정하는 메트릭

  • domContentLoadedEventEnd — 사용자가 페이지로 이동한 시점과 초기 HTML 문서가 완전히 로드되고 구문 분석된 시점 사이의 시간을 측정하는 측정항목

  • loadEventEnd — 사용자가 페이지로 이동할 때와 현재 문서의 로드 이벤트 가 완료될 때 사이의 시간을 측정하는 측정항목

  • 첫 번째 입력 지연 — 사용자가 페이지와 상호 작용하는 시간과 브라우저가 해당 입력에 응답할 수 있는 시간 사이의 시간을 측정하는 메트릭

성능 대시보드 하단에 있는 추적 테이블의 페이지 로드 하위 탭에서 이러한 추적의 데이터를 볼 수 있습니다(이 페이지 뒷부분에서 콘솔 사용에 대해 자세히 알아보기).

페이지 로드 추적의 정의

이 추적은 앱의 페이지가 로드되는 방식, 특히 반응형 앱과 같은 일반적인 로드 지점에 도달하는 데 걸리는 시간에 대한 여러 측정항목을 측정합니다.

페이지 로드 추적은 콘텐츠가 포함된 첫 번째 페인트와 같은 앱의 핵심 웹 바이탈 을 추적하는 데 도움이 됩니다.

페이지 로드 추적에 대해 수집된 측정항목

이러한 추적은 즉시 사용 가능한 추적이므로 여기에 사용자 지정 메트릭 또는 사용자 지정 특성을 추가할 수 없습니다.

첫 번째 페인트

이 측정항목은 사용자가 페이지로 이동한 시점과 시각적인 변화가 발생한 시점 사이의 시간을 측정합니다.

이 측정항목은 첫 번째 페인트가 페이지 로드를 시작 한다는 신호를 사용자에게 보내기 때문에 유용합니다.

  • 사용자가 페이지로 이동할 때 시작됩니다.

  • 배경색 변경 또는 헤더 로드를 포함 하여 시각적 변경이 발생하면 중지됩니다.

첫 번째 만족스러운 페인트

이 측정항목은 사용자가 페이지로 이동한 시점과 이미지나 텍스트와 같은 의미 있는 콘텐츠가 표시되는 시점 사이의 시간을 측정합니다.

이 측정항목은 사용자가 새로운 배경색이나 헤더가 아닌 앱의 실제 콘텐츠를 얼마나 빨리 보게 되는지에 대한 통찰력에 유용합니다.

  • 사용자가 페이지로 이동할 때 시작됩니다.

  • 브라우저가 텍스트, 이미지(배경 이미지 포함), 흰색이 아닌 캔버스 또는 SVG를 포함하여 DOM의 첫 번째 콘텐츠를 렌더링한 직후 중지됩니다.

domInteractive

이 측정항목은 사용자가 페이지로 이동한 시간과 페이지가 사용자에 대해 대화형으로 간주되는 시간 사이의 시간을 측정합니다.

이 측정항목은 사용자가 버튼 및 하이퍼링크와 같은 앱의 요소를 화면에서 보는 것이 아니라 실제로 얼마나 빨리 앱의 요소와 상호작용할 수 있는지에 대한 통찰력에 유용합니다. 이것이 브라우저가 상호작용에 응답한다는 것을 의미하지는 않습니다(이 메트릭의 경우 첫 번째 입력 지연 추적 참조).

  • 사용자가 페이지로 이동할 때 시작됩니다.

  • 사용자 에이전트가 현재 HTML 문서의 준비 상태를 "대화형"으로 설정하기 직전에 중지합니다.

domContentLoadedEventEnd

이 측정항목은 사용자가 페이지를 탐색하는 시간과 초기 HTML 문서가 완전히 로드되고 구문 분석되는 시간 사이의 시간을 측정합니다.

  • 사용자가 페이지로 이동할 때 시작됩니다.

  • 초기 HTML 문서가 완전히 로드되고 구문 분석된 직후( DOMContentLoaded ) 중지되지만 이것이 스타일시트, 이미지 및 하위 프레임 로드가 완료되었음을 의미하지는 않습니다.

로드 이벤트 종료

이 측정항목은 사용자가 페이지로 이동한 시점과 현재 문서의 로드 이벤트 가 완료된 시점 사이의 시간을 측정합니다.

이 측정항목은 스타일시트 및 이미지를 포함한 모든 콘텐츠를 로드하는 데 걸리는 시간에 대한 통찰력에 유용합니다.

  • 사용자가 페이지로 이동할 때 시작됩니다.

  • 현재 HTML 문서의 로드 이벤트가 완료된 직후에 중지됩니다.

첫 번째 입력 지연

이 측정항목은 사용자가 페이지와 상호작용하는 시간과 브라우저가 해당 입력에 응답할 수 있는 시간 사이의 시간을 측정합니다.

이 측정항목은 사용자 상호작용에 응답하는 브라우저가 사용자에게 앱의 응답성에 대한 첫인상을 주기 때문에 유용합니다.

  • 사용자가 버튼이나 하이퍼링크를 클릭하는 것과 같이 페이지의 요소와 처음 상호작용할 때 시작됩니다.

  • 브라우저가 입력에 응답할 수 있는 즉시 중지됩니다. 즉, 브라우저가 콘텐츠를 로드하거나 구문 분석하는 데 바쁘지 않습니다.

첫 번째 입력 지연 메트릭을 측정하려면 이 메트릭에 대한 폴리필 라이브러리를 추가해야 합니다. 설치 지침은 라이브러리 설명서 를 참조하십시오.

성능 데이터 추적, 보기 및 필터링

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

대시보드에서 주요 지표 추적

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

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

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

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

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

대시보드 사용에 대해 자세히 알아보세요.

추적 및 해당 데이터 보기

추적을 보려면 Firebase 콘솔의 성능 대시보드 로 이동하여 추적 표까지 아래로 스크롤한 다음 해당 하위 탭을 클릭합니다. 표에는 각 추적에 대한 몇 가지 상위 메트릭이 표시되며 특정 메트릭에 대한 백분율 변경을 기준으로 목록을 정렬할 수도 있습니다.

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

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

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

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

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

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

추적 데이터 보기 에 대해 자세히 알아보세요.

다음 단계

  • 속성을 사용하여 성능 데이터를 검사하는 방법에 대해 자세히 알아보세요.

  • Firebase 콘솔에서 성능 문제를 추적 하는 방법에 대해 자세히 알아보세요.

  • 앱의 성능을 저하시키는 페이지 로드에 대한 알림을 설정합니다 . 예를 들어 특정 페이지에 대한 첫 번째 입력 지연 이 설정한 임계값을 초과하는 경우 팀에 대한 이메일 알림을 구성할 수 있습니다.