Resource Waterfall отображает каждый запрос, сделанный страницей, на временной шкале, каждый столбец разбивается на реальные фазы — очередь, DNS, TCP, TLS, ожидание и загрузка — с маркерами для FCP, LCP, DOMContentLoaded и загрузки.
Когда страница кажется медленной, вопрос всегда один и тот же: чего она ждет? Собственный ответ браузера находится на панели «Сеть», что означает открытие DevTools, прикрепление ящика к проверяемой странице и перезагрузку, чтобы поймать начало загрузки.
Resource Waterfall помещает эту временную шкалу на плавающую панель рядом со страницей. Каждый запрос отображается в виде полосы, расположенной по времени его запуска и сегментированной по тому, где фактически прошло его время: в очереди или в остановке, поиск DNS, соединение TCP, рукопожатие TLS, ожидание сервера, затем загрузка. Длинный синий сегмент — медленный сервер; длинный зеленый — толстый файл; длинный серый означает, что запрос ожидает своей очереди. Различие решает, что вам следует исправить.
Пунктирные маркеры на временной шкале показывают первую отрисовку контента, самую большую отрисовку контента, DOMContentLoaded и загрузку, поэтому вы можете видеть, какие запросы завершаются до того, как пользователь что-либо увидит, а какие продолжают выполняться после этого. Ресурсы, блокирующие рендеринг, и попадания в кэш помечаются в каждой строке, а один блокирующий фильтр сокращает список до того, что фактически задерживает первую отрисовку.
Фильтруйте по типу, ищите по URL-адресу или сортируйте по самому медленному или самому большому, чтобы быстро найти злостного нарушителя. Щелкните любую строку, чтобы увидеть ее полный URL-адрес, протокол, размеры передачи и декодирования, статус и полную разбивку по фазам. Запросы, которые поступают, когда панель открыта, поступают прямо в систему, а функция Export JSON копирует всю временную шкалу, включая этапы, поэтому результаты производительности можно передать кому-то другому без снимка экрана.
Каждая полоса разделена на очередь, DNS, TCP, TLS, ожидание и загрузку, поэтому сразу различимы медленный сервер, толстый файл и запрос в очереди.
Пунктирные линии для FCP, LCP, DOMContentLoaded и загрузки показывают, какие запросы завершаются до того, как пользователь увидит контент, а какие продолжают выполняться после него.
Одним щелчком мыши список сокращается до ресурсов, фактически содержащих первую отрисовку, с общим количеством блокировок на сводной панели.
Ресурсы, обслуживаемые из кэша, помечаются и помечаются, а не отображаются в виде загадочных нулевых строк, поэтому вы можете убедиться, что ваше кэширование действительно работает.
Ограничьте по типу — документ, CSS, JS, изображения, шрифты, XHR, мультимедиа — выполните поиск по URL-адресу или отсортируйте по самому медленному или самому большому, чтобы за считанные секунды найти худшего нарушителя.
Скопируйте весь водопад в формате JSON, включая контрольные точки, итоговые суммы и этапы каждого запроса, чтобы прикрепить его к заявке или сравнить с более поздним запуском.
Отфильтруйте ресурсы, блокирующие рендеринг, и просмотрите точные таблицы стилей и скрипты, стоящие между вашим посетителем и видимым контентом.
Отсортируйте по самому медленному и наблюдайте, как вверху появляется поставщик аналитики, шрифтов или чата с длительной фазой ожидания, которая не имеет ничего общего с вашим кодом.
Прочтите цвета фаз: время, потраченное на ожидание, — это проблема серверной части или CDN, время, потраченное на загрузку, — это проблема с размером файла. Исправления для каждого разные.
Перезагрузите и подтвердите, что ресурсы поступают из кэша и что размеры передачи намного меньше декодированных размеров, что доказывает, что сжатие действительно включено.
Экспортируйте временную шкалу в формате JSON и прикрепите ее к заявке, чтобы следующий человек увидел те же цифры, а не пытался воспроизвести ваш сеанс.
Щелкните значок Resource Waterfall в доке DevSuite Pro. Все, что страница загрузила на данный момент, немедленно появляется на временной шкале.
Перезагрузите страницу с открытой панелью, чтобы зафиксировать загрузку с самого первого запроса, включая сам документ и этапы рисования.
Нажмите на блокирующий чип, чтобы увидеть только ресурсы, блокирующие рендеринг, или выберите тип, например js или img. Отсортируйте по самому медленному, чтобы поставить на первое место худшего нарушителя.
Щелкните любую строку, чтобы увидеть ее полный URL-адрес, протокол, размеры, статус и поэтапную разбивку в миллисекундах — и скопируйте URL-адрес, если он вам нужен.
Экспорт JSON копирует полную временную шкалу с контрольными точками и итоговыми показателями, которые можно вставить в заявку или сохранить в качестве записи «до» и «после».
Установите DevSuite Pro бесплатно и разблокируйте более 71 инструментов разработчика для вашего браузера.
