Узнайте о проблемах с производительностью рендеринга, воспользовавшись этим справочником параметров, связанных с производительностью, на вкладке «Рендеринг» .
Выделите перекрашенные области с помощью мерцания краски
Если эта опция включена, Chrome мигает экраном зеленым каждый раз, когда происходит перерисовка.
Чтобы просмотреть области, которые перекрашиваются:
- Откройте вкладку «Рендеринг» в этой демонстрации и установите флажок «Проблеск Paint» .
- Обратите внимание на перекраску, выделенную зеленым цветом.
Если на другой странице вы видите, что весь экран мигает зеленым цветом или области экрана, которые, по вашему мнению, не следует закрашивать, рассмотрите возможность дальнейшего расследования.
Выделить области смещения макета
Сдвиги макета вызывают неожиданную перерисовку и могут быть не только раздражающими, но и вредными.
Чтобы просмотреть расположение и время смещения макета на странице:
Откройте вкладку «Рендеринг» и установите флажок «Области смещения макета» .
Обновить страницу. Области смещения макета кратко выделены фиолетовым цветом.
Просмотр слоев и плиток с границами слоев
Используйте «Границы слоев» , чтобы просмотреть наложение границ слоев и плиток в верхней части страницы.
Чтобы включить границы слоев:
- Откройте вкладку «Рендеринг» и установите флажок «Границы слоев» .
- Обратите внимание на границы слоев — оранжевые и оливковые, а плитки — голубые.
См. комментарии в debug_colors.cc для объяснения цветовой кодировки.
Просматривайте количество кадров в секунду в режиме реального времени со статистикой рендеринга кадров.
Статистика рендеринга кадров — это наложение, которое отображается в правом верхнем углу области просмотра.
Чтобы открыть статистику рендеринга кадров :
- Откройте вкладку «Рендеринг» и установите флажок «Статистика рендеринга кадров» .
- Следите за статистикой в правом верхнем углу страницы.
Наложение статистики рендеринга кадров показывает:
- Оценка количества кадров в секунду при запуске страницы в реальном времени.
- Временная шкала кадров в виде графика с тремя типами кадров:
- Кадры успешно отрисованы (синие линии).
- Частично представленные кадры (желтые линии)
- Пропущенные кадры (красные линии).
- Состояние растра GPU: включен или выключен. Дополнительные сведения см. в разделе «Как получить растеризацию графического процессора» .
- Использование памяти графического процессора: количество используемой и максимальное количество МБ памяти.
Выявление проблем с производительностью прокрутки
Используйте «Проблемы производительности прокрутки» , чтобы определить элементы страницы, у которых есть прослушиватели событий, связанных с прокруткой, которые могут снизить производительность страницы.
Чтобы просмотреть потенциально проблемные элементы:
- Откройте вкладку «Рендеринг» и проверьте «Проблемы с производительностью прокрутки» .
- Обратите внимание на выделенные потенциально проблемные элементы.
Просмотр основных веб-показателей
Web Vitals — это инициатива Google, направленная на предоставление единого руководства по качественным сигналам, которые необходимы для обеспечения комфортного взаимодействия с пользователем в Интернете.
Основные веб-показатели — это подмножество веб-показателей, которые применяются ко всем веб-страницам. Каждый из основных веб-показателей представляет собой отдельный аспект пользовательского опыта, поддается измерению в полевых условиях и отражает реальный опыт достижения критического, ориентированного на пользователя результата. Основные веб-показатели:
- Самая большая краска по содержанию (LCP) : измеряет производительность загрузки . Чтобы обеспечить удобство работы пользователя, LCP должен происходить в течение 2,5 секунд с момента первой загрузки страницы.
- Interaction to Next Paint (INP) : измеряет интерактивность . Чтобы обеспечить хорошее взаимодействие с пользователем, страницы должны иметь INP 200 миллисекунд или меньше.
- Совокупный сдвиг макета (CLS) : измеряет визуальную стабильность . Чтобы обеспечить хорошее взаимодействие с пользователем, страницы должны поддерживать CLS 0,1. или меньше.
Используйте расширение Chrome Web Vitals, чтобы просмотреть значения Core Web Vitals вашей страницы.