웹에서 Performance Monitoring 시작하기

시작하기 전에

아직 준비되지 않았다면 자바스크립트 프로젝트에 Firebase 추가에서 다음을 수행하는 방법을 알아보세요.

  • Firebase 프로젝트 만들기

  • Firebase에 웹 앱 등록

Firebase를 앱에 추가할 때 이 페이지의 뒷부분에서 설명하는 단계 중 일부를 완료해야 할 수도 있습니다(예: SDK 추가 및 Firebase 초기화).

1단계: Performance Monitoring 추가 및 초기화

  1. 아직 진행하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화합니다.

  2. Performance Monitoring JS SDK를 추가하고 Performance Monitoring을 초기화합니다.

Web 

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

2단계: 최초 입력 반응 시간(FID) polyfill 라이브러리 추가

최초 입력 반응 시간 측정항목을 측정하려면 이 측정항목에 대한 polyfill 라이브러리를 추가해야 합니다. 설치 안내는 라이브러리 문서를 참조하세요.

Performance Monitoring에서 다른 웹 앱 측정항목을 보고하는 경우에는 이 polyfill 라이브러리를 추가하지 않아도 됩니다.

3단계: 초기 데이터 표시를 위한 성능 이벤트 생성

앱에 SDK를 성공적으로 추가하면 Firebase에서 이벤트 처리를 시작합니다. 로컬에서 개발 중인 경우에는 앱과 상호작용하여 초기 데이터 수집 및 처리를 위한 이벤트를 생성합니다.

  1. 로컬 환경에 웹 앱을 제공하고 확인합니다.

  2. 사이트의 하위 페이지를 로드하고, 앱과 상호작용하거나 네트워크 요청을 트리거하여 이벤트를 생성합니다. 페이지 로드 후 10초 이상 브라우저 탭을 열어두어야 합니다.

  3. Firebase Console의 성능 대시보드로 이동합니다. 몇 분 이내에 초기 데이터가 표시됩니다.

    초기 데이터가 표시되지 않으면 문제 해결 팁을 검토하세요.

4단계: (선택사항) 성능 이벤트에 대한 로그 메시지 보기

  1. 브라우저의 개발자 도구(예: Chrome 개발자 도구의 네트워크 탭 또는 Firefox의 네트워크 모니터)를 엽니다.

  2. 브라우저에서 웹 앱을 새로고침합니다.

  3. 로그 메시지에 오류 메시지가 있는지 확인합니다.

  4. 몇 초 후에 브라우저의 개발자 도구에 firebaselogging.googleapis.com에 대한 네트워크 호출이 표시되는지 확인합니다. 네트워크 호출이 표시되면 브라우저에서 Firebase로 성능 데이터를 전송하고 있다는 의미입니다.

앱에서 성능 이벤트를 로깅하고 있지 않으면 문제 해결 팁을 검토하세요.

5단계: (선택사항) 특정 코드에 대한 커스텀 모니터링 추가

앱의 특정 코드에 연결된 성능 데이터를 모니터링하려면 커스텀 코드 trace를 계측하면 됩니다.

커스텀 코드 trace를 사용하면 이미지 모음을 로드하거나 데이터베이스를 쿼리하는 등 앱이 특정 작업 또는 일련의 작업을 완료하는 데 걸리는 시간을 파악할 수 있습니다. 커스텀 코드 trace의 기본 측정항목은 기간이지만 캐시 적중 및 메모리 경고와 같은 커스텀 측정항목도 추가할 수 있습니다.

Performance Monitoring SDK에서 제공하는 API를 사용하여 코드에 커스텀 코드 trace의 시작과 끝을 정의하고 원하는 커스텀 측정항목을 추가합니다.

이러한 기능에 대한 정보와 앱에 기능을 추가하는 방법을 자세히 알아보려면 특정 코드에 대한 모니터링 추가를 참조하세요.

6단계: 앱 배포 후 결과 확인

Performance Monitoring을 검증한 후 업데이트된 앱 버전을 사용자에게 배포할 수 있습니다.

Firebase Console의 성능 대시보드에서 성능 데이터를 모니터링할 수 있습니다.

다음 단계