Используйте панель «Аналитика производительности» , чтобы получить полезные и ориентированные на конкретные сценарии использования данные о производительности вашего веб-сайта.
Обзор
Панель «Аналитика производительности» позволяет выполнять следующие действия:
- Записывайте и измеряйте скорость загрузки страниц .
- Просмотрите показатели производительности Web Vitals .
- Просмотр сетевой активности .
- Имитация более низкой скорости процессора и сети.
- Импорт и экспорт записей.
Почему именно новая дискуссионная панель?
Новая панель «Аналитика производительности» — это эксперимент, призванный решить три проблемы, возникающие у разработчиков при работе с существующей панелью «Производительность» :
- Слишком много информации . Благодаря обновленному пользовательскому интерфейсу, панель «Аналитика производительности» упорядочивает данные и отображает только релевантную информацию.
- Сложно различить сценарии использования . Панель анализа производительности поддерживает анализ на основе сценариев использования. В настоящее время она поддерживает только сценарий загрузки страницы, но в будущем, с учетом ваших отзывов , появятся и другие сценарии, например, интерактивность .
- Для эффективного использования требуется глубокое знание принципов работы браузеров . Панель «Аналитика производительности» выделяет ключевые моменты в панели «Аналитика» и предоставляет практические рекомендации по устранению проблем.
Введение
В этом руководстве вы узнаете, как измерять и анализировать производительность загрузки страниц с помощью панели «Аналитика производительности» . Продолжайте читать или посмотрите видеоверсию этого руководства выше.
Откройте панель «Аналитика производительности».
- Откройте инструменты разработчика .
Нажмите Дополнительные параметры » > «Дополнительные инструменты» > «Анализ производительности» .
В качестве альтернативы, воспользуйтесь командным меню , чтобы открыть панель « Аналитика производительности» .
Рекордное выступление
На панели «Аналитика производительности» можно записывать общие показатели производительности, а также показатели, зависящие от конкретного сценария использования (например, скорость загрузки страницы).
- Откройте эту демонстрационную страницу в новой вкладке и на этой странице откройте панель «Аналитика производительности» .
Вы можете регулировать скорость сети и загрузку процессора во время записи. Для этого руководства выберите пункт «Отключить кэширование и установить замедление работы процессора в 4 раза» в выпадающем меню:
Нажмите . Измерьте скорость загрузки страницы . Инструменты разработчика записывают показатели производительности во время перезагрузки страницы, а затем автоматически останавливают запись через несколько секунд после завершения загрузки страницы.
Воспроизвести запись выступления
Используйте элементы управления внизу, чтобы управлять воспроизведением записи.
Вот пример того, как это сделать.
- Нажмите кнопку воспроизведения , чтобы прослушать запись.
- Нажмите » , чтобы приостановить воспроизведение.
- Отрегулируйте скорость воспроизведения с помощью выпадающего списка.
- Нажмите , чтобы включить или выключить визуальный предварительный просмотр.
Навигация по записи выступления
В инструментах разработчика автоматически уменьшается масштаб, чтобы отобразить всю временную шкалу записи. Вы можете перемещаться по записи с помощью масштабирования и перемещать временную шкалу.
Для масштабирования и перемещения временной шкалы влево и вправо используйте соответствующие кнопки навигации:
- Щелкните на временной шкале , чтобы переместить ползунок воспроизведения и просмотреть определенный кадр.
- Нажмите кнопки увеличение масштаба) и уменьшение масштаба ) внизу, чтобы увеличить масштаб. В данном случае масштабирование будет происходить относительно ползунка воспроизведения.
- Перетаскивайте горизонтальную полосу прокрутки внизу, чтобы перемещать временную шкалу влево и вправо.
В качестве альтернативы вы можете использовать сочетания клавиш. Нажмите кнопку , чтобы просмотреть сочетания клавиш. 
При использовании сочетаний клавиш масштабирование осуществляется в соответствии с положением курсора мыши.
Просмотрите статистику производительности.
В панели «Аналитика» вы найдете список показателей производительности. Выявите и устраните потенциальные проблемы с производительностью.
Наведите курсор на каждый из аналитических выводов, чтобы выделить его на основной панели инструментов.
Щелкните по интересующему вас сообщению, например, по запросу, блокирующему отрисовку, чтобы открыть его в панели «Подробности» . Для более глубокого понимания проблемы изучите разделы «Файл» , «Проблема» , «Как исправить » и другие.
Просмотр показателей производительности Web Vitals
Web Vitals — это инициатива Google, призванная предоставить единые рекомендации по показателям качества, которые имеют решающее значение для обеспечения отличного пользовательского опыта в интернете.
Эти показатели можно просмотреть на вкладках «Хронология» и «Аналитика» .
Наведите курсор на аналитические данные на временной шкале , чтобы узнать больше о показателях.
Узнайте о задержках крупнейшего и наиболее содержательного конкурса покраски.
Largest Contentful Paint (LCP) — это один из показателей Core Web Vitals . Он показывает время отрисовки самого большого видимого блока изображения или текста в области просмотра относительно момента начала загрузки страницы.
Хороший результат по шкале LCP — 2,5 секунды или меньше.
Если отображение самого крупного элемента контента на вашей странице занимает больше времени, на временной шкале вы увидите значок LCP с желтым квадратом или красным треугольником.
Чтобы открыть панель «Подробности» , щелкните значок LCP на временной шкале или на панели «Аналитика» справа. На этой панели вы можете узнать о возможных причинах задержек и получить рекомендации по их устранению.
В этом примере запрос блокирует отрисовку, и вы можете применить критически важные стили непосредственно в коде, чтобы это исправить. Для получения дополнительной информации см. раздел «Устранение ресурсов, блокирующих отрисовку» .
Чтобы просмотреть детали времени рендеринга LCP , прокрутите вниз до раздела «Подробности > Детали времени» .
Время рендеринга LCP состоит из следующих частей:
| Подраздел LCP | Описание |
|---|---|
| Время до первого байта (TTFB) | Время от момента, когда пользователь инициирует загрузку страницы, до момента, когда браузер получает первый байт ответа в виде HTML-документа. |
| Задержка загрузки ресурсов | Разница между TTFB и моментом начала загрузки ресурса LCP браузером. |
| Время загрузки ресурса | Время, необходимое для загрузки самого ресурса LCP. |
| Задержка отрисовки элемента | Разница между моментом завершения загрузки ресурса LCP и моментом полной отрисовки элемента LCP. |
Если элемент LCP не требует загрузки ресурсов для отрисовки, задержка и время загрузки ресурсов опускаются. Например, в случае, если элемент представляет собой текстовый узел, отображаемый с использованием системного шрифта.
Просмотр изменений макета активности
Отслеживайте изменения компоновки в разделе «Изменения компоновки» .
Изменения компоновки группируются в одном окне сессии . В примере показано два окна сессии. Между окнами сессии есть промежутки.
Совокупные изменения макета (Cumulative Layout Shifts, CLS) — один из ключевых показателей веб-аналитики . Используйте дорожку «Изменения макета» , чтобы выявить потенциальные проблемы и причины изменений макета.
При улучшении метрики CLS всегда начинайте с самого большого окна сессии. В нашем примере окно сессии 1 — это самое большое окно, исходя из цвета и уровня фона.
Нажмите на снимок экрана, чтобы просмотреть подробности изменения макета, определить потенциальные первопричины и затронутые элементы.
В нашем примере потенциальной первопричиной является некорректный размер медиафайлов . Чтобы узнать, как это исправить, см. раздел «Оптимизация кумулятивного смещения макета» .
Понимание изменений в расположении элементов. Оценка.
Чтобы понять, как рассчитываются баллы, воспользуйтесь разделом «Окно» на панели «Подробности» . В разделе « Окно» отображается, к какому окну сессии относится текущее изменение макета.
Если смещается вся страница, максимальный балл за каждое смещение макета равен 1 В нашем примере первое смещение макета получило 0.15 балла. Второе смещение макета получило 0.041 балла.
Общий балл для этого окна сессии составляет 0.19 . Исходя из порогового значения CLS, требуется улучшение. Цвет фона окна сессии отражает это.
График фонового изображения окна сессии со временем увеличивается. Кумулятивный показатель изменения макета отражает увеличение в данный момент времени.
Просмотреть сетевую активность
Просматривайте сетевую активность в разделе «Сеть» . Вы можете развернуть раздел «Сеть», чтобы просмотреть все сетевые действия, и щелкнуть по каждому элементу, чтобы просмотреть подробную информацию.
Просмотр активности рендерера
Просматривайте активность рендеринга в дорожке «Рендереры» . Вы можете развернуть каждый рендерер, чтобы просмотреть его активность, и щелкнуть по каждому элементу, чтобы просмотреть подробности.
Просмотр активности графического процессора
Отображение активности графического процессора осуществляется в дорожке «Графический процессор» . По умолчанию дорожка «Графический процессор» скрыта. Чтобы включить её, установите флажок «Графический процессор» в настройках .
Просмотр времени работы пользователей
Для получения пользовательских показателей производительности вы можете использовать функцию «Время выполнения пользователем» и визуализировать свои измерения с помощью дорожки «Время выполнения» . Для получения дополнительной информации см. API функции «Время выполнения пользователем» .
Ознакомьтесь с демонстрационной страницей , которая рассчитывает время загрузки текста.
Чтобы посмотреть время, затраченное пользователем:
- Mark добавляет элементы в ваше приложение с помощью
performance.mark(). - Измерьте время, прошедшее между отметками, с помощью
performance.measure(). - Рекордные показатели .
- Просмотрите результаты измерений на дорожке «Время» . Если дорожка не отображается, проверьте раздел «Пользовательское время» в настройках .
- Для просмотра подробностей нажмите на отметку времени на трассе.
Настройте пользовательский интерфейс
Чтобы настроить временную шкалу и дорожки , щелкните значок » на панели и выберите нужные параметры.
Экспорт записи
Чтобы сохранить запись, нажмите «Экспорт .
Импортировать запись
Чтобы загрузить запись, выберите «Импорт/ .
Удалить запись
Чтобы удалить запись:
- Нажмите кнопку » . Откроется диалоговое окно подтверждения.
- В появившемся диалоговом окне нажмите кнопку «Удалить» , чтобы подтвердить удаление.