Мониторинг производительности Firebase для Интернета

1. Обзор

В этом практическом занятии вы узнаете, как использовать Firebase Performance Monitoring для измерения производительности веб-приложения чата. Для просмотра демонстрации перейдите по ссылке https://fireperf-friendlychat.web.app/ .

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

Что вы узнаете

• Как добавить Firebase Performance Monitoring в ваше веб-приложение для получения стандартных метрик (загрузка страницы и сетевые запросы).
• Как измерить эффективность конкретного фрагмента кода с помощью пользовательских трассировок.
• Как записывать дополнительные пользовательские метрики, привязанные к пользовательской трассировке.
• Как дополнительно сегментировать данные о производительности с помощью пользовательских атрибутов.
• Как использовать панель мониторинга производительности для анализа производительности вашего веб-приложения.

Что вам понадобится

• IDE или текстовый редактор на ваш выбор, например WebStorm , Atom , Sublime или VS Code.
• Терминал/консоль
• Любой браузер на ваш выбор, например Chrome.
• Пример кода из этого руководства (инструкции по получению кода см. в следующем разделе этого руководства).

2. Получите пример кода.

Клонируйте репозиторий codelab на GitHub из командной строки:

git clone https://github.com/firebase/codelab-friendlychat-web

В качестве альтернативы, если у вас не установлен Git, вы можете загрузить репозиторий в виде ZIP-файла .

В репозитории friendlychat-web содержатся примеры проектов для различных платформ.

В этом практическом занятии используются только эти два репозитория:

• 📁 performance-monitoring-start : Начальный код, на основе которого вы будете строить свою работу в ходе этого практического занятия.
• 📁 Мониторинг производительности : Полный код готового демонстрационного приложения.

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

Импортируйте стартовое приложение

С помощью вашей IDE откройте или импортируйте каталог 📁 performance-monitoring-start из клонированного репозитория. Этот каталог 📁 performance-monitoring-start содержит начальный код для практического занятия, представляющего собой веб-приложение для чата.

3. Создайте и настройте проект Firebase.

Создайте проект Firebase.

1. Войдите в консоль Firebase, используя свою учетную запись Google.
2. Нажмите кнопку, чтобы создать новый проект, а затем введите название проекта (например, FriendlyChat ).
   

   Это название проекта используется в качестве отображаемого имени в интерфейсах Firebase, и Firebase автоматически создает уникальный идентификатор проекта на основе этого названия. Обратите внимание, что теперь вы можете нажать значок «Редактировать» , чтобы установить желаемый идентификатор проекта, но изменить этот идентификатор после создания проекта будет невозможно.

   Запомните идентификатор своего проекта, так как он понадобится вам позже для идентификации вашего проекта Firebase в Firebase CLI. Если вы забудете свой идентификатор, вы всегда сможете найти его позже в настройках проекта .

3. Нажмите «Продолжить» .
4. Если появится запрос, ознакомьтесь с условиями использования Firebase и примите их, после чего нажмите «Продолжить» .
5. (Необязательно) Включите помощь ИИ в консоли Firebase (в Firebase она называется "Gemini").
6. Для этого практического занятия вам не понадобится Google Analytics, поэтому отключите эту опцию.
7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

Обновите свой тарифный план Firebase.

Для использования Cloud Storage for Firebase ваш проект Firebase должен быть подключен к тарифному плану с оплатой по мере использования (Blaze) , то есть он должен быть связан с учетной записью Cloud Billing .

• Для использования учетной записи Cloud Billing требуется способ оплаты, например, кредитная карта.
• Если вы новичок в Firebase и Google Cloud, проверьте, имеете ли вы право на получение кредита в размере 300 долларов США и бесплатной пробной версии учетной записи Cloud Billing .
• Если вы выполняете этот практический семинар в рамках мероприятия, уточните у организатора, есть ли возможность получить облачные кредиты.

Чтобы перейти на тарифный план Blaze для вашего проекта, выполните следующие шаги:

1. В консоли Firebase выберите вариант обновления вашего тарифного плана .
2. Выберите тарифный план Blaze. Следуйте инструкциям на экране, чтобы связать учетную запись Cloud Billing с вашим проектом.
   Если в рамках этого обновления вам потребовалось создать учетную запись Cloud Billing, возможно, вам нужно будет вернуться к процессу обновления в консоли Firebase, чтобы завершить обновление.

