Поделиться через


Средство повышения производительности. Анализ производительности веб-сайта

Используйте средство производительности для анализа производительности веб-сайта. Существует два main представления:

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

Подробное содержимое:

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

Обзор

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

Откройте средство "Производительность"

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

  1. Перейдите на веб-страницу, например демонстрацию "Изучение вселенной ", в новом окне или вкладке.

  2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

    Откроется devTools.

  3. На панели действий в верхней части щелкните значок Производительность инструмент Производительность.

    Если значок Производительность инструмент Производительность не отображается на панели действий, нажмите кнопку Дополнительные инструменты (значок ") и выберите средство Производительность.

Использование меню "Команда"

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

  1. Перейдите на веб-страницу, например демонстрацию "Изучение вселенной ", в новом окне или вкладке.

  2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

    Откроется devTools.

  3. В правом верхнем углу devTools щелкните Настройка и управление Средствами разработки, а затем команду Выполнить.

    Или нажмите:

    • macOS: Command+SHIFT+P
    • Windows, Linux, ChromeOS: Control+SHIFT+P

    Откроется меню "Команда " с текстом Выполнить >команду.

  4. Начните вводить производительность, выберите Показать производительность [панель], а затем нажмите клавишу ВВОД.

    Меню команд с введенным параметром performance

Локальные метрики для взаимодействия со страницами

Используйте средство "Производительность ", чтобы просмотреть метрики Core Web Vitals в начальном представлении Локальные метрики . На домашней странице средства производительности отображаются локальные метрики, то есть метрики производительности для отрисоваемой веб-страницы:

  • Наибольший объем содержимого (LCP) — как быстро загружается main содержимое страницы.
  • Накопительный сдвиг макета (CLS) — мера последнего неожиданного сдвига макета страницы.
  • Взаимодействие с next Paint (INP) — скорость реагирования последнего взаимодействия пользователя на странице.

При первоначальном открытии средства производительности метрики Core Web Vitals отображаются в трех карточках в разделе Локальные метрики :

Домашняя страница средства

Записанные временная шкала профиля

Кроме того, используйте средство "Производительность " для просмотра записанной трассировки производительности, в том числе:

  • Запишите профиль производительности.
  • Изменение параметров записи.
  • Анализ отчета о производительности. Показывает сведения о производительности страницы за период времени, в котором была выполнена запись, например:
    • Взаимодействие с пользователем, которое произошло во время записи.
    • Запущенный код JavaScript.
    • Выполненные операции оформления и макета.
    • Другие метрики производительности с течением времени, такие как сетевые запросы и сдвиги макета.

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

Переключение на просмотр локальных метрик или другого профиля

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

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

Средство

Мониторинг метрик Core Web Vitals

Используйте средство "Производительность ", чтобы просмотреть метрики Core Web Vitals в начальном представлении Локальные метрики . На домашней странице средства производительности отображаются локальные метрики, которые представляют собой метрики производительности для отображаемой веб-страницы:

  • Наибольший объем содержимого (LCP) — как быстро main содержимое страницы загружено.
  • Накопительный сдвиг макета (CLS) — мера последнего неожиданного сдвига макета страницы.
  • Взаимодействие с next Paint (INP) — скорость реагирования последнего взаимодействия пользователя на странице.

Терминология

Термин Описание Docs
Web Vitals Большой набор метрик, обеспечивающих единое руководство по обеспечению удобного взаимодействия с пользователем в Интернете. Web Vitals
Core Web Vitals Подмножество web Vitals, которое применяется ко всем веб-страницам и должно измеряться всеми владельцами сайтов. Каждый из core Web Vitals представляет собой отдельный аспект взаимодействия с пользователем, измерим в этой области и отражает реальный опыт критического результата, ориентированного на пользователей. Core Web Vitals in Web Vitals
Наибольшее содержимое paint (LCP) Измеряет производительность загрузки . Чтобы обеспечить хороший пользовательский интерфейс, LCP должен выполняться в течение 2,5 секунд после начала загрузки страницы. Время отрисовки самого большого изображения, текстового блока или видео, видимого в окне просмотра, относительно того, когда пользователь впервые переходил на страницу. Наибольший объем содержимого краски (LCP),оптимизация LCP
Совокупный сдвиг макета (CLS) Измеряет стабильность визуального элемента. Чтобы обеспечить хороший пользовательский интерфейс, страницы должны поддерживать CLS 0.1. или меньше. Наибольшее число показателей сдвига макета для каждого непредвиденного смещения макета, которое происходит в течение всего жизненного цикла страницы. Совокупный сдвиг макета (CLS),оптимизация CLS
Взаимодействие с next Paint (INP) Измеряет интерактивность. Чтобы обеспечить хорошее взаимодействие с пользователем, страницы должны иметь inp 200 миллисекунда или меньше. Общая скорость реагирования страницы на взаимодействие с пользователем в зависимости от задержки всех операций щелчка, касания и с клавиатуры, которые происходят на протяжении всего времени посещения страницы пользователем. Взаимодействие с next Paint (INP)и оптимизация INP
локальные метрики, локальные данные Метрики LCP, CLS и INP. Они записываются локально на проверяемой веб-странице и обновляются при взаимодействии со страницей.

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

Чтобы создать плохую или требуемую метрику улучшения на картах LCP, CLS и INP в средстве производительности :

  1. Откройте веб-страницу, например демонстрацию "Изучение вселенной ", в новом окне или вкладке.

    Демонстрационная страница "Изучение вселенной " предназначена для медленной загрузки и обработки взаимодействий, чтобы продемонстрировать, как метрики LCP, CLS и INP можно использовать в средстве производительности для выявления и устранения проблем с производительностью.

  2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

    Откроется devTools.

  3. На панели действий в верхней части щелкните значок Производительность инструмент Производительность.

    Если значок Производительность инструмент Производительность не отображается на панели действий, нажмите кнопку Дополнительные инструменты (значок ") и выберите средство Производительность.

  4. Разверните окно и сделайте область демонстрационной страницы широкой, например 60 % от ширины окна.

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

  5. Выберите Область >Дальнейшие действияПараметры среды карта > раскрывающемся списке >Регулирования ЦП выберите 4x замедление — рекомендуется.

    Или выберите Параметры захвата (значок параметров записи с синей точкой) > Регулирование ЦП в раскрывающемся списке >4x замедление — рекомендуется.

  6. Выберите Область >Дальнейшие действияПараметры среды карта > раскрывающемся списке >Регулирование сети выберите Медленный 4G.

  7. Выберите Область >Дальнейшие действияПараметры среды карта > установите флажок Отключить сетевой кэш.

    Результаты локальных метрик: плохие; нуждается в улучшении; и бедных

  8. Щелкните правой кнопкой мыши (или долго щелкните) кнопку Обновить слева от адресной строки, а затем выберите Пустой кэш и жесткое обновление.

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

    Карточки LCP и CLS показывают оранжевое значение и нуждается в улучшении, или красное значение и плохое, а не зеленое значение и хорошее.

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

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

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

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

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

  12. После завершения отрисовки изображения галактики на отрисовке демонстрационной страницы щелкните один из заголовков в столбце Обнаружения справа, например гелиоцентрическая теория (1543).

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

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

  14. В карта INP щелкните значение INP.

    На демонстрационной странице карточки Обнаружения предназначены для медленного развертывания и повторной отрисовки, поэтому между щелчком заголовка и отображением развернутого карта содержимого требуется много времени. Задержка является случайным значением от 100 мс до 1000 мс, что приводит к высокому значению INP.

    Под карточками Локальные метрики заполняются вкладки Взаимодействия и Сдвиги макета .

Вкладка "Взаимодействия"

На вкладке Взаимодействия отображаются сведения о взаимодействии с веб-страницей:

Вкладка

Вкладка Взаимодействия включает:

  • Этапов.
  • Азы.
  • Таймингов.

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

Вкладка "Сдвиги макета"

На вкладке Смены макета отображаются сведения о сменах макета:

Вкладка

Вкладка Смены макета включает:

  • Отзывов.
  • Азы.

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

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

Запись профиля производительности

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

Изменение параметров записи

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

Выберите следующие параметры в меню Параметры захвата :

Анализ отчета о производительности

Полное руководство по использованию средства производительности см. в статье Анализ записи производительности в справочнике по функциям производительности.

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

Чтобы сосредоточиться на том, что важно для рабочего процесса:

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

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

Повышение производительности с помощью этих средств

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

Средство Статья
Инструмент Lighthouse Оптимизация скорости веб-сайта с помощью Lighthouse
Средство "Память " Устранение проблем с памятью
Вкладка "Аналитика" средства >повышения производительности Получите полезные сведения в справочнике по функциям производительности.
Средство отрисовки Средство отрисовки, чтобы увидеть, как выглядит веб-страница с разными параметрами отображения или недостатками зрения
Средство "Проблемы " Поиск и устранение проблем с помощью средства "Проблемы"
Средство повышения производительности Просмотр сведений о слоях в справочнике по функциям производительности

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Оригинал страницы находится здесь и авторами Дейл Санкт Марта и София Емельянова.

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.