Google is committed to advancing racial equity for Black communities. See how.
Эта страница была переведа с помощью Cloud Translation API.
Switch to English

Узнайте о данных об эффективности загрузки страниц (веб-приложения)

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

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

  • первая краска - метрика, которая измеряет время между тем, когда пользователь переходит на страницу, и когда происходит какое-либо визуальное изменение

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

  • domInteractive - метрика, которая измеряет время между тем, когда пользователь переходит на страницу, и когда страница считается интерактивной для пользователя.

  • domContentLoadedEventEnd - метрика, которая измеряет время между переходом пользователя на страницу и полной загрузкой и анализом исходного HTML-документа.

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

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

Просматривайте данные из трассировок загрузки страниц на вкладке « На устройстве » консоли Firebase ( подробнее см. Далее на этой странице).

Определение трассировки загрузки страницы

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

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

Метрики, собранные для трассировки загрузки страницы

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

Первая краска

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

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

  • Начинается, когда пользователь переходит на страницу.

  • Останавливается при любых визуальных изменениях, включая изменение цвета фона или загрузку заголовка.

Первая содержательная краска

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

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

  • Начинается, когда пользователь переходит на страницу.

  • Останавливается сразу после того, как браузер визуализирует первый контент из DOM, включая любой текст, изображение (включая фоновые изображения), небелые холсты или SVG.

domInteractive

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

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

  • Начинается, когда пользователь переходит на страницу.

  • Останавливается непосредственно перед тем, как пользовательский агент установит готовность текущего HTML-документа как «интерактивный».

domContentLoadedEventEnd

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

  • Начинается, когда пользователь переходит на страницу.

  • Останавливается сразу после полной загрузки и анализа исходного HTML-документа ( DOMContentLoaded ), но это не означает, что загрузка таблиц стилей, изображений и подфреймов завершена.

loadEventEnd

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

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

  • Начинается, когда пользователь переходит на страницу.

  • Останавливается сразу после завершения события загрузки текущего HTML-документа.

Задержка первого входа

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

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

  • Начинается, когда пользователь впервые взаимодействует с элементом на странице, например щелкает кнопку или гиперссылку.

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

Обратите внимание, что для измерения первой метрики задержки ввода вам необходимо добавить библиотеку полифилов для этой метрики. Инструкции по установке см. В документации библиотеки.

Отслеживайте, просматривайте и фильтруйте данные о производительности

Отслеживайте ключевые показатели на своей панели инструментов

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

изображение панели показателей Firebase Performance Monitoring

Чтобы добавить метрику в панель управления, перейдите на приборную панель Performance в Firebase консоли, а затем нажмите на вкладку Сводки. Щелкните пустую карточку метрики, затем выберите существующую метрику, чтобы добавить ее на панель инструментов. Щелкните на заполненной карточке метрики, чтобы дополнительные параметры, например заменить или удалить метрику.

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

Узнайте больше об использовании панели управления .

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

Чтобы просмотреть эти трассировки, перейдите на панель « Производительность» в консоли Firebase, затем щелкните вкладку « На устройстве ».

На вкладке « На устройстве » вы можете переходить по различным экранам, чтобы изучить трассировку и перейти к интересующим метрикам. На большинстве страниц вы можете использовать кнопку « фильтр» (вверху слева на экране) для фильтрации данных по атрибутам, например:

изображение данных Firebase Performance Monitoring, фильтруемых по атрибуту
  • Фильтр по URL-адресу страницы для просмотра данных для определенной страницы вашего сайта
  • Отфильтруйте по эффективному типу подключения, чтобы узнать, как подключение 3G влияет на ваше приложение.
  • Выполните фильтрацию по стране, чтобы убедиться, что расположение вашей базы данных не влияет на определенный регион.

Узнайте больше о просмотре данных для ваших трассировок .

Следующие шаги