Производительность страницы предоставляет мгновенный обзор производительности любой веб-страницы — метрики времени загрузки (FCP, DOMContentLoaded, полная загрузка, TTI), статистика DOM (количество элементов, глубина вложенности, обработчики событий) и разбивка ресурсов по количеству и размеру JavaScript, CSS, изображений, шрифтов и других активов. Цветовой показатель производительности даёт быструю оценку состояния страницы.
Профилирование производительности с помощью Lighthouse или WebPageTest обеспечивает глубокий анализ, но требует времени и выдаёт громоздкие отчёты. Иногда нужен быстрый ответ: «Эта страница быстрая или медленная? В чём главная проблема?» Производительность страницы даёт этот мгновенный обзор. Инструмент считывает данные о времени из Performance API и Navigation Timing API браузера (данные, уже собранные во время загрузки страницы — дополнительная загрузка не требуется) и отображает их в виде наглядной панели. В верхней части — ключевые метрики времени: First Contentful Paint (когда появляется первый контент), DOMContentLoaded (когда HTML полностью разобран), Full Load (когда все ресурсы загружены) и Time to Interactive (когда страница становится интерактивной). Каждая метрика выделена цветом — зелёный для быстрых, жёлтый для средних, красный для медленных — на основе пороговых значений Web Vitals. Ниже — разбивка ресурсов: сколько трафика тратится на JavaScript, CSS, изображения, шрифты и другие типы ресурсов, с визуальными столбчатыми диаграммами для удобного сравнения. Раздел статистики DOM показывает общее количество элементов, максимальную глубину вложенности и количество обработчиков событий — показатели сложности DOM, влияющие на производительность отрисовки.
Отображает First Contentful Paint (FCP), DOMContentLoaded, полную загрузку страницы и Time to Interactive (TTI) — четыре важнейшие метрики производительности. Каждая выделена цветом: зелёный (быстро), жёлтый (средне), красный (медленно) на основе установленных пороговых значений Web Vitals.
Визуальная столбчатая диаграмма, показывающая количество и суммарный размер каждого типа ресурсов: файлы JavaScript, таблицы стилей CSS, изображения, шрифты и прочие активы. Мгновенно видно, какой тип ресурсов вносит наибольший вклад в вес страницы.
Показывает общее количество элементов DOM, максимальную глубину вложенности и суммарное количество обработчиков событий. Большие DOM-деревья (2000+ элементов) и глубокая вложенность (15+ уровней) помечаются как потенциальные узкие места производительности.
Единственная оценка от 0 до 100 резюмирует состояние производительности страницы, выделяясь зелёным (85+), жёлтым (50–84) или красным (0–49). Основана на взвешенном сочетании метрик времени и эффективности ресурсов.
Показывает суммарный размер всех загруженных ресурсов в MB. Разбит по категориям: видно, что 842 KB — это JavaScript, 245 KB — изображения, 128 KB — CSS, что позволяет определить самые «тяжёлые» составляющие.
Считывает данные о производительности из Performance API браузера — данные, уже собранные в ходе обычной загрузки страницы. Никакого повторного тестирования, никаких дополнительных сетевых запросов и никакого влияния на производительность от работы инструмента.
Откройте любую страницу и получите мгновенный обзор производительности. Она быстрая (зелёная оценка), средняя (жёлтая) или медленная (красная)? Панель отвечает менее чем за секунду — без ожидания запуска Lighthouse.
Если страница медленная, разбивка ресурсов покажет причину. 1,2 MB JavaScript? Вот узкое место. 800 KB неоптимизированных изображений? Вот что нужно исправить. Визуальная разбивка делает самые «тяжёлые» составляющие очевидными.
Запустите производительность страницы перед оптимизациями, зафиксируйте метрики. Внесите изменения, перезагрузите и запустите снова. Сравните FCP, время загрузки и суммарный вес страницы, чтобы убедиться в ожидаемом эффекте оптимизаций.
Запустите производительность страницы на своём сайте и сайтах конкурентов. Сравните время загрузки, вес страницы и распределение ресурсов. Конкуренты используют меньше JavaScript? Их изображения лучше оптимизированы?
Регулярно запускайте инструмент на ключевых страницах в процессе разработки. Если оценка производительности падает или вес страницы внезапно увеличивается — вы внесли регрессию. Обнаруживайте её до выхода в продакшн.
Откройте плавающую панель DevSuite Pro и нажмите на иконку производительности страницы. Панель мгновенно появится с данными о производительности для текущей загрузки страницы.
Проверьте четыре ключевые метрики вверху: FCP, DOMContentLoaded, Full Load и TTI. Зелёные значения — быстро, жёлтые — средне, красные — требуют улучшения.
Посмотрите на столбчатую диаграмму ресурсов, чтобы определить, какой тип активов самый «тяжёлый». JavaScript нередко вносит наибольший вклад — если JS превышает 500 KB, стоит рассмотреть разделение кода или ленивую загрузку.
Просмотрите статистику DOM. Если количество элементов превышает 1500 или глубина вложенности превышает 15, рассмотрите упрощение разметки для улучшения производительности отрисовки.
Общая оценка даёт быстрый ориентир. Запустите инструмент до и после оптимизаций, чтобы измерить улучшение.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
