Панель "Производительность": анализ эффективности сайта

Используйте панель Производительность, чтобы анализировать эффективность сайта.

Обзор

На панели Производительность можно записывать профили производительности ЦП для веб-приложений. Анализируйте профили, чтобы выявлять потенциальные проблемы с производительностью и способы оптимизации использования ресурсов.

На панели Производительность можно:

• Запись профиля производительности.
• Изменить настройки записи.
• Анализировать отчет об эффективности.

Подробное руководство по повышению эффективности сайта можно найти в статье Как анализировать эффективность во время выполнения.

Как открыть панель "Производительность"

Чтобы открыть панель Эффективность, откройте инструменты разработчика и выберите Эффективность на вкладках вверху.

Вы также можете открыть панель Производительность с помощью меню команд, выполнив следующие действия:

1. Откройте инструменты разработчика.
2. Откройте меню команд, нажав:
3. macOS: Command + Shift + P.
4. Windows, Linux, ChromeOS: Control+Shift+P
5. Начните вводить Performance panel, выберите Показать панель "Эффективность" и нажмите клавишу Ввод.

Как отслеживать показатели Core Web Vitals в реальном времени

Когда вы открываете панель Производительность, она сразу же собирает и показывает вам локальные показатели Largest Contentful Paint (LCP) и Cumulative Layout Shift (CLS) и их оценку ("Хорошо", "Требуется доработка" или "Низкая скорость").

Если вы взаимодействуете со страницей, на панели Эффективность также регистрируется локальный показатель Interaction to Next Paint (INP) и его оценка. Вместе с LCP и CLS он позволяет получить полное представление о показателях Core Web Vitals страницы с использованием вашего сетевого подключения и устройства.

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

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

Сравните свой опыт с опытом пользователей

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

Чтобы добавить данные в поле:

1. В разделе Эффективность > Следующие шаги > Данные полей нажмите Настроить.

   

2. В диалоговом окне Настроить получение данных полей ознакомьтесь с Заявлением о конфиденциальности и нажмите ОК.

   Расширенные возможности: настройте сопоставление между средами разработки и рабочей средой…

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

   1. В диалоговом окне разверните раздел Расширенные и нажмите + Создать.

   2. В таблице сопоставления введите URL для разработки и производства и нажмите +.

      

      Например, если сопоставить http://localhost:8080 с https://example.com, то при переходе к localhost:8080/page1 будут отображаться данные поля example.com/page1.

      Если по какой-либо причине вы не можете получить данные наблюдений автоматически, установите флажок check_boxВсегда показывать данные наблюдений для указанных ниже URL и укажите URL. На панели Эффективность сначала будут получены данные полей для этого URL, а затем они будут показаны независимо от того, на какую страницу вы перейдете.

      Чтобы изменить настройки извлечения данных полей после настройки, нажмите Данные полей > Настроить.

   После настройки извлечения данных полей на панели Эффективность будет показано сравнение локальных значений показателей и значений, полученных от пользователей. Период сбора данных указан в разделе Данные полей справа.

   

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

Настройте среду в соответствии с потребностями пользователей

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

Чтобы настроить среду:

1. На каждой карточке показателя разверните раздел Учтите локальные условия для теста (если он есть) и ознакомьтесь с рекомендациями.

   

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

2. Чтобы настроить среду, как в этом примере:

   1. Установите для области просмотра один из стандартных размеров экрана (например, 720p или 1080p). Чтобы эмулировать определенные устройства и размеры экрана, можно использовать режим устройства на панели Элементы.
   2. В этом примере 82% пользователей сайта просматривают его на компьютерах. Чтобы сравнить показатели, полученные на вашем устройстве, с данными для определенного типа устройств, выберите Настольный компьютер в раскрывающемся списке Данные для определенного типа устройств > Устройство.
   3. В разделе Настройки среды в раскрывающемся списке Сеть выберите, например, Быстрая 4G, а в раскрывающемся списке ЦП – 20-кратное замедление. В том же разделе можно установить флажок check_box Отключить сетевой кеш.

3. После того как вы настроите среду, обновите страницу, взаимодействуйте с ней, чтобы получить локальное значение INP, и снова сравните показатели.

   

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

Теперь вы можете начать улучшать показатели Core Web Vitals своего сайта:

• Оптимизация LCP
• Как оптимизировать INP
• Оптимизация CLS

Как создать и проанализировать отчет об эффективности

В следующих разделах приведены инструкции по записи профиля, изменению настроек захвата и анализу отчета.

Как записать профиль производительности

Когда вы будете готовы к записи, на панели Производительность будут доступны следующие варианты:

• Как записать данные об эффективности во время выполнения
• Как записать данные об эффективности загрузки
• Как делать скриншоты во время записи
• Как принудительно запустить сборку мусора во время записи
• Как сохранить запись
• Как загрузить запись
• Как удалить запись

Как изменить настройки записи

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

В меню Настройки записи выберите следующие варианты:

• Отключить выборку JavaScript – отключает запись стеков вызовов JavaScript, которые отображаются на дорожке Основная и вызываются во время записи. Снижает нагрузку на производительность.
• Включить расширенную регистрацию отрисовки (медленно) – включает расширенную регистрацию отрисовки. Значительно снижает производительность.
• Включить статистику селекторов CSS (медленно) – фиксирует статистику селекторов CSS. Значительно снижает производительность.
• Ограничение производительности ЦП – имитация медленной работы ЦП.
• Ограничение пропускной способности сети – имитация низкой скорости сети.

Как анализировать отчет об эффективности

Полное руководство по использованию панели Производительность приведено в статье Как анализировать запись производительности.

Ниже приведены темы из руководства и другая полезная документация.

Чтобы узнать, как работать с отчетом:

• Как перемещаться по записи
• Поиск
• Отслеживание инициаторов событий

Используйте статистику эффективности, чтобы получать полезные данные об эффективности вашего сайта:

• Статистика эффективности

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

• Как изменить порядок дорожек и скрыть их
• Как скрыть функции и их дочерние элементы на диаграмме
• Как создавать цепочки навигации и переходить между уровнями масштабирования

Чтобы узнать больше о вкладках "Снизу вверх", "Дерево вызовов" и "Журнал событий":

• Как посмотреть действия в таблице

Чтобы узнать, как анализировать отчет:

• Как посмотреть действия в основной цепочке
• Как читать диаграмму
• Как посмотреть скриншот
• Как посмотреть показатели памяти
• Как посмотреть продолжительность фрагмента записи
• Как анализировать производительность селекторов CSS во время событий Recalculate Style
• Как профилировать производительность Node.js с помощью панели "Производительность"
• Анализ количества кадров в секунду
• Справочник по событиям хронологии

Как повысить эффективность с помощью этих панелей

Ознакомьтесь с другими панелями, которые помогут вам повысить эффективность сайта:

• Lighthouse: оптимизация скорости загрузки сайта
• Память: обзор панели "Память"
• Отрисовка: выявляйте проблемы с производительностью отрисовки
• Проблемы: поиск и устранение неполадок
• Производительность: просмотр информации о слоях

Дополнительные ресурсы