Waterfall chart

Waterfall chart (водопадная диаграмма, каскадная диаграмма, граф загрузки) - это инструмент визуализации процесса загрузки веб-страницы, отображающий в хронологическом порядке все HTTP-запросы к ресурсам (HTML-документ, стили CSS, скрипты JavaScript, изображения, шрифты, данные с API). Каждый запрос представлен в виде горизонтальной полосы, длина которой соответствует общему времени загрузки ресурса, а цветовая разметка внутри полосы показывает, сколько времени занял каждый этап этого запроса.

В интернет-маркетинге и SEO водопадная диаграмма является ключевым инструментом для диагностики проблем с производительностью сайта. Она позволяет точно определить, какие ресурсы и почему замедляют загрузку страницы, что напрямую влияет на Core Web Vitals, поведенческие факторы и, в конечном счёте, на конверсию.

Важно отличать этот термин от waterfall-аукциона в программатик-рекламе.

Где можно увидеть Waterfall chart

Водопадные диаграммы являются неотъемлемой частью большинства инструментов для веб-разработчиков и анализа производительности:

• Браузерные инструменты разработчика (DevTools). Вкладка «Сеть» (Network) в Chrome, Firefox, Safari и Edge.
• Специализированные онлайн-сервисы.

    WebPageTest - предоставляет одну из самых детализированных водопадных диаграмм.
    PageSpeed Insights - упрощённая версия с акцентом на Core Web Vitals.
    GTmetrix - популярный инструмент с наглядным представлением данных.
    Pingdom Tools - также включает водопадную диаграмму.

• Сервисы мониторинга реальных пользователей (RUM). Яндекс.Метрика, Google Analytics (отчёты о скорости загрузки).

Как читать водопадную диаграмму

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

Этапы одного запроса

Стандартная полоса запроса разделена на цветные сегменты, соответствующие различным фазам:

• DNS Lookup (DNS-поиск). Время, затраченное на преобразование доменного имени в IP-адрес. Если этот этап долгий, проблема может быть в DNS-провайдере или настройках зоны.
• Initial Connection (Установка соединения). Время, необходимое для установки TCP-соединения с сервером.
• SSL/TLS Negotiation (Согласование SSL/TLS). Время, затраченное на рукопожатие для установки защищённого соединения (HTTPS). Появляется только для запросов к сайтам с HTTPS.
• Time to First Byte (TTFB). Время между отправкой запроса и получением первого байта ответа от сервера. Этот этап показывает, насколько быстро сервер обработал запрос. Высокий TTFB - сигнал о проблемах с хостингом, базой данных или серверной логикой.
• Content Download (Загрузка контента). Время получения самого файла (HTML, CSS, изображения). Длительная загрузка может указывать на слишком большой размер файла или медленный канал связи.

Ключевые вертикальные линии

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

• Start Render. Момент, когда браузер начинает отображать какую-либо часть страницы (пиксели на экране).
• First Contentful Paint (FCP). Момент, когда отображается первый текст или изображение.
• Largest Contentful Paint (LCP). Момент отображения самого крупного элемента контента (обычно изображение или большой блок текста).
• DOM Content Loaded (DCL). Событие, когда браузер полностью загрузил и распарсил HTML-документ, не дожидаясь загрузки стилей, картинок и подстраниц.
• Load (onLoad). Событие, когда страница и все её зависимые ресурсы (стили, изображения) полностью загружены.

Как анализировать водопадную диаграмму

Поиск «длинных» полос

Самый простой способ - посмотреть на самые длинные полосы. Они указывают на самые медленные ресурсы. Если это главная HTML-страница, проблема может быть в сервере. Если это огромное изображение - его нужно оптимизировать.

Анализ TTFB

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

Выявление блокирующих ресурсов

Водопадная диаграмма наглядно показывает, какие ресурсы блокируют рендеринг страницы. Обычно это внешние CSS и JavaScript-файлы, подключенные в `<head>`. Пока они не загрузятся и не выполнятся, браузер не показывает контент.

Параллельная загрузка

Современные браузеры могут загружать несколько ресурсов одновременно. На водопаде это видно как несколько полос, идущих параллельно. Узкое место - это последовательная загрузка, когда одна полоса начинается только после завершения другой. Часто это вызвано зависимостями или неправильными настройками.

Визуализация очередей

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

Типичные проблемы и их признаки на водопаде

Проблема	Признак на Waterfall chart
Медленный хостинг/сервер	Длинный оранжевый TTFB у самого первого запроса (HTML) и у многих других.
Тяжёлые неоптимизированные изображения	Длинные полосы запросов к изображениям с преобладанием зелёного сегмента загрузки.
Блокирующий рендеринг JavaScript	Длинная полоса загрузки JS-файла, расположенная до вертикальной линии Start Render.
Медленная работа внешних сервисов	Длинные полосы запросов к сторонним доменам (аналитика, виджеты, шрифты).
Отсутствие кэширования	При повторном визите (Repeat View) картина почти не отличается от первого.
Медленный DNS	Длинный DNS-сегмент у первого запроса.
Слишком много редиректов	Цепочка коротких запросов (с кодом 301/302) до основного контента.

Waterfall chart и Core Web Vitals

Водопадная диаграмма помогает понять, почему конкретная метрика Core Web Vitals имеет плохое значение:

• Плохой LCP. Найдите самый крупный элемент на странице (обычно это большое изображение или блок текста). Посмотрите на его запрос на водопаде. Если он загружается долго, проблема в нём. Если он начинает загружаться слишком поздно (после загрузки других тяжёлых скриптов), проблема в приоритетах загрузки.
• Плохой INP. На водопаде это увидеть сложнее, но можно проанализировать задачи, которые блокируют главный поток (Long Tasks), на специальной вкладке инструментов разработчика.
• Плохой CLS. Водопад не покажет прямую причину смещения вёрстки, но поможет понять, загружаются ли шрифты или изображения с неизвестными размерами слишком поздно.

Связанные термины

• Производительность сайта
• WebPageTest
• TTFB
• Core Web Vitals
• LCP
• Chrome DevTools
• Оптимизация изображений
• Кэширование