Измерение влияния потоковой передачи: FCP, TTI и LCP

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

При синхронной SSR с использованием renderToString браузер не получает HTML, пока весь рендеринг не завершён. При потоковой передаче браузер получает HTML-оболочку в течение нескольких миллисекунд после запроса — макет и статическое содержимое появляются почти сразу, значительно сокращая FCP.

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

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

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

Время до первого байта (TTFB) определяется задержкой сети и временем обработки на сервере до отправки первого байта. Потоковая передача не изменяет TTFB — здесь помогает рендеринг на периферии. Чтобы потоковая передача улучшила FCP, сначала необходимо добиться низкого TTFB; иначе вы просто передаёте данные с медленного исходного сервера.

Режим киноленты в WebPageTest показывает последовательность снимков экрана, сделанных каждые 100 мс во время загрузки страницы. На странице с потоковой передачей макет появляется рано, а затем разделы постепенно заполняются. На странице без потоковой передачи сначала отображается пустой экран, после чего внезапно появляется полностью отрисованная страница — это заметное визуальное различие.

Показательный тест производительности сравнивает одну и ту же страницу, отрисованную двумя способами: с включённой потоковой передачей Next.js RSC и с традиционной синхронной SSR. Используйте WebPageTest с фиксированными условиями сети, например Fast 3G и 4-кратным замедлением CPU, и сравните метрики FCP, LCP и TTI в 3 тестовых запусках для получения статистически достоверных результатов.

На вкладке «Сеть» в Chrome DevTools есть раскрывающийся список «Ограничение скорости» с готовыми профилями, такими как Fast 3G и Slow 4G. Fast 3G (1,6 Мбит/с, RTT 150 мс) подчёркивает различие между потоковой передачей и её отсутствием, поскольку увеличивает время загрузки полного HTML-документа и делает заметными преимущества поэтапной потоковой передачи.

Взаимодействие до следующей отрисовки (INP) измеряет время от любого взаимодействия пользователя до следующей отрисовки. В 2024 году эта метрика заменила FID в составе основных веб-показателей. Потоковая передача уменьшает INP, отдавая приоритет гидратации интерактивных компонентов, с которыми пользователь, вероятнее всего, будет взаимодействовать в первую очередь, и сокращая время блокировки до того, как эти компоненты начнут реагировать.

Наибольший эффект даёт сочетание отрисовки на периферии (низкий TTFB благодаря близкой точке присутствия) с потоковой передачей (поэтапной доставкой HTML) и выборочной гидратацией (поэтапной обработкой JS). Вместе эти три метода минимизируют все основные метрики производительности на протяжении всего жизненного цикла загрузки.

Какую метрику производительности потоковая передача React наиболее непосредственно улучшает для содержимого в первом экране?

Потоковая передача наиболее непосредственно улучшает FCP, немедленно доставляя HTML-оболочку, а также улучшает LCP, если элемент LCP находится в этой оболочке. TTI улучшается благодаря выборочной гидратации, которая распределяет работу JS во времени. TTFB не изменяется — для его улучшения используйте отрисовку на периферии. Измеряйте влияние потоковой передачи с помощью киноленты WebPageTest и ограничения скорости в Chrome DevTools, а для оптимизации интерактивности в первую очередь ориентируйтесь на INP среди основных веб-показателей.