콘솔로 이동

웹에서 Performance Monitoring 시작하기

시작하기 전에

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

  • Firebase 프로젝트 만들기

  • Firebase로 웹 앱 등록

Firebase 프로젝트에 앱을 추가할 때 다음 가이드에 나오는 단계 중 일부를 완료해야 할 수도 있습니다(예: Firebase SDK 추가 및 Firebase 초기화).

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

아직 준비되지 않았다면 아래의 옵션 중 하나를 사용하여 앱에 Performance Monitoring SDK를 추가하고 Firebase를 초기화합니다. 다음의 내용을 참조하면 적절한 옵션을 선택하는 데 도움이 됩니다(자세한 내용은 개별 탭 참조).

  • CDN에서 추가(독립형 SDK) - 앱에서 Firebase 제품으로 Performance Monitoring만 사용 중이면 이 옵션을 통해 CDN에서 경량 SDK 하나를 로드합니다.

  • CDN에서 추가(표준 SDK) - 앱에서 다른 Firebase 제품도 사용 중이면 이 옵션을 통해 CDN에서 Performance Monitoring SDK와 함께 다른 Firebase 라이브러리도 로드합니다.

  • 호스팅 URL에서 추가 — Firebase 호스팅을 사용 중이면 Firebase를 초기화할 때 이 옵션을 통해 Firebase 구성을 편리하게 관리할 수 있습니다.

  • 모듈 Bundler 사용 — Bundler(예: Browserify 또는 webpack)를 사용 중이면 이 옵션을 통해 필요에 따라 개별 모듈을 가져올 수 있습니다.

SDK를 추가하면 Firebase에서 자동 traceHTTP/S 네트워크 요청 모니터링을 바로 시작합니다.

CDN에서 추가

Firebase 자바스크립트 SDK의 일부만 가져오거나 필요한 Firebase 라이브러리만 로드하도록 구성할 수 있습니다. Firebase는 Google의 글로벌 CDN(콘텐츠 전송 네트워크)에 Firebase 자바스크립트 SDK의 각 라이브러리를 저장합니다.

다음 두 가지 옵션을 사용하면 CDN에서 Performance Monitoring SDK를 포함할 수 있습니다.

  • 독립형 SDK — Performance Monitoring이 앱에서 사용 중인 유일한 Firebase 제품인 경우에 해당합니다.
  • 표준 SDK — 앱에서 다른 Firebase 제품과 함께 Performance Monitoring을 사용 중인 경우에 해당합니다.

독립형 SDK

Performance Monitoring이 앱에 있는 유일한 Firebase 제품인 경우 다음 작업이 필요하면 독립형 Performance Monitoring SDK와 아래의 권장 헤더 스크립트를 사용하세요.

  • SDK 패키지 크기 줄이기
  • 페이지가 로드된 후까지 SDK 초기화 연기

앱에 독립형 Performance Monitoring SDK를 포함하고 페이지가 로드된 후까지 초기화를 연기하려면 다음을 수행합니다.

  1. 인덱스 파일의 헤더에 다음 스크립트를 추가합니다.
  2. Firebase 프로젝트 구성 객체를 추가해야 합니다.
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);window.onload = function() {firebase.initializeApp(fbc).performance();};
})(performance_standalone, firebaseConfig);

각 항목의 의미는 다음과 같습니다.

  • performance_standalone'https://www.gstatic.com/firebasejs/6.4.0/firebase-performance-standalone.js'입니다.
  • firebaseConfig는 앱의 Firebase 구성 객체입니다.

위의 스크립트는 독립형 SDK를 비동기식으로 로드한 창의 onload 이벤트가 발생하면 Firebase를 초기화합니다. 이 방법은 브라우저에서 이미 SDK 초기화 시 로드되는 측정항목을 보고했기 때문에 SDK가 페이지 로드 측정항목에 미치는 영향을 줄여줍니다.

표준 SDK

앱에서 다른 Firebase 제품(예: 인증 또는 Cloud Firestore)을 사용 중이면 표준 Performance Monitoring SDK를 포함하세요.

이 SDK를 포함하려면 별도의 표준 Firebase core SDK를 포함하고 별도의 스크립트로 Firebase 및 Performance Monitoring을 초기화해야 합니다.

  1. 표준 Performance Monitoring SDK를 포함하려면 Firebase 서비스를 사용하기 전에 <body> 태그 하단에 다음 스크립트를 추가합니다.

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-performance.js"></script>
    <body>
    
  2. 앱에서 Firebase 및 Performance Monitoring을 초기화합니다.

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

호스팅 URL에서 추가

