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

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

3b1284f5144b54f6.png

Что ты узнаешь

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

Что тебе понадобится

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

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

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

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

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

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

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

  1. В консоли Firebase нажмите Добавить проект .
  2. Назовите свой проект Firebase FriendlyChat .

Запомните идентификатор проекта для вашего проекта Firebase.

  1. Щелкните " Создать проект" .

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

  1. Щелкните значок Интернета 58d6543a156e56f9.png для создания нового веб-приложения Firebase.
  2. Зарегистрируйте приложение под псевдонимом Friendly Chat , а затем установите флажок Также настроить хостинг Firebase для этого приложения .
  3. Щелкните Зарегистрировать приложение .
  4. Щелкните оставшиеся шаги. Теперь вам не нужно следовать инструкциям на экране; они будут рассмотрены на следующих этапах этой лабораторной работы.

ea9ab0db531a104c.png

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

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

Вам нужно будет включить вход в Google :

  1. В консоли Firebase найдите раздел « Разработка » на левой панели.
  2. Щелкните Проверка подлинности , затем щелкните вкладку Метод входа ( перейдите в консоль ).
  3. Включите поставщика услуг входа Google и нажмите Сохранить .

d89fb3873b5d36ae.png

Включить Cloud Firestore

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

Вам нужно будет включить Cloud Firestore:

  1. В разделе « Разработка» консоли Firebase нажмите « База данных» .
  2. Щелкните Создать базу данных на панели Cloud Firestore.
  3. Выберите параметр « Начать в тестовом режиме» , а затем нажмите « Включить» после прочтения заявления об отказе от ответственности о правилах безопасности.

Начальный код этой кодовой лаборатории включает более безопасные правила. Мы развернем их позже в кодовой лаборатории.

24bd1a097492eac6.png

Включить облачное хранилище

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

Вам необходимо включить облачное хранилище:

  1. В разделе « Разработка» консоли Firebase нажмите « Хранилище» .
  2. Щелкните " Начать работу" .
  3. Прочтите заявление об отказе от ответственности о правилах безопасности для вашего проекта Firebase и нажмите Понятно .

Начальный код включает базовое правило безопасности, которое мы развернем позже в кодовой лаборатории.

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

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

Убедитесь, что ваша версия Firebase CLI - v8.0.0 или новее.

  1. Авторизуйте интерфейс командной строки Firebase, выполнив следующую команду:
firebase login

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

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

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

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

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

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

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

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
  1. Нам также необходимо инициализировать Firebase SDK с помощью объекта конфигурации, который содержит информацию о проекте Firebase и веб-приложении, которое мы хотим использовать. Поскольку мы используем хостинг Firebase, вы можете импортировать специальный скрипт, который выполнит эту настройку за вас. Для этой лаборатории мы уже добавили следующую строку в public/index.html файла public/index.html , но дважды проверьте, есть ли она там.

index.html

<script src="/__/firebase/init.js"></script>
  1. В файле public/scripts/main.js добавьте следующую строку под TODO для инициализации мониторинга производительности.

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

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

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

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

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

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

Откройте файл 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. Если вы хотите собирать только автоматические трассировки, перейдите в раздел «Развернуть и начать отправку изображений».

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

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

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
  1. Чтобы записать настраиваемую трассу, вам необходимо указать начальную и конечную точки для трассировки. Вы можете думать о следе как о таймере.

main.js

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

 ...

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

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

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

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

main.js

 ...

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

 ...

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

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

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

main.js

 ...

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

 ...

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

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

Мы собираемся измерить продолжительность загрузки скриптов стилей приложений с помощью User Timing 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>
  1. Добавьте следующие строки, чтобы отметить конец загрузки скриптов стилей приложения и измерить продолжительность между началом и концом.

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

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

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

  1. Убедитесь, что ваша командная строка обращается к локальному каталогу performance-monitoring-start вашего приложения.
  2. Разверните свои файлы в проекте Firebase, выполнив следующую команду:
firebase deploy
  1. На консоли должно отображаться следующее:
=== 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.appspot.com
✔  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
  1. Посетите свое веб-приложение, которое теперь полностью размещено с использованием хостинга Firebase на двух ваших собственных поддоменах Firebase: https://<projectId>.firebaseapp.com и https://<projectId>.web.app .

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

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

ac917a089e9c89d1.png

Отправить графическое сообщение

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

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

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

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

Доступ к вашей приборной панели

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

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

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

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

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

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

1ab598284eea6581.png

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

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

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

Учить больше: