1. Обзор
В этой лаборатории кода вы узнаете, как использовать Firebase Performance Monitoring для измерения производительности веб-приложения чата. Посетите https://fireperf-Friendlychat.web.app/ , чтобы увидеть живую демонстрацию.
Что вы узнаете
- Как добавить мониторинг производительности Firebase в ваше веб-приложение, чтобы получать готовые метрики (загрузка страницы и сетевые запросы).
- Как измерить конкретный фрагмент кода с помощью пользовательских трассировок.
- Как записывать дополнительные пользовательские метрики, привязанные к пользовательской трассировке.
- Как дополнительно сегментировать данные об эффективности с помощью специальных атрибутов.
- Как использовать панель мониторинга производительности, чтобы оценить производительность вашего веб-приложения.
Что вам понадобится
2. Получите пример кода
Клонируйте репозиторий GitHub codelab из командной строки:
git clone https://github.com/firebase/codelab-friendlychat-web
Альтернативно, если у вас не установлен git, вы можете загрузить репозиторий в виде zip-файла .
Импортируйте начальное приложение
Используя свою IDE, откройте или импортируйте каталог 📁 performance-monitoring-start
из клонированного репозитория. Этот каталог 📁 performance-monitoring-start
содержит начальный код для codelab, который представляет собой веб-приложение для чата.
3. Создайте и настройте проект Firebase.
Создать проект Firebase
- В консоли Firebase нажмите «Добавить проект» .
- Назовите свой проект Firebase
FriendlyChat
.
Запомните идентификатор вашего проекта Firebase.
- Нажмите Создать проект .
Добавьте веб-приложение Firebase в проект
- Нажмите значок Интернета чтобы создать новое веб-приложение Firebase.
- Зарегистрируйте приложение под псевдонимом
Friendly Chat
, а затем установите флажок « Также настройте хостинг Firebase для этого приложения» . - Нажмите Зарегистрировать приложение .
- Щелкните оставшиеся шаги. Теперь вам не нужно следовать инструкциям на экране; они будут рассмотрены на последующих этапах этой лаборатории.
Включить вход в Google для аутентификации Firebase
Чтобы пользователи могли входить в приложение чата со своими учетными записями Google, мы будем использовать метод входа Google .
Вам необходимо включить вход в Google :
- В консоли Firebase найдите раздел «Разработка» на левой панели.
- Нажмите «Аутентификация» , затем перейдите на вкладку «Метод входа» ( перейдите в консоль ).
- Включите службу входа в систему Google и нажмите « Сохранить» .
Включить Cloud Firestore
Веб-приложение использует Cloud Firestore для сохранения сообщений чата и получения новых сообщений чата.
Вам нужно будет включить Cloud Firestore:
- В разделе «Разработка » консоли Firebase нажмите «База данных» .
- Нажмите Создать базу данных на панели Cloud Firestore.
- Выберите параметр «Запустить в тестовом режиме» , затем нажмите « Включить» после прочтения заявления об отказе от ответственности относительно правил безопасности.
Стартовый код для этой лаборатории включает более безопасные правила. Мы развернем их позже в лаборатории кода.
Включить облачное хранилище
Веб-приложение использует Cloud Storage for Firebase для хранения, загрузки и обмена изображениями.
Вам необходимо включить облачное хранилище:
- В разделе «Разработка » консоли Firebase нажмите « Хранилище» .
- Нажмите «Начать» .
- Прочтите заявление об отказе от ответственности о правилах безопасности для вашего проекта Firebase и нажмите «Понятно» .
Начальный код включает базовое правило безопасности, которое мы развернем позже в лаборатории кода.
4. Установите интерфейс командной строки Firebase.
Интерфейс командной строки (CLI) Firebase позволяет вам использовать хостинг Firebase для локального обслуживания вашего веб-приложения, а также для развертывания вашего веб-приложения в проекте Firebase.
- Установите CLI, следуя этим инструкциям в документации Firebase.
- Убедитесь, что CLI установлен правильно, выполнив в терминале следующую команду:
firebase --version
Убедитесь, что ваша версия Firebase CLI — v8.0.0 или новее.
- Авторизуйте Firebase CLI, выполнив следующую команду:
firebase login
Мы настроили шаблон веб-приложения для извлечения конфигурации вашего приложения для хостинга Firebase из локального каталога вашего приложения (репозитория, который вы клонировали ранее в лаборатории кода). Но чтобы получить конфигурацию, нам нужно связать ваше приложение с вашим проектом Firebase.
- Убедитесь, что ваша командная строка обращается к локальному каталогу
performance-monitoring-start
вашего приложения. - Свяжите свое приложение с проектом Firebase, выполнив следующую команду:
firebase use --add
- При появлении запроса выберите идентификатор проекта, а затем присвойте проекту Firebase псевдоним.
Псевдоним полезен, если у вас несколько сред (производственная, промежуточная и т. д.). Однако для этой кодовой лаборатории давайте просто воспользуемся псевдонимом default
.
- Следуйте остальным инструкциям в командной строке.
5. Интеграция с мониторингом производительности Firebase
Существуют различные способы интеграции с Firebase Performance Monitoring SDK для Интернета (подробности см. в документации ). В этой лаборатории кода мы включим мониторинг производительности с помощью URL-адресов хостинга .
Добавьте мониторинг производительности и инициализируйте Firebase
- Откройте файл
src/index.js
, затем добавьте следующую строку подTODO
, чтобы включить Firebase Performance Monitoring SDK.
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- Нам также необходимо инициализировать Firebase SDK с помощью объекта конфигурации, содержащего информацию о проекте Firebase и веб-приложении, которое мы хотим использовать. Поскольку мы используем хостинг Firebase, вы можете импортировать специальный скрипт, который выполнит эту настройку за вас. Для этой лаборатории мы уже добавили следующую строку в конец файла
public/index.html
, но еще раз проверьте ее наличие.
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- В файле
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 в свой код!
На следующих шагах вы узнаете о добавлении пользовательских трассировок с помощью Firebase Performance Monitoring. Если вы хотите собирать только автоматические трассировки, перейдите в раздел «Развертывание и начало отправки изображений».
6. Добавьте пользовательскую трассировку в свое приложение.
Мониторинг производительности позволяет создавать собственные трассировки . Пользовательская трассировка — это отчет о продолжительности блока выполнения в вашем приложении. Вы определяете начало и конец пользовательской трассировки с помощью API, предоставляемых SDK.
- В файле
src/index.js
получите объект производительности, а затем создайте собственную трассировку для загрузки графического сообщения.
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- Чтобы записать пользовательскую трассировку, необходимо указать начальную точку и точку остановки трассировки. Вы можете думать о трассировке как о таймере.
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
Вы успешно определили пользовательскую трассировку! После развертывания вашего кода продолжительность пользовательской трассировки будет записываться, если пользователь отправляет графическое сообщение. Это даст вам представление о том, сколько времени требуется реальным пользователям для отправки изображений в ваше приложение чата.
7. Добавьте в свое приложение специальную метрику.
Вы также можете настроить пользовательскую трассировку для записи пользовательских показателей событий, связанных с производительностью, которые происходят в ее области. Например, вы можете использовать метрику, чтобы выяснить, влияет ли на время загрузки размер изображения для пользовательской трассировки, которую мы определили на последнем шаге.
- Найдите пользовательскую трассировку из предыдущего шага (определенную в файле
src/index.js
). - Добавьте следующую строку под
TODO
, чтобы записать размер загруженного изображения.
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
Эта метрика позволяет отслеживать производительность и записывать продолжительность пользовательской трассировки, а также размер загруженного изображения.
8. Добавьте пользовательский атрибут в свое приложение.
Основываясь на предыдущих шагах, вы также можете собирать пользовательские атрибуты в своих собственных трассировках . Пользовательские атрибуты могут помочь сегментировать данные по категориям, специфичным для вашего приложения. Например, вы можете собрать MIME-тип файла изображения, чтобы выяснить, как MIME-тип может повлиять на производительность.
- Используйте пользовательскую трассировку, определенную в файле
src/index.js
. - Добавьте следующую строку под
TODO
, чтобы записать тип MIME загруженного изображения.
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
Этот атрибут позволяет мониторингу производительности классифицировать продолжительность пользовательской трассировки в зависимости от типа загруженного изображения.
9. [Расширить] Добавьте пользовательскую трассировку с помощью User Timing API.
SDK Firebase Performance Monitoring был разработан таким образом, чтобы его можно было загружать асинхронно и чтобы он не оказывал негативного влияния на производительность веб-приложений во время загрузки страницы. До загрузки SDK API мониторинга производительности Firebase недоступен. В этом сценарии вы по-прежнему можете добавлять собственные трассировки с помощью API пользовательского времени . SDK производительности Firebase будет получать длительности из метода Measure() и регистрировать их как пользовательские трассировки.
Мы собираемся измерить продолжительность загрузки сценариев оформления приложений с помощью User Timing API.
- В файле
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>
- Добавьте следующие строки, чтобы отметить конец загрузки сценариев оформления приложения и измерить продолжительность между началом и завершением.
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 в свой код выполните следующие действия, чтобы развернуть свой код на хостинге Firebase:
- Убедитесь, что ваша командная строка обращается к локальному каталогу
performance-monitoring-start
вашего приложения. - Разверните файлы в проекте Firebase, выполнив следующую команду:
firebase deploy
- В консоли должно появиться следующее:
=== 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
- Посетите свое веб-приложение, которое теперь полностью размещено с помощью хостинга Firebase на двух ваших собственных поддоменах Firebase:
https://<projectId>.firebaseapp.com
иhttps://<projectId>.web.app
.
Убедитесь, что мониторинг производительности включен.
Откройте консоль Firebase и перейдите на вкладку «Производительность» . Если вы видите приветственное сообщение «Обнаружен SDK», значит, вы успешно интегрировались с Firebase Performance Monitoring!
Отправить графическое сообщение
Создайте некоторые данные о производительности, отправив изображения в приложение чата.
- После входа в приложение чата нажмите кнопку загрузки изображения. .
- Выберите файл изображения с помощью средства выбора файлов.
- Попробуйте отправить несколько изображений (некоторые образцы хранятся в
public/images/
), чтобы можно было протестировать распределение пользовательских метрик и пользовательских атрибутов.
Новые сообщения должны отображаться в пользовательском интерфейсе приложения вместе с выбранными вами изображениями.
11. Следите за приборной панелью
После развертывания веб-приложения и отправки графических сообщений от имени пользователя вы можете просмотреть данные о производительности на панели мониторинга производительности (в консоли Firebase).
Доступ к вашей панели управления
- В консоли Firebase выберите проект, в котором есть ваше приложение
Friendly Chat
. - На левой панели найдите раздел «Качество» и нажмите «Производительность» .
Просмотр данных на устройстве
После того как мониторинг производительности обработает данные вашего приложения, вы увидите вкладки в верхней части панели мониторинга. Обязательно зайдите позже, если вы еще не видите никаких данных или вкладок.
- Откройте вкладку «На устройстве» .
- В таблице «Загрузки страниц» показаны различные показатели производительности, которые автоматически собирает мониторинг производительности во время загрузки вашей страницы.
- В таблице «Длительность» показаны все пользовательские трассировки, определенные вами в коде вашего приложения.
- Нажмите saveImageMessage в таблице «Длительность» , чтобы просмотреть конкретные метрики трассировки.
- Нажмите «Агрегировать» , чтобы просмотреть распределение размеров изображений. Вы можете увидеть добавленную вами метрику для измерения размера изображения для этой пользовательской трассировки.
- Нажмите «С течением времени» , который находится рядом с «Агрегировать» на предыдущем шаге. Вы также можете просмотреть продолжительность пользовательской трассировки. Нажмите «Просмотреть больше» , чтобы просмотреть собранные данные более подробно.
- На открывшейся странице вы можете сегментировать данные о продолжительности по MIME-типу изображения, щелкнув imageType . Эти конкретные данные были зарегистрированы из-за атрибута imageType, который вы добавили в свою пользовательскую трассировку.
Просмотр сетевых данных
Сетевой запрос HTTP/S — это отчет, в котором фиксируется время ответа и размер полезной нагрузки сетевых вызовов.
- Вернитесь на главный экран панели мониторинга производительности.
- Перейдите на вкладку Сеть , чтобы просмотреть список записей сетевых запросов для вашего веб-приложения.
- Просмотрите их, чтобы выявить медленные запросы, и начните работать над исправлением, которое повысит производительность вашего приложения!
12. Поздравляем!
Вы включили Firebase SDK для мониторинга производительности и собрали автоматические и пользовательские трассировки для измерения реальной производительности вашего чат-приложения!
Что мы рассмотрели:
- Добавление SDK Firebase Performance Monitoring в ваше веб-приложение.
- Добавление пользовательских трассировок в ваш код.
- Запись пользовательских метрик, привязанных к пользовательской трассировке.
- Сегментация данных о производительности с использованием настраиваемых атрибутов.
- Понимание того, как использовать панель мониторинга производительности, чтобы получить представление о производительности вашего приложения.