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

1. Обзор

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

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

Чему вы научитесь

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

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

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

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

Клонируйте репозиторий 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 (так называемая «Gemini в Firebase»).
6. Для этой лабораторной работы вам не понадобится Google Analytics, поэтому отключите опцию Google Analytics.
7. Нажмите «Создать проект» , дождитесь завершения подготовки проекта, а затем нажмите «Продолжить» .

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

Чтобы использовать Cloud Storage для 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 для этого приложения .
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

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

Вот как настроить облачное хранилище для 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 псевдоним.

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

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

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

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

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

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

index.js

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

2. Нам также необходимо инициализировать Firebase SDK с объектом конфигурации, содержащим информацию о проекте 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();

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

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

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

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

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

Откройте файл 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 в свой код!

Существуют и другие способы интеграции с Firebase Performance Monitoring SDK для веб-приложений. Подробнее см. в статье «Начало работы с 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-тип файла изображения, чтобы исследовать, как он может влиять на производительность.

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

index.js

 ...

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

 ...

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

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

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

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

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 Performance Monitoring. Позже вы сможете найти пользовательскую трассировку loadStyling в консоли Firebase Performance.

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

Развертывание на хостинге Firebase

После добавления 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 в таблице Длительности , чтобы просмотреть конкретные показатели трассировки.

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

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

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

Просмотр сетевых данных

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

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

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

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

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

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

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

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