Medindo o impacto da transmissão: FCP, TTI e LCP

FCP mede o tempo desde o início da navegação até o momento em que o primeiro conteúdo (texto, imagem ou plano de fundo) é renderizado na tela. A transmissão em fluxo melhora o FCP ao enviar imediatamente a estrutura inicial do HTML — o navegador pode renderizar o layout, a navegação e qualquer texto acima da dobra assim que os primeiros blocos chegam.

Com SSR síncrono (renderToString), o navegador não recebe HTML até que toda a renderização seja concluída. Com a transmissão em fluxo, o navegador recebe a estrutura inicial do HTML poucos milissegundos após a solicitação — o layout e o conteúdo estático aparecem quase imediatamente, reduzindo drasticamente o FCP.

LCP mede quando o maior elemento visível na área de visualização é renderizado — normalmente uma imagem de destaque ou um título grande. A transmissão em fluxo melhora o LCP se o elemento LCP fizer parte da estrutura inicial (e não estiver dentro de um limite Suspense), pois a estrutura inicial é transmitida antes de qualquer seção dependente de dados.

Uma otimização importante é projetar sua página de modo que o elemento LCP — a seção de destaque, o título principal ou a imagem em evidência — fique fora de qualquer limite Suspense. Se o elemento LCP estiver dentro de um limite Suspense aguardando dados, a transmissão em fluxo não poderá ajudar o LCP até que esses dados sejam resolvidos.

TTI mede quando a página responde de forma confiável à entrada do usuário — sem tarefas longas bloqueando a linha de execução principal. A transmissão em fluxo combinada com a hidratação seletiva reduz o TTI ao distribuir o trabalho de hidratação ao longo do tempo, em vez de executar uma única tarefa grande de hidratação síncrona depois que todo o JavaScript é baixado.

O Tempo até o Primeiro Byte (TTFB) é determinado pela latência da rede e pelo tempo de processamento do servidor antes que o primeiro byte seja enviado. A transmissão em fluxo não altera o TTFB — é aí que a renderização na borda ajuda. Para que a transmissão em fluxo melhore o FCP, primeiro é necessário ter um TTFB baixo; caso contrário, você estará apenas transmitindo a partir de uma origem lenta.

A visualização de sequência de imagens do WebPageTest mostra uma sequência de capturas de tela feitas a cada 100 ms durante o carregamento da página. Uma página com transmissão progressiva mostra o layout surgindo cedo e, depois, as seções sendo preenchidas progressivamente. Uma página sem transmissão progressiva mostra uma tela em branco seguida repentinamente por uma página totalmente renderizada — uma diferença visual clara.

Um teste significativo compara a mesma página renderizada de duas formas: com a transmissão de RSC do Next.js ativada e com SSR síncrono tradicional. Utilize o WebPageTest com uma condição de rede fixa, por exemplo, 3G rápida e redução de velocidade da CPU de 4 vezes, e compare as métricas FCP, LCP e TTI em 3 execuções de teste para obter confiança estatística.

A aba Rede do Chrome DevTools tem um menu suspenso chamado "Limitação", com predefinições como 3G rápida e 4G lenta. A 3G rápida (1,6 Mbps, RTT de 150 ms), a diferença entre transmissão progressiva e ausência de transmissão progressiva fica exagerada porque o tempo de download de todo o documento HTML é ampliado, tornando visíveis os ganhos da transmissão incremental.

Interação até a próxima pintura (INP) mede o tempo entre qualquer interação do usuário e a próxima pintura. Ela substituiu o FID como uma métrica essencial da Web em 2024. A transmissão progressiva reduz o INP ao priorizar a hidratação dos componentes interativos com os quais o usuário provavelmente interagirá primeiro, diminuindo o tempo de bloqueio antes que esses componentes se tornem responsivos.

A configuração de maior impacto combina renderização na borda, com TTFB baixo a partir de um ponto de presença próximo, transmissão progressiva, com entrega progressiva de HTML, e hidratação seletiva, com processamento progressivo de JS. Juntas, essas três técnicas minimizam todas as principais métricas de desempenho ao longo de todo o ciclo de carregamento.

A transmissão progressiva melhora mais diretamente o FCP ao entregar imediatamente a estrutura HTML, e melhora o LCP quando o elemento LCP está nessa estrutura. O TTI melhora porque a hidratação seletiva distribui o trabalho de JS ao longo do tempo. O TTFB não é alterado — trate-o com renderização na borda. Utilize a sequência de imagens do WebPageTest e a limitação de rede do Chrome DevTools para medir o impacto da transmissão progressiva, e otimize o INP como a principal métrica de interatividade das métricas essenciais da Web.