Next.js의 스트리밍을 공부하다가 이 스트리밍 기법이 최초 바이트까지의 시간(TTFB)과 최초 콘텐츠풀 페인팅(FCP)을 개선하는 데 도움을 많이 줬다는 내용을 접하게 됐습니다. 이 내용을 보면 스트리밍이 웹 성능 개선에 어마어마한 긍정적인 결과를 가져다줬음을 알 수 있는데요, 도대체 이 TTFB와 FCP란 것이 무엇이길래 언급되는 걸까요?🤔 두 개념을 이해하기 위해 자세히 조사해봤습니다.
웹 성능을 평가할 때 중요한 두 가지 개념이 있는데, 그건 바로 "최초 바이트까지의 시간(TTFB, Time to First Byte)"과 "최초 콘텐츠풀 페인팅(FCP, First Contentful Paint)"이라고 합니다. TTFB와 FCP가 무엇인지, 각각의 중요성을 쉽게 이해할 수 있도록 비유와 예제를 통해 설명하겠습니다.
최초 바이트까지의 시간(TTFB)
식당에서 음식을 주문하기까지 걸리는 시간
TTFB를 식당에서 음식을 주문하는 과정에 비유할 수 있습니다. 식당에서 음식을 주문하면 주방에서 주문을 확인하고, 요리를 시작하기 전에 주문을 받았다고 알리는 시간이 있죠. 이 시간이 TTFB와 비슷합니다. 손님이 주문한 후 주방에서 주문 확인을 끝내고 "요리를 시작하겠습니다"라고 말하는 순간까지의 시간인 것입니다.
그렇다면 웹에서는...
웹사이트에 접속했을 때, 브라우저가 서버에 요청을 보내고 서버가 이를 확인하고 응답을 시작할 때까지 걸리는 시간입니다. 예를 들어, 쇼핑몰 사이트에 들어가려고 주소를 입력했을 때, 서버가 "쇼핑몰 사이트 접속 요청을 받았습니다"라고 처음 반응하는 시간인 것입니다.
최초 콘텐츠풀 페인팅(FCP)
주문한 음식을 실제로 받는 순간
FCP를 식당에서 음식을 실제로 받는 과정에 비유할 수 있습니다. 주문 후 주방에서 음식을 준비하고, 그 음식이 손님 테이블에 처음으로 도착하는 순간이 FCP와 비슷합니다. 손님이 눈으로 처음 음식을 보고 "아, 음식이 나왔구나"라고 느끼는 시간인 것입니다.
그렇다면 웹에서는...
웹사이트에 접속했을 때, 브라우저가 첫 번째로 의미 있는 콘텐츠(이미지, 텍스트 등)를 화면에 표시하는 시간입니다. 예를 들어, 쇼핑몰 사이트의 로고나 메인 배너 이미지가 처음으로 화면에 보이는 순간이 FCP입니다.
최대 콘텐츠풀 페인팅(LCP)
가장 큰 메인 요리가 도착하는 순간
LCP는 식당에서 가장 큰 메인 요리가 테이블에 도착하는 순간에 비유할 수 있습니다. 작은 애피타이저나 음료는 이미 나왔을 수 있지만, 가장 중요한 메인 요리가 나와야 식사가 본격적으로 시작되었다고 느끼겠죠. 이 메인 요리가 테이블에 도착하는 순간이 LCP입니다.
그렇다면 웹에서는...
웹사이트에 접속했을 때, 브라우저가 가장 큰 의미 있는 콘텐츠(주로 큰 이미지, 비디오, 주요 텍스트 블록 등)를 화면에 표시하는 시간입니다. 예를 들어, 쇼핑몰 사이트에서 가장 큰 프로모션 배너나 주요 제품 이미지가 화면에 완전히 로드된 순간이 LCP입니다.
요약
- 최초 바이트까지의 시간(TTFB)
- 웹사이트 서버가 요청을 받고 첫 번째 바이트를 클라이언트(브라우저)로 보내기까지의 시간
- 최초 콘텐츠풀 페인팅(FCP)
- 웹사이트의 첫 번째 의미 있는 콘텐츠가 브라우저 화면에 나타나는 시간
- 최대 콘텐츠풀 페인팅(LCP):
- 웹사이트의 가장 큰 의미 있는 콘텐츠가 브라우저 화면에 나타나는 시간
이 개념들을 공부하고나니 스트리밍 기법이 TTFB와 FCP 감소에 어떤 긍정적인 영향을 줬는지 더 잘 이해할 수 있겠더군요.
💡스트리밍
HTML을 작은 단위로 쪼개서 만들어지는대로 클라이언트로 내보내 일부 데이터들을 빠르게 로드시키는 기법
이 기법으로 모든 데이터가 로드될 때까지 기다릴 필요없이 일부만 로드하여 사용자와의 인터랙션을 증가시키고, 페이지가 로딩 중이라는 인식 또한 사용자에게 보다 더 명확하게 심어줄 수 있다.
결론적으로 웹 성능 개선을 시도할 때 위의 개념들은 필수적으로 알아야 하는 것 같습니다. 예컨대, TTFB를 줄인다는 것은 서버의 반응 속도를 개선한다는 의미이고, FCP를 줄인다는 것은 중요한 콘텐츠를 빠르게 로드하고 표시한다는 것으로, 위의 개념들은 모두 웹 페이지를 최적화와 관련된 것들이니까요.
추가 참고 자료
- Web.dev - Time to First Byte (TTFB)
- Web.dev - First Contentful Paint (FCP)
- Google Developers - Optimize Website Speed