Firebase 호스팅을 사용 중이면 예약된 URL에서 동적으로 Firebase 자바스크립트 SDK 라이브러리를 로드하도록 앱을 구성할 수 있습니다. 자세한 내용은 예약된 호스팅 URL을 통해 SDK 추가에서 확인해 보세요.

이 설정 옵션을 사용하면 Firebase에 배포한 후 배포한 Firebase 프로젝트에서 Firebase 구성 객체를 앱이 자동으로 가져옵니다. 동일한 코드베이스를 여러 Firebase 프로젝트에 배포할 수 있지만 firebase.initializeApp()에 사용 중인 Firebase 구성을 추적할 필요는 없습니다.

  1. Performance Monitoring SDK를 포함하려면 <body> 태그 하단에 다음 스크립트를 추가하세요. 단, Firebase 서비스를 사용하기 전에 진행해야 합니다.

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/6.4.0/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/6.4.0/firebase-performance.js"></script>
    </body>
    
  2. 앱에서 Firebase 및 Performance Monitoring을 초기화합니다. 예약된 호스팅 URL을 사용하는 경우에는 Firebase 구성 객체를 포함시킬 필요가 없습니다.

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

모듈 Bundler 사용

Firebase 자바스크립트 SDK의 일부만 가져오거나 필요한 Firebase 제품만 로드하도록 구성할 수 있습니다. Bundler(예: Browserify 또는 webpack)를 사용하는 경우 Firebase 제품을 필요할 때 개별적으로 import할 수 있습니다.

  1. 다음 명령어를 실행하여 firebase npm 패키지를 설치하고 package.json 파일에 저장합니다.

    npm install --save firebase
  2. Performance Monitoring SDK를 포함하려면 Firebase 모듈을 import합니다.

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. 앱에서 Firebase 및 Performance Monitoring을 초기화합니다.

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
    // Initialize Performance Monitoring and get a reference to the service
    const perf = firebase.performance();
    

2단계: 첫 입력 지연 polyfill 라이브러리 추가

첫 입력 지연 측정항목을 측정하려면 이 측정항목에 polyfill 라이브러리를 추가해야 합니다. 설치 안내는 라이브러리 문서를 참조하세요.

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

3단계: Performance Monitoring의 데이터 로깅 여부 확인

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

  2. 몇 초 후에 Chrome 개발자 도구의 네트워크 또는 Firefox의 Network Monitor(네트워크 모니터)firebaselogging.googleapis.com에 대한 네트워크 호출이 표시되는지 확인합니다.

    네트워크 호출이 표시되면 브라우저에서 Firebase로 성능 데이터를 전송하고 있다는 의미입니다.

  3. Firebase Console에 Performance Monitoring 결과가 나타나는지 확인합니다.

    결과는 일반적으로 12시간 이내에 나타납니다.

4단계: (선택사항) 커스텀 trace 및 커스텀 측정항목 추가

커스텀 trace는 앱의 특정 코드에 연결된 성능 데이터 보고서입니다. 커스텀 trace에 관한 자세한 내용은 Performance Monitoring 개요를 참조하세요.

앱에 커스텀 trace가 여러 개 있을 수 있으며, 한 번에 둘 이상의 커스텀 trace를 실행할 수도 있습니다. 각 커스텀 trace에는 앱의 성능 관련 이벤트를 계수하는 하나 이상의 측정항목이 있을 수 있으며, 이러한 측정항목은 해당 측정항목을 생성한 trace와 연결됩니다.

커스텀 trace와 측정항목의 이름에는 선행 공백이나 후행 공백, 선행 밑줄(_)이 없어야 하며, 이름의 최대 길이는 32자(영문 기준)입니다.

  1. 커스텀 trace를 시작 및 중지하려면 trace를 생성할 코드를 다음과 유사한 코드 줄로 래핑해야 합니다.

    const trace = perf.trace('customTraceName');
    trace.start();
    
    // code that you want to trace
    
    trace.stop();
    
  2. 커스텀 측정항목을 추가하려면 이벤트가 발생할 때마다 다음과 유사한 코드 줄을 추가합니다. 예를 들어 이 커스텀 측정항목은 앱에서 발생한 성능 관련 이벤트를 계수합니다.

    async function getInventory(inventoryIds) {
      const trace = perf.trace('inventoryRetrieval');
    
      // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
      trace.incrementMetric('numberOfIds', inventoryIds.length);
    
      // Measures the time it takes to request inventory based on the amount of inventory
      trace.start();
      const inventoryData = await retrieveInventory(inventoryIds);
      trace.stop();
    
      return inventoryData;
    }
    

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

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

Firebase Console에서 성능 데이터를 모니터링할 수 있습니다.

다음 단계