Мониторинг производительности использует трассировки для сбора данных об отслеживаемых процессах в вашем приложении. Трассировка — это отчет, содержащий данные, полученные между двумя моментами времени в вашем приложении.
Для веб-приложений мониторинг производительности автоматически собирает трассировку для каждой страницы вашего приложения, которая называется трассировкой загрузки страницы . Каждая трассировка загрузки страницы собирает следующие метрики по умолчанию:
первая отрисовка — метрика, измеряющая время между переходом пользователя на страницу и моментом визуального изменения.
первая содержательная краска — метрика, которая измеряет время между переходом пользователя на страницу и отображением значимого контента, например изображения или текста.
domInteractive — метрика, которая измеряет время между переходом пользователя на страницу и моментом, когда страница считается интерактивной для пользователя.
domContentLoadedEventEnd — метрика, измеряющая время между переходом пользователя на страницу и полной загрузкой и анализом исходного HTML-документа.
loadEventEnd — Метрика, измеряющая время между переходом пользователя на страницу и завершением события загрузки текущего документа.
задержка первого ввода — метрика, которая измеряет время между тем, когда пользователь взаимодействует со страницей, и моментом, когда браузер может ответить на этот ввод.
Вы можете просмотреть данные из этих трассировок на вложенной вкладке Загрузка страницы таблицы трассировок, которая находится в нижней части панели мониторинга производительности (подробнее об использовании консоли читайте далее на этой странице).
Определение трассировки загрузки страницы
Эта трассировка измеряет несколько показателей того, как загружаются страницы в вашем приложении, в частности, сколько времени требуется для достижения общих точек загрузки, таких как адаптивное приложение.
Трассировки загрузки страницы помогают отслеживать основные веб-жизненные показатели вашего приложения, такие как первая содержательная отрисовка.
Метрики, собранные для отслеживания загрузки страницы
Эти трассировки являются готовыми трассировками, поэтому вы не можете добавлять к ним пользовательские метрики или настраиваемые атрибуты.
Первая краска
Этот показатель измеряет время между переходом пользователя на страницу и моментом визуального изменения.
Эта метрика полезна, поскольку первая отрисовка сигнализирует вашим пользователям о том, что страница начинает загружаться.
Запускается, когда пользователь переходит на страницу.
Останавливается при любом визуальном изменении, включая изменение цвета фона или загрузку заголовка.
Первая содержательная краска
Этот показатель измеряет время между переходом пользователя на страницу и отображением значимого содержимого, например изображения или текста.
Эта метрика полезна для понимания того, как скоро ваши пользователи увидят какой-либо фактический контент вашего приложения, а не только новый цвет фона или заголовок.
Запускается, когда пользователь переходит на страницу.
Останавливается сразу после того, как браузер отобразит первое содержимое из DOM, включая любой текст, изображение (включая фоновые изображения), небелый холст или SVG.
ДомИнтерактив
Этот показатель измеряет время между переходом пользователя на страницу и моментом, когда страница считается интерактивной для пользователя.
Эта метрика полезна для понимания того, как скоро ваши пользователи смогут фактически взаимодействовать с элементами вашего приложения, такими как кнопки и гиперссылки, а не просто видеть их на экране. Обратите внимание, что это не означает, что браузер будет реагировать на взаимодействие (для получения этой метрики см. первую трассировку задержки ввода ).
Запускается, когда пользователь переходит на страницу.
Останавливается непосредственно перед тем, как пользовательский агент установит готовность текущего HTML-документа в «интерактивный».
domContentLoadedEventEnd
Этот показатель измеряет время между переходом пользователя на страницу и полной загрузкой и анализом исходного HTML-документа.
Запускается, когда пользователь переходит на страницу.
Останавливается сразу после полной загрузки и анализа исходного HTML-документа (
DOMContentLoaded), но это не означает, что загрузка таблиц стилей, изображений и подфреймов завершена.
loadEventEnd
Эта метрика измеряет время между переходом пользователя на страницу и завершением события загрузки текущего документа.
Этот показатель полезен для понимания того, сколько времени требуется для загрузки всего вашего контента, включая таблицы стилей и изображения.
Запускается, когда пользователь переходит на страницу.
Останавливается сразу после завершения события загрузки текущего HTML-документа.
Задержка первого ввода
Эта метрика измеряет время между тем, когда пользователь взаимодействует со страницей, и тем, когда браузер может ответить на этот ввод.
Эта метрика полезна, поскольку браузер, реагирующий на взаимодействие с пользователем, дает вашим пользователям первое впечатление об отзывчивости вашего приложения.
Запускается, когда пользователь впервые взаимодействует с элементом на странице, например, нажимает кнопку или гиперссылку.
Останавливается сразу после того, как браузер сможет ответить на ввод, что означает, что браузер не занят загрузкой или синтаксическим анализом вашего контента.
Обратите внимание, что для измерения первой метрики задержки ввода необходимо добавить библиотеку полифилла для этой метрики. Инструкции по установке см. в документации библиотеки.
Отслеживание, просмотр и фильтрация данных об эффективности
Чтобы просматривать данные о производительности в реальном времени, убедитесь, что ваше приложение использует версию SDK для мониторинга производительности, совместимую с обработкой данных в реальном времени. Узнайте больше о данных о производительности в реальном времени .
Отслеживайте ключевые показатели в личном кабинете
Чтобы узнать, как развиваются ваши ключевые показатели, добавьте их на доску показателей в верхней части панели мониторинга производительности . Вы можете быстро определить регрессию, наблюдая изменения за неделей или убедиться, что последние изменения в вашем коде повышают производительность.
Чтобы добавить метрику на доску метрик, выполните следующие действия:
- Перейдите на панель производительности в консоли Firebase.
- Щелкните пустую карточку показателя, затем выберите существующий показатель, чтобы добавить его на доску.
- Нажмите на заполненной карточке метрики, чтобы открыть дополнительные параметры, например заменить или удалить метрику.
На доске метрик отображаются собранные метрические данные с течением времени как в графической форме, так и в виде числового процентного изменения.
Узнайте больше об использовании панели инструментов .
Просмотр трасс и их данных
Чтобы просмотреть свои трассировки, перейдите на панель мониторинга производительности в консоли Firebase, прокрутите вниз до таблицы трассировок и щелкните соответствующую вложенную вкладку. В таблице отображаются некоторые основные метрики для каждой трассы, и вы даже можете отсортировать список по процентному изменению для определенной метрики.
Мониторинг производительности предоставляет страницу устранения неполадок в консоли Firebase, на которой выделяются изменения метрик, что упрощает быстрое устранение и минимизацию влияния проблем с производительностью на ваши приложения и пользователей. Вы можете использовать страницу устранения неполадок, когда узнаете о потенциальных проблемах с производительностью, например, в следующих сценариях:
- Вы выбираете соответствующие показатели на панели инструментов и замечаете большую разницу.
- В таблице трасс вы сортируете так, чтобы самые большие дельты отображались вверху, и вы видите значительное процентное изменение.
- Вы получаете уведомление по электронной почте о проблеме с производительностью.
Вы можете получить доступ к странице устранения неполадок следующими способами:
- На панели метрик нажмите кнопку Просмотреть сведения о метрике .
- На любой карточке с метрикой выберите => Просмотреть подробности . На странице устранения неполадок отображается информация о выбранной вами метрике.
- В таблице трассировок щелкните имя трассы или любое значение метрики в строке, связанной с этой трассировкой.
- В оповещении по электронной почте нажмите « Исследовать сейчас» .
Когда вы щелкаете имя трассировки в таблице трассировок, вы можете перейти к интересующим вас метрикам. Нажмите кнопку « фильтр », чтобы отфильтровать данные по атрибуту, например:
- Отфильтруйте по URL -адресу страницы, чтобы просмотреть данные для конкретной страницы вашего сайта.
- Отфильтруйте по типу эффективного подключения, чтобы узнать, как подключение 3G влияет на ваше приложение.
- Отфильтруйте по стране , чтобы убедиться, что местоположение вашей базы данных не влияет на конкретный регион.
Узнайте больше о просмотре данных для ваших трассировок .
Следующие шаги
Узнайте больше об использовании атрибутов для проверки данных о производительности.
Узнайте больше о том, как отслеживать проблемы с производительностью в консоли Firebase.
Настройте оповещения о загрузке страниц, которые снижают производительность вашего приложения. Например, вы можете настроить оповещение по электронной почте для своей команды, если первая задержка ввода для определенной страницы превышает установленный вами порог.