Начало работы с Performance Monitoring для веб-сайтов

Подготовка

Если вы ещё этого не сделали, прочитайте статью Как добавить Firebase в проект JavaScript, чтобы узнать, как:

  • Создать проект Firebase

  • Зарегистрируйте веб-приложение в Firebase

Обратите внимание, что при добавлении Firebase в приложение вы можете выполнить некоторые шаги, описанные далее на этой странице (например, добавить SDK и инициализировать Firebase).

Шаг 1. Добавьте и инициализируйте Performance Monitoring

  1. Если вы ещё этого не сделали, установите Firebase JS SDK и инициализируйте Firebase.

  2. Добавьте JS SDK Performance Monitoring и инициализируйте 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();

SDK Performance Monitoring автоматически регистрирует основные интернет-показатели.

Шаг 2. Сгенерируйте события производительности для первоначального отображения данных

Firebase начнет обрабатывать события, когда вы добавите SDK в приложение. Если вы все ещё разрабатываете приложение локально, взаимодействуйте с ним, чтобы генерировать события для первоначального сбора и обработки данных.

  1. Запустите и посмотрите веб-приложение в локальной среде.

  2. Сгенерируйте события, загрузив подстраницы сайта, выполнив действия в приложении и/или активировав сетевые запросы. Не закрывайте вкладку браузера в течение как минимум 10 секунд после загрузки страницы.

  3. Перейдите на панель управления Эффективность в консоли Firebase. Первые данные должны появиться в течение нескольких минут.

    Если вы не видите свои данные, ознакомьтесь с советами по устранению неполадок.

Шаг 3. (Необязательно.) Просмотрите сообщения в журнале, связанные с событиями производительности

  1. Откройте инструменты разработчика в браузере (например, вкладку Network (Сеть) в Chrome или Network Monitor (Монитор сети) в Firefox).

  2. Обновите веб-приложение в браузере.

  3. Проверьте сообщения в журнале на наличие сообщений об ошибках.

  4. Через несколько секунд найдите в инструментах разработчика браузера сетевой вызов firebaselogging.googleapis.com. Наличие этого сетевого вызова показывает, что браузер отправляет данные о производительности в Firebase.

Если ваше приложение не регистрирует события производительности, ознакомьтесь с советами по устранению неполадок.

Шаг 4. (Необязательно.) Добавьте специальный мониторинг для определенного кода

Чтобы отслеживать данные об эффективности, связанные с определенным кодом в приложении, можно использовать трассировку пользовательского кода.

С помощью трассировки пользовательского кода можно измерить, сколько времени требуется приложению для выполнения определенной задачи или набора задач, например загрузки набора изображений или запроса к базе данных. По умолчанию для трассировки пользовательского кода используется показатель длительности, но вы также можете добавить специальные показатели, например совпадения в кеше и предупреждения о памяти.

В коде вы определяете начало и конец трассировки пользовательского кода (и добавляете любые нужные пользовательские показатели), используя API, предоставляемый Performance Monitoring SDK.

Чтобы узнать больше об этих функциях и о том, как добавить их в приложение, прочитайте статью Как добавить мониторинг для определенного кода.

Шаг 5. Разверните приложение и посмотрите результаты

После проверки Performance Monitoring вы можете развернуть обновленную версию приложения для пользователей.

Отслеживать данные об эффективности можно на панели Эффективность в консоли Firebase.

Дальнейшие действия