스트리밍 영향 측정: FCP, TTI, LCP

FCP는 탐색이 시작된 시점부터 텍스트, 이미지 또는 배경과 같은 첫 번째 콘텐츠가 화면에 그려질 때까지의 시간을 측정합니다. 스트리밍은 HTML 셸을 즉시 보내 FCP를 개선합니다. 브라우저는 첫 번째 청크가 도착하는 즉시 레이아웃, 탐색 메뉴, 화면 위쪽의 텍스트를 그릴 수 있습니다.

동기식 SSR(renderToString)을 사용하면 전체 렌더링이 완료될 때까지 브라우저는 HTML을 받지 못합니다. 스트리밍을 사용하면 요청 후 몇 밀리초 안에 브라우저가 HTML 셸을 받으므로 레이아웃과 정적 콘텐츠가 거의 즉시 나타나 FCP가 크게 줄어듭니다.

LCP는 뷰포트에서 가장 큰 표시 요소가 그려지는 시점을 측정합니다. 일반적으로 주요 이미지나 큰 제목이 해당합니다. LCP 요소가 Suspense 경계 안이 아니라 셸의 일부라면 스트리밍이 LCP를 개선합니다. 셸이 데이터에 의존하는 섹션보다 먼저 스트리밍되기 때문입니다.

중요한 최적화 방법은 LCP 요소(주요 영역, 기본 제목, 대표 이미지)를 Suspense 경계 바깥에 배치하도록 페이지를 설계하는 것입니다. LCP 요소가 데이터를 기다리는 Suspense 경계 안에 있으면 해당 데이터가 해결될 때까지 스트리밍으로 LCP를 개선할 수 없습니다.

TTI는 페이지가 사용자 입력에 안정적으로 응답하는 시점을 측정합니다. 이때 메인 스레드를 차단하는 긴 작업이 없어야 합니다. 스트리밍을 선택적 하이드레이션과 결합하면 모든 JavaScript가 다운로드된 후 하나의 큰 동기식 하이드레이션 작업을 실행하는 대신 하이드레이션 작업을 시간에 걸쳐 분산하여 TTI를 줄일 수 있습니다.

최초 바이트 시간(TTFB)은 첫 번째 바이트를 보내기 전의 네트워크 지연 시간과 서버 처리 시간에 의해 결정됩니다. 스트리밍은 TTFB를 바꾸지 않습니다. 이 부분에는 엣지 렌더링이 도움이 됩니다. 스트리밍으로 FCP를 개선하려면 먼저 TTFB가 낮아야 합니다. 그렇지 않으면 느린 원본 서버에서 스트리밍하는 것에 불과합니다.

WebPageTest의 필름스트립 보기에서는 페이지가 로드되는 동안 100ms마다 촬영한 스크린샷의 연속 장면을 보여 줍니다. 스트리밍 페이지에서는 레이아웃이 일찍 나타난 다음 섹션이 점진적으로 채워지는 모습을 볼 수 있습니다. 비스트리밍 페이지에서는 빈 화면이 나타난 후 완전히 렌더링된 페이지가 갑자기 표시되므로, 두 방식의 시각적 차이가 분명합니다.

의미 있는 벤치마크를 위해서는 동일한 페이지를 두 가지 방식으로 렌더링하여 비교해야 합니다. 하나는 Next.js RSC 스트리밍을 활성화한 방식이고, 다른 하나는 기존 동기식 SSR 방식입니다. 고정된 네트워크 조건(예: 빠른 3G, CPU 4배 감속)에서 WebPageTest를 사용하고, 통계적 신뢰도를 확보하기 위해 3회의 테스트 실행에서 FCP, LCP, TTI 지표를 비교하십시오.

Chrome DevTools의 네트워크 탭에는 빠른 3G와 느린 4G 같은 사전 설정이 있는 "스로틀링" 드롭다운이 있습니다. 빠른 3G(1.6Mbps, 150ms RTT)는 전체 HTML 문서의 다운로드 시간을 늘려 스트리밍과 비스트리밍의 차이를 과장하므로, 점진적 스트리밍의 성능 향상을 눈에 띄게 보여 줍니다.

상호작용 후 다음 페인트까지의 시간(INP)은 사용자의 상호작용이 발생한 시점부터 다음 페인트까지 걸리는 시간을 측정합니다. 2024년에 FID를 대신하여 핵심 웹 바이털이 되었습니다. 스트리밍은 사용자가 먼저 상호작용할 가능성이 높은 상호작용 가능한 컴포넌트의 하이드레이션을 우선 처리하여 INP를 낮춥니다. 그 결과 해당 컴포넌트가 반응할 수 있게 되기 전까지 화면을 막는 시간이 줄어듭니다.

가장 큰 효과를 내는 구성은 엣지 렌더링(가까운 엣지 거점에서 제공되는 낮은 TTFB), 스트리밍(점진적인 HTML 전달), 선택적 하이드레이션(점진적인 JS 처리)을 결합합니다. 이 세 가지 기법을 함께 사용하면 전체 로딩 수명 주기에서 주요 성능 지표를 모두 낮출 수 있습니다.

리액트 스트리밍이 첫 화면 콘텐츠에 대해 가장 직접적으로 개선하는 성능 지표는 무엇입니까?

스트리밍은 HTML 셸을 즉시 전달하여 FCP를 가장 직접적으로 개선하며, LCP 요소가 셸에 있는 경우 LCP도 개선합니다. TTI는 JS 작업을 시간에 걸쳐 분산하는 선택적 하이드레이션을 통해 개선됩니다. TTFB는 변하지 않으므로 엣지 렌더링으로 해결하십시오. WebPageTest 필름스트립과 Chrome DevTools의 속도 제한 기능을 사용하여 스트리밍의 영향을 측정하고, 핵심 웹 바이털에서는 기본 상호작용 지표인 INP를 최적화하십시오.