Performance Monitoring использует трассировку для сбора данных о контролируемых процессах в вашем приложении. Трассировка — это отчет, содержащий данные, полученные в вашем приложении в промежутке времени между двумя точками.
Для веб-приложений Performance Monitoring автоматически собирает трассировку для каждой страницы вашего приложения, называемую трассировкой загрузки страницы . Каждая трассировка загрузки страницы собирает следующие метрики по умолчанию:
Наибольшее визуальное изменение (storage contentful paint) — это показатель, измеряющий время между переходом пользователя на страницу и моментом наибольшего визуального изменения.
Взаимодействие до следующей отрисовки — метрика, измеряющая наибольший промежуток времени между моментом взаимодействия пользователя со страницей и моментом следующей отрисовки.
Кумулятивное изменение макета — показатель, измеряющий и оценивающий неожиданные изменения макета на странице.
first paint — метрика, измеряющая время между переходом пользователя на страницу и любыми визуальными изменениями.
first contentful paint — метрика, измеряющая время между переходом пользователя на страницу и отображением значимого контента, такого как изображение или текст.
domInteractive — метрика, измеряющая время между моментом, когда пользователь переходит на страницу, и моментом, когда страница становится интерактивной для пользователя.
domContentLoadedEventEnd — метрика, измеряющая время между моментом перехода пользователя на страницу и моментом полной загрузки и анализа исходного HTML-документа.
loadEventEnd — метрика, измеряющая время между моментом перехода пользователя на страницу и завершением события загрузки текущего документа.
Данные из этих трассировок можно просмотреть на вкладке «Загрузка страницы» в таблице трассировок, которая находится в нижней части панели мониторинга производительности (подробнее об использовании консоли см. далее на этой странице).
Определение трассировки загрузки страницы
Этот трассировочный модуль измеряет несколько показателей загрузки страниц вашего приложения, в частности, время, необходимое для достижения распространенных точек загрузки, например, для адаптивного приложения.
Трассировка загрузки страницы помогает отслеживать ключевые веб-показатели вашего приложения, такие как первая отрисовка контента.
Метрики, собранные для трассировки загрузки страницы.
Эти трассировки являются стандартными, поэтому вы не можете добавлять к ним дополнительные пользовательские метрики или атрибуты.
Самая большая содержательная краска
Этот показатель измеряет время между моментом, когда пользователь переходит на страницу, и моментом, когда отображается самое крупное изображение, текст или видеоконтент.
Этот показатель полезен для понимания того, как быстро основное содержимое веб-страницы становится видимым для пользователя.
Запуск происходит, когда пользователь переходит на страницу.
Остановка происходит при наиболее значительных визуальных изменениях, включая изменения изображений, текста или видео. Для получения более подробной информации см. основные показатели веб-безопасности .
The " Largest contentful paint element " is a custom attribute that identifies the element corresponding to the largest contentful paint. This is captured in addition to the largest contentful paint timing.
Взаимодействие со следующей краской
Этот показатель измеряет время между моментом взаимодействия пользователя со страницей и моментом следующей отрисовки.
Этот показатель полезен, поскольку он измеряет, насколько быстро страница реагирует на ввод пользователя.
Процесс начинается, когда пользователь взаимодействует со страницей (щелчок мышью, касание экрана устройства или ввод с клавиатуры).
Остановится при следующем перерисовке. Для получения более подробной информации обратитесь к основным веб-функциям мониторинга .
The " Longest interaction to next paint " is a custom attribute that identifies the element that was interacted with by the user when the interaction to next paint event occurred. This is captured in addition to the interaction to next paint timing.
Накопительное изменение компоновки
Этот показатель измеряет наибольшее количество неожиданных изменений в макете, происходящих на протяжении всего жизненного цикла страницы.
This metric is useful since unexpected layout shifts can disrupt the user experience. The metric reports a score based on the Layout Instability API . Refer to the core web vitals for more details on how the score is calculated.
The " Largest layout shift target " is a custom attribute that identifies the element that shifted when the largest contentful shift occurred. This is captured in addition to the cumulative layout shift score.
Первая краска
Этот показатель измеряет время между моментом, когда пользователь переходит на страницу, и моментом, когда происходят какие-либо визуальные изменения.
Этот показатель полезен, поскольку первая отрисовка страницы сигнализирует пользователям о начале загрузки страницы.
Запуск происходит, когда пользователь переходит на страницу.
Остановка происходит при любых визуальных изменениях, включая изменение цвета фона или загрузку заголовка.
Первая приятная краска
Этот показатель измеряет время между моментом, когда пользователь переходит на страницу, и моментом, когда отображается значимый контент, например, изображение или текст.
Этот показатель полезен для понимания того, как быстро пользователи видят реальный контент вашего приложения, а не просто новый цвет фона или заголовок.
Запуск происходит, когда пользователь переходит на страницу.
Отображение прекращается сразу после того, как браузер отобразит первый контент из DOM, включая любой текст, изображение (в том числе фоновое), не белый холст или SVG.
domInteractive
Этот показатель измеряет время между моментом, когда пользователь переходит на страницу, и моментом, когда страница становится интерактивной для пользователя.
This metric is useful for insights into how soon your users can actually interact with elements in your app, like buttons and hyperlinks, rather than just seeing them on the screen. Note that this doesn't mean that the browser will respond to the interaction (for this metric, refer to interaction to next paint trace ).
Запуск происходит, когда пользователь переходит на страницу.
Остановка происходит непосредственно перед тем, как пользовательский агент установит готовность текущего HTML-документа в режим «интерактивный».
domContentLoadedEventEnd
Этот показатель измеряет время между моментом, когда пользователь переходит на страницу, и моментом, когда исходный HTML-документ полностью загружается и обрабатывается.
Запуск происходит, когда пользователь переходит на страницу.
Процесс останавливается сразу после полной загрузки и анализа исходного HTML-документа (
DOMContentLoaded), но это не означает, что таблицы стилей, изображения и подфреймы полностью загружены.
loadEventEnd
Этот показатель измеряет время между моментом, когда пользователь переходит на страницу, и моментом завершения события загрузки текущего документа.
Этот показатель полезен для получения информации о том, сколько времени требуется для загрузки всего вашего контента, включая таблицы стилей и изображения.
Запуск происходит, когда пользователь переходит на страницу.
Остановка происходит сразу после завершения события загрузки текущего HTML-документа.
Первая задержка ввода (устарело)
Этот показатель измеряет время между моментом взаимодействия пользователя со страницей и моментом, когда браузер может отреагировать на этот ввод.
Этот показатель полезен, поскольку скорость реакции браузера на взаимодействие с пользователем формирует у пользователей первое впечатление о быстродействии вашего приложения.
Процесс начинается с момента первого взаимодействия пользователя с элементом на странице, например, с нажатия кнопки или гиперссылки.
Процесс останавливается сразу после того, как браузер получает возможность ответить на ввод, то есть браузер не занят загрузкой или анализом вашего контента.
Для измерения задержки первого входного сигнала требуется устаревший полифил. См. раздел устранения неполадок .
Отслеживайте, просматривайте и фильтруйте данные о производительности.
To view real-time performance data, make sure that your app uses a Performance Monitoring SDK version that's compatible with real-time data processing. Learn more about real-time performance data .
Отслеживайте ключевые показатели на своей панели управления.
To learn how your key metrics are trending, add them to your metrics board at the top of the Performance dashboard. You can quickly identify regressions by seeing week-over-week changes or verify that recent changes in your code are improving performance.
Панель мониторинга производительности Firebase" />Чтобы добавить метрику на доску метрик, выполните следующие действия:
- Перейдите на панель мониторинга «Производительность» в консоли Firebase .
- Щелкните по пустой карточке показателя, затем выберите существующий показатель, чтобы добавить его на доску.
- Нажмите кнопку на заполненной карточке показателя, чтобы получить дополнительные параметры, например, заменить или удалить показатель.
На панели показателей отображаются собранные данные о метриках за определенный период времени, как в графическом виде, так и в виде числового процентного изменения.
Узнайте больше об использовании панели управления .
Просмотр трассировок и их данных
To view your traces, go to the Performance dashboard in the Firebase console, scroll down to the traces table, then click the appropriate subtab. The table displays some top metrics for each trace, and you can even sort the list by the percentage change for a specific metric.
Performance Monitoring provides a troubleshooting page in the Firebase console that highlights metric changes, making it easy to quickly address and minimize the impact of performance issues on your apps and users. You can use the troubleshooting page when you learn about potential performance issues, for example, in the following scenarios:
- Вы выбираете соответствующие показатели на панели мониторинга и замечаете большую разницу.
- В таблице результатов вы сортируете данные таким образом, чтобы наибольшие изменения отображались вверху, и видите значительное процентное изменение.
- Вы получите уведомление по электронной почте о проблеме с производительностью.
Доступ к странице устранения неполадок можно получить следующими способами:
- На панели мониторинга показателей нажмите кнопку « Просмотреть подробные сведения о показателе» .
- На любой метрической карте выберите
=> Просмотреть подробности . На странице устранения неполадок отображается информация о выбранном вами показателе. - В таблице трассировок щелкните имя трассировки или любое значение метрики в строке, связанной с этой трассировкой.
- В электронном письме с уведомлением нажмите «Провести расследование» .
При щелчке по названию трассировки в таблице трассировок вы можете перейти к просмотру интересующих вас метрик. Щелкните
Данные мониторинга производительности Firebase фильтруются по атрибуту" />- Используйте фильтр по URL страницы , чтобы просмотреть данные по конкретной странице вашего сайта.
- Отфильтруйте результаты по типу эффективного соединения , чтобы узнать, как соединение 3G влияет на ваше приложение.
- Используйте фильтр по стране , чтобы убедиться, что местоположение вашей базы данных не влияет на конкретный регион.
Узнайте больше о просмотре данных ваших трассировок .
Следующие шаги
Узнайте больше об использовании атрибутов для анализа данных о производительности.
Узнайте больше о том, как отслеживать проблемы с производительностью в консоли Firebase .
Set up alerts for page loads that are degrading the performance of your app. For example, you can configure an email alert for your team if the first input delay for a specific page exceeds a threshold that you set.