Примечание : После завершения этого практического занятия вы можете перейти на бесплатный тарифный план (Spark) для своего проекта .

Добавьте веб-приложение Firebase в проект.

1. Нажмите на значок веб-браузера создать новое веб-приложение Firebase.
2. Зарегистрируйте приложение под псевдонимом Friendly Chat , а затем поставьте галочку рядом с пунктом «Также настройте Firebase Hosting для этого приложения» .
3. Нажмите «Зарегистрировать приложение» .
4. Выполните оставшиеся шаги. Сейчас вам не нужно следовать инструкциям на экране; они будут рассмотрены на следующих этапах этого практического занятия.

Включите вход через Google для аутентификации Firebase.

Чтобы пользователи могли входить в приложение чата с помощью своих учетных записей Google, мы будем использовать метод входа через Google .

Вам потребуется включить вход через Google :

1. В консоли Firebase найдите раздел «Разработка» на левой панели.
2. Нажмите «Аутентификация» , затем перейдите на вкладку «Способ входа» ( перейдите в консоль ).
3. Включите авторизацию через Google , а затем нажмите «Сохранить» .

Настройка Cloud Firestore

Веб-приложение использует Cloud Firestore для сохранения сообщений чата и получения новых сообщений.

Вот как настроить Cloud Firestore в вашем проекте Firebase:

1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите базу данных Firestore .
2. Нажмите «Создать базу данных» .
3. Оставьте значение параметра " Идентификатор базы данных" равным (default) .
4. Выберите местоположение для вашей базы данных, затем нажмите «Далее» .
   Для создания настоящего приложения вам следует выбрать местоположение, расположенное недалеко от ваших пользователей.
5. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
   В дальнейшем в этом практическом занятии вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению, не добавив правила безопасности для вашей базы данных.
6. Нажмите «Создать» .

Настройка облачного хранилища для Firebase

Веб-приложение использует Cloud Storage for Firebase для хранения, загрузки и обмена фотографиями.

Вот как настроить Cloud Storage для Firebase в вашем проекте Firebase:

1. В левой панели консоли Firebase разверните раздел «Сборка» , а затем выберите «Хранилище» .
2. Нажмите « Начать» .
3. Выберите местоположение для вашего хранилища по умолчанию.
   Для регионов US-WEST1 , US-CENTRAL1 и US-EAST1 доступен тариф "Всегда бесплатно" от Google Cloud Storage. Для регионов во всех остальных регионах действуют тарифные планы и правила использования Google Cloud Storage .
4. Нажмите «Пуск» в тестовом режиме . Ознакомьтесь с отказом от ответственности в отношении правил безопасности.
   В дальнейшем в этом практическом занятии вы добавите правила безопасности для защиты ваших данных. Не распространяйте и не предоставляйте публичный доступ к приложению без добавления правил безопасности для вашего хранилища.
5. Нажмите «Создать» .

4. Установите интерфейс командной строки Firebase.

Интерфейс командной строки Firebase (CLI) позволяет использовать Firebase Hosting для локального запуска вашего веб-приложения, а также для развертывания вашего веб-приложения в вашем проекте Firebase.

1. Установите CLI, следуя инструкциям в документации Firebase.
2. Убедитесь в правильности установки CLI, выполнив следующую команду в терминале:

firebase --version

Убедитесь, что используемая вами версия Firebase CLI — v8.0.0 или более поздняя.

3. Для авторизации Firebase CLI выполните следующую команду:

firebase login

Мы настроили шаблон веб-приложения таким образом, чтобы он получал конфигурацию вашего приложения для Firebase Hosting из локального каталога вашего приложения (репозитория, который вы клонировали ранее в практическом задании). Но для получения этой конфигурации нам необходимо связать ваше приложение с вашим проектом Firebase.

4. Убедитесь, что ваша командная строка обращается к локальному каталогу performance-monitoring-start вашего приложения.
5. Свяжите ваше приложение с вашим проектом Firebase, выполнив следующую команду:

firebase use --add

6. При появлении запроса выберите идентификатор вашего проекта, а затем присвойте вашему проекту Firebase псевдоним.

Псевдоним полезен, если у вас несколько сред (production, staging и т. д.). Однако для этого практического занятия давайте просто воспользуемся псевдонимом default .

7. Следуйте оставшимся инструкциям в командной строке.

5. Интеграция с Firebase Performance Monitoring

Существует несколько способов интеграции с SDK Firebase Performance Monitoring для веб-приложений (подробности см. в документации ). В этом практическом занятии мы включим мониторинг производительности с URL-адресов хостинга .

Добавьте мониторинг производительности и инициализируйте Firebase.

1. Откройте файл src/index.js и добавьте следующую строку после TODO , чтобы включить SDK для мониторинга производительности Firebase.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. Нам также необходимо инициализировать SDK Firebase объектом конфигурации, содержащим информацию о проекте Firebase и веб-приложении, которое мы хотим использовать. Поскольку мы используем Firebase Hosting, вы можете импортировать специальный скрипт, который выполнит эту настройку за вас. Для этого практического задания мы уже добавили следующую строку в конец файла public/index.html , но убедитесь, что она там присутствует.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. В файле src/index.js добавьте следующую строку после TODO , чтобы инициализировать мониторинг производительности.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

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

Добавьте первую библиотеку полифилов задержки ввода.

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

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

Эта библиотека полифилов является необязательной для интеграции с системами мониторинга производительности.

Откройте файл public/index.html и раскомментируйте следующую строку.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

На этом этапе интеграция с Firebase Performance Monitoring в вашем коде завершена!

Существуют и другие способы интеграции с SDK Firebase Performance Monitoring для веб-приложений. Подробнее см. раздел «Начало работы с Performance Monitoring для веб-приложений» .

В следующих шагах вы узнаете о добавлении пользовательских трассировок с помощью Firebase Performance Monitoring. Если вам нужны только автоматические трассировки, перейдите в раздел «Развертывание и начало отправки образов».

6. Добавьте пользовательскую трассировку в ваше приложение.

Мониторинг производительности позволяет создавать пользовательские трассировки . Пользовательская трассировка — это отчет за время выполнения блока кода в вашем приложении. Вы определяете начало и конец пользовательской трассировки с помощью API, предоставляемых SDK.

1. В файле src/index.js получите объект производительности, а затем создайте пользовательский трассировочный файл для загрузки графического сообщения.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. Для записи пользовательской трассировки необходимо указать начальную и конечную точки трассировки. Трассировку можно рассматривать как таймер.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Вы успешно настроили пользовательскую трассировку! После развертывания кода продолжительность пользовательской трассировки будет записываться, если пользователь отправит сообщение с изображением. Это позволит вам составить представление о том, сколько времени требуется реальным пользователям для отправки изображений в вашем чат-приложении.

7. Добавьте в приложение пользовательскую метрику.

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

1. Найдите пользовательский трассировочный файл из предыдущего шага (определенный в файле src/index.js ).
2. Добавьте следующую строку ниже поля TODO , чтобы указать размер загружаемого изображения.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

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

8. Добавьте пользовательский атрибут в ваше приложение.

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

1. Используйте пользовательскую трассировку, определенную в файле src/index.js .
2. Добавьте следующую строку ниже поля TODO , чтобы указать MIME-тип загруженного изображения.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Этот атрибут позволяет системе мониторинга производительности классифицировать продолжительность трассировки в зависимости от типа загруженного изображения.

9. [Расширить] Добавить пользовательскую трассировку с помощью API пользовательского времени

SDK Firebase Performance Monitoring разработан таким образом, чтобы его можно было загружать асинхронно, и чтобы он не оказывал негативного влияния на производительность веб-приложений во время загрузки страницы. До загрузки SDK API Firebase Performance Monitoring недоступен. В этом случае вы по-прежнему можете добавлять пользовательские трассировки, используя API User Timing . SDK Firebase Performance Monitoring будет получать значения длительности из функции measure() и регистрировать их в виде пользовательских трассировок.

Мы собираемся измерить продолжительность загрузки скриптов стилизации приложения с помощью API User Timing.

1. В файле public/index.html добавьте следующую строку, чтобы отметить начало загрузки скриптов стилей приложения.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

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

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

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

10. Разверните приложение и начните отправку изображений.

Развертывание на Firebase Host

После добавления Firebase Performance Monitoring в ваш код выполните следующие шаги для развертывания кода на Firebase Hosting:

1. Убедитесь, что ваша командная строка обращается к локальному каталогу performance-monitoring-start вашего приложения.
2. Разверните файлы в свой проект Firebase, выполнив следующую команду:

firebase deploy

3. В консоли должно отобразиться следующее:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.firebasestorage.app
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. Посетите ваше веб-приложение, которое теперь полностью размещено на Firebase Hosting, по двум вашим собственным поддоменам Firebase: https://<projectId>.firebaseapp.com и https://<projectId>.web.app .

Убедитесь, что мониторинг производительности включен.

Откройте консоль Firebase и перейдите на вкладку «Производительность» . Если вы видите приветственное сообщение «SDK обнаружен», значит, интеграция с Firebase Performance Monitoring прошла успешно!

Отправить сообщение с изображением

Получите данные о производительности, отправляя изображения в своем чат-приложении.

1. После входа в приложение для чата нажмите кнопку загрузки изображения. .
2. Выберите файл изображения с помощью средства выбора файлов.
3. Попробуйте отправить несколько изображений (несколько примеров хранятся в public/images/ ), чтобы проверить распределение пользовательских метрик и атрибутов.

Новые сообщения должны отображаться в пользовательском интерфейсе приложения вместе с выбранными вами изображениями.

11. Следите за панелью управления.

После развертывания веб-приложения и отправки изображений от имени пользователя вы можете просмотреть данные о производительности на панели мониторинга производительности (в консоли Firebase).

Примечание : Данные о производительности обычно отображаются в течение 12 часов. Если вы не видите результатов в консоли Firebase, обязательно проверьте позже.

Получите доступ к своей панели управления.

1. В консоли Firebase выберите проект, в котором находится ваше приложение Friendly Chat .
2. В левой панели найдите раздел «Качество» и нажмите «Производительность» .

Просмотрите данные на устройстве.

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

1. Нажмите вкладку «На устройстве» .

• В таблице «Загрузка страницы» отображаются различные показатели производительности, которые система мониторинга производительности автоматически собирает во время загрузки вашей страницы.
• В таблице «Длительность» отображаются все пользовательские трассировки, которые вы определили в коде своего приложения.

2. Нажмите кнопку saveImageMessage в таблице Durations , чтобы просмотреть конкретные метрики трассировки.

3. Нажмите «Агрегировать» , чтобы просмотреть распределение размеров изображений. Вы увидите метрику, которую вы добавили для измерения размера изображения для этой пользовательской трассировки.

4. На предыдущем шаге нажмите кнопку «За время» , расположенную рядом с кнопкой «Агрегировать» . Вы также можете просмотреть продолжительность пользовательской трассировки. Нажмите « Посмотреть подробнее» , чтобы более детально изучить собранные данные.

5. На открывшейся странице вы можете сегментировать данные о длительности по MIME-типу изображения, нажав на imageType . Эти конкретные данные были записаны в журнал благодаря атрибуту imageType, который вы добавили в свой пользовательский трассировочный файл.

Проанализируйте сетевые данные.

Сетевой HTTP/S-запрос представляет собой отчет, в котором фиксируются время ответа и размер полезной нагрузки сетевых вызовов.

1. Вернитесь на главный экран панели мониторинга производительности.
2. Чтобы просмотреть список сетевых запросов для вашего веб-приложения, перейдите на вкладку «Сеть» .
3. Просмотрите их, чтобы выявить медленные запросы и начать работу над исправлением для повышения производительности вашего приложения!

12. Поздравляем!

Вы включили Firebase SDK для мониторинга производительности и собрали автоматические и пользовательские трассировки для измерения реальной производительности вашего чат-приложения!

Что мы рассмотрели:

• Добавление SDK Firebase Performance Monitoring в ваше веб-приложение.
• Добавление пользовательских трассировок в ваш код.
• Запись пользовательских метрик, связанных с пользовательской трассировкой.
• Сегментация данных о производительности с использованием пользовательских атрибутов.
• Понимание того, как использовать панель мониторинга производительности для получения информации о производительности вашего приложения.

Узнать больше:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/