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

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

웹 앱의 경우 자동으로 모니터링 성능은 페이지로드 추적라는 응용 프로그램의 각 페이지에 대해 추적을 수집합니다. 각 페이지 로드 추적은 다음 기본 측정항목을 수집합니다.

  • 제 페인트 - 측정하는 메트릭 때 페이지 사용자 탐색 한 때 시각적 인 변화가 발생 사이의 시간

  • 첫째 contentful 페인트 - 메트릭이 조치 이미지 또는 텍스트와 같은 페이지에있는 경우 사용자를 탐색하고 의미있는 콘텐츠를 디스플레이 사이의 시간

  • domInteractive - 메트릭이 조치 페이지와에 대한 사용자를 탐색이 페이지가 사용자의 상호 작용 고려할 때 때 사이의 시간

  • domContentLoadedEventEnd - 메트릭이 측정 할 때 사용자의 페이지로 이동합니다 사이의 시간 초기 HTML 문서가 완전히로드 및 구문 분석 할 때

  • loadEventEnd - 메트릭이 측정 할 때 페이지에 대한 사용자를 탐색하고 현재 문서의로드 이벤트 완료 사이의 시간

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

당신은 성능 대시 보드의 맨 아래에있는 추적 테이블의 페이지로드 하위 탭에서 이러한 흔적에서 데이터를 볼 수 있습니다 (에 대해 자세히 알아 콘솔을 사용하여 이 페이지 이상).

페이지 로드 추적의 정의

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

페이지로드 흔적 앱의 추적 할 수 있도록 핵심 웹 바이탈를 처음 contentful 페인트처럼.

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

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

첫 번째 페인트

이 메트릭 시각적 변화가 발생했을 때, 사용자가 페이지를 탐색 할 때까지의 시간.

이 통계는 페이지가로드로 시작되는 사용자에 대한 첫 번째 페인트 신호 이후에 유용합니다.

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

  • 시각적 인 변화가 배경 색상 변경 또는 헤더로드를 포함하여, 일어날 때 중지합니다.

첫 번째 만족스러운 페인트

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

  • 초기 HTML 문서가 완전히로드 (구문 분석 후 즉시 중지 DOMContentLoaded )하지만,이 스타일 시트, 이미지 및 서브 프레임이 완료로드 것을 의미하지 않는다.

로드 이벤트 종료

이 메트릭 사용자가 현재 문서의로드 이벤트 완료 페이지로 때 이동할 때까지의 시간.

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

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

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

첫 번째 입력 지연

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

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

  • 버튼이나 하이퍼 링크를 클릭하는 것과 같은, 페이지 요소로 될 때 사용자 상호 작용을 먼저 시작한다.

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

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

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

실시간 성능 데이터를 보려면 앱이 실시간 데이터 처리와 호환되는 Performance Monitoring SDK 버전을 사용하는지 확인하십시오. 자세히 알아보기 .

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

키 메트릭 추세를하는 방법에 대한 자세한 내용은, 성능 대시 보드 상단에서 측정 보드에 추가합니다. 주간 변경 사항을 확인하여 회귀를 빠르게 식별하거나 코드의 최근 변경 사항으로 인해 성능이 향상되고 있는지 확인할 수 있습니다.

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

로 이동 측정 보드에 메트릭을 추가하려면 성능 대시 보드 중포 기지 콘솔에서 다음 대시 보드 탭을 클릭합니다. 빈 메트릭 카드를 클릭한 다음 보드에 추가할 기존 메트릭을 선택합니다. 클릭 교체하거나 메트릭을 제거하는 것처럼, 더 많은 옵션에 대한 인구 통계 카드.

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

에 대해 자세히 알아보기 대시 보드를 사용하여 .

추적 및 해당 데이터 보기

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

추적 테이블에서 추적 이름을 클릭하면 다양한 화면을 클릭하여 추적을 탐색하고 관심 있는 메트릭으로 드릴다운할 수 있습니다. 대부분의 페이지에, 당신은 필터 사용할 수있는 예를 들어, 속성으로 데이터를 필터링 (화면의 상단이 왼쪽) 버튼을 :

속성별로 필터링되는 Firebase Performance Monitoring 데이터의 이미지
  • 페이지 URL을 기준으로 필터링 사이트의 특정 페이지에 대한 데이터를 볼 수 있습니다
  • 효과적인 연결 유형에 의한 필터 배우는 방법 3G 연결이 영향 당신의 응용 프로그램을
  • 국가별로 필터는 반드시 데이터베이스 위치가 특정 지역에 영향을 미치는 있지 않은지 확인하기

에 대해 자세히 알아보기 당신의 흔적에 대한 데이터를 볼 수 .

다음 단계