Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

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

Dale St. Marthe

Sofia Emelianova

Чтобы проанализировать производительность сайта, используйте панель Производительность.

Обзор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В разделе Производительность > Дальнейшие действия > Данные по полям нажмите Настроить.
В диалоговом окне Настройка получения данных полей ознакомьтесь с Раскрытием информации о конфиденциальности и нажмите ОК.
Дополнительно: настройте сопоставление между средой разработки и рабочей средой…

Чтобы автоматически получать наиболее релевантные данные наблюдений, вы можете настроить сопоставление между источниками для среды разработки и рабочей среды.
1. В диалоговом окне разверните раздел Дополнительно и нажмите + Создать.
2. В таблице сопоставления введите URL для разработки и производства и нажмите +.
  
  Например, если сопоставить http://localhost:8080 с https://example.com, то при переходе на страницу localhost:8080/page1 будут показываться данные для example.com/page1.
  
  Кроме того, если по какой-то причине вы не можете получить данные наблюдений автоматически, установите флажок Всегда показывать данные наблюдений для указанных ниже URL и укажите URL. Панель Производительность сначала попытается получить данные по этому URL, а затем покажет их, независимо от того, на какую страницу вы перейдете.
  
  Чтобы изменить настройки извлечения данных полей, нажмите Данные полей > Настроить.
После настройки получения данных на панели Производительность будет показываться сравнение локальных показателей и данных, полученных от пользователей. Период сбора данных можно посмотреть в разделе Данные наблюдений справа.

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

Настройте среду так, чтобы она лучше соответствовала среде ваших пользователей.

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

Чтобы настроить среду, выполните следующие действия:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как работать с отчетом

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

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

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

Чтобы узнать больше о вкладках Bottom-up (Снизу вверх), Call tree (Дерево вызовов) и Event log (Журнал событий):

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

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

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

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