Используйте панель «Производительность» для анализа производительности вашего сайта.
Обзор
Панель «Производительность» позволяет записывать профили производительности ЦП ваших веб-приложений. Анализируйте профили, чтобы найти потенциальные узкие места производительности и способы оптимизации использования ресурсов.
Используйте панель «Производительность» , чтобы сделать следующее:
- Запишите профиль производительности.
- Измените настройки захвата.
- Проанализируйте отчет о производительности.
Подробное руководство по повышению производительности вашего веб-сайта см. в разделе Анализ производительности во время выполнения .
Откройте панель «Производительность»
Чтобы открыть панель «Производительность» , откройте DevTools и выберите «Производительность» из набора вкладок вверху.
Альтернативно выполните следующие действия, чтобы открыть панель «Производительность» с меню «Команды» :
- Откройте Инструменты разработчика .
- Откройте командное меню, нажав:
- macOS: Command + Shift + P
- Windows, Linux, ChromeOS: Control + Shift + P.
- Начните вводить
Performance panel
, выберите «Показать панель производительности» и нажмите Enter .
Наблюдайте за основными веб-жизненными показателями в реальном времени
Когда вы открываете панель «Производительность» , она сразу фиксирует и отображает ваши локальные метрики «Наибольшая отрисовка контента» (LCP) и «Совокупный сдвиг макета» (CLS), сообщая вам их оценку (хорошая, требует улучшения или плохая).
Если вы взаимодействуете со своей страницей, панель «Производительность» также фиксирует ваше локальное взаимодействие с Next Paint (INP) и его оценку, что, в дополнение к LCP и CLS, дает вам полный обзор основных веб-показателей вашей страницы с использованием вашего сетевого подключения. и устройство.
На панели «Производительность» представлен список зафиксированных взаимодействий под тремя карточками показателей. Чтобы очистить список, нажмите
Очистить» .Чтобы получить разбивку оценки метрики, наведите указатель мыши на значение метрики, чтобы увидеть всплывающую подсказку.
Сравните свой опыт с опытом ваших пользователей
Вы также можете получить данные полей из отчета Chrome UX и сравнить впечатления пользователей вашего сайта с вашими местными показателями.
Чтобы добавить данные поля:
В разделе «Производительность» > «Дальнейшие шаги» > «Данные поля» нажмите «Настроить» .
В диалоговом окне «Настроить выборку данных поля » обратите внимание на раскрытие конфиденциальной информации и нажмите «ОК» .
Дополнительно: настройка сопоставления между средами разработки и производства...
При желании, чтобы автоматически получать наиболее актуальные полевые данные, вы можете настроить (множественные) сопоставления между источниками разработки и производства:
- В диалоговом окне разверните раздел Дополнительно и нажмите + Создать .
В таблице сопоставления введите URL-адреса разработки и производства и нажмите + .
Например, сопоставление
http://localhost:8080
сhttps://example.com
приведет к отображению данных поляexample.com/page1
при переходе наlocalhost:8080/page1
.Кроме того, если по какой-либо причине вы не можете получить данные поля автоматически, вы можете включить
Всегда показывать данные поля для указанного ниже URL-адреса» и указать URL-адрес. Панель «Производительность» сначала попытается получить данные поля для этого URL-адреса, а затем покажет вам эти данные независимо от того, на какую страницу вы переходите.Чтобы изменить настройки получения полевых данных после настройки, нажмите «Данные поля» > «Настроить».
После настройки выборки данных с полей на панели «Производительность» теперь отображается сравнение показателей ваших локальных показателей и показателей ваших пользователей. Вы можете увидеть период сбора данных в разделе «Полевые данные» справа.
Чтобы получить разбивку оценки метрики, наведите указатель мыши на значение метрики, чтобы увидеть всплывающую подсказку.
Настройте свою среду так, чтобы она лучше соответствовала среде ваших пользователей.
После настройки выборки полевых данных, как описано в предыдущем разделе, на панели «Производительность» отображаются рекомендации о том, как настроить среду так, чтобы она лучше соответствовала впечатлениям ваших пользователей.
Чтобы настроить среду:
В каждой карточке показателя разверните раздел «Учитывайте местные условия тестирования» , если таковой имеется, и прочтите рекомендации.
Похоже, что в этом примере, чтобы лучше соответствовать потребностям ваших пользователей, вы можете использовать общий размер экрана рабочего стола и снизить нагрузку на процессор и сеть.
Чтобы соответствовать конфигурации среды для этого примера:
- Установите для области просмотра один из распространенных размеров экрана (например, 720p или 1080p). Чтобы эмулировать определенные устройства и размеры экрана, вы можете использовать режим «Устройство» на панели «Элементы» .
- 82% пользователей веб-сайта в этом примере используют для просмотра настольные компьютеры. Чтобы убедиться, что вы сравниваете свои локальные показатели метрик с правильными полевыми данными, вы можете выбрать «Рабочий стол» в раскрывающемся списке «Полевые данные» > «Устройство» .
- В разделе «Настройки среды » установите раскрывающийся список «Сеть» , например, «Быстрый 4G» , а «ЦП» , например, «Замедление в 20 раз» . Вы также можете установить Отключить сетевой кеш» в том же разделе.
После настройки среды перезагрузите страницу, взаимодействуйте с ней, чтобы получить локальный INP, и снова сравните показатели метрик.
Похоже, показатели метрик теперь более похожи на те, которые испытывают ваши пользователи. Соответственно, из карточек метрик исчез раздел «Учитывайте местные условия испытаний» .
Теперь вы можете приступить к улучшению основных веб-показателей вашего веб-сайта:
Соберите и проанализируйте отчет о производительности
В следующих разделах следуйте инструкциям по записи профиля, изменению настроек захвата и анализу отчета.
Запишите профиль производительности
Когда вы будете готовы к записи, панель Performance предоставит вам следующие возможности:
- Рекордная производительность во время выполнения
- Рекордная производительность нагрузки
- Делайте снимки экрана во время записи
- Принудительная сборка мусора во время записи
- Сохранить запись
- Загрузить запись
- Очистить запись
Изменить настройки захвата
Настройки захвата позволяют вам изменить способ захвата записей производительности DevTools и предоставить вам дополнительную информацию в отчете. Нажмите
параметров захвата», чтобы получить доступ к меню настроек захвата .Выберите следующие параметры в меню настроек съемки :
- Отключить образцы JavaScript : отключает запись стеков вызовов JavaScript, отображаемых на основной дорожке, которые вызываются во время записи. Уменьшит накладные расходы на производительность.
- Включить расширенные инструменты рисования (медленно) : захватывает расширенные инструменты рисования. Значительно снижает производительность.
- Включить статистику селектора CSS (медленно) : собирает статистику селектора CSS. Значительно снижает производительность.
- Регулирование ЦП : имитирует более медленную скорость ЦП.
- Регулирование сети : имитирует более низкую скорость сети.
- Аппаратный параллелизм : настройте значение, сообщаемое
navigator.hardwareConcurrency
.
Анализ отчета о производительности
Подробное руководство по использованию панели «Производительность» см . в разделе «Анализ записи производительности» .
Ниже представлена группа тем из руководства, а также другая полезная документация:
Чтобы узнать, как перемещаться по отчету:
Чтобы узнать, как сосредоточиться на том, что важно для вашего рабочего процесса:
- Измените порядок треков и скройте их
- Скрыть функции и их дочерние элементы в диаграмме пламени
- Создавайте хлебные крошки и переключайтесь между уровнями масштабирования.
Чтобы узнать о вкладках «Снизу вверх», «Дерево вызовов» и «Журнал событий», выполните следующие действия:
Чтобы научиться анализировать отчет:
- Просмотр активности основной темы
- Прочитайте таблицу пламени
- Посмотреть скриншот
- Просмотр показателей памяти
- Просмотр продолжительности части записи
- Анализируйте производительность селектора CSS во время событий пересчета стиля.
- Профилируйте производительность Node.js с помощью панели «Производительность»
- Анализ кадров в секунду (FPS)
- Ссылка на событие временной шкалы
Улучшите производительность с помощью этих панелей
Откройте для себя другие панели, которые помогут вам улучшить производительность вашего сайта:
- Маяк: оптимизируйте скорость сайта
- Память: обзор панели памяти
- Статистика производительности: получите полезную информацию о производительности вашего веб-сайта.
- Рендеринг: обнаружение проблем с производительностью рендеринга.
- Проблемы: Найдите и устраните проблемы.
- Производительность: просмотр информации о слоях