질문

웹 애플리케이션에서 First Contentful Paint(FCP)와 Time to Interactive(TTI)의 차이를 설명하고, 이 두 성능 지표를 최적화하기 위한 방법들을 설명해주세요

1. FCP (First Contentful Paint)

• 통상적인 의미 : 페이지가 로딩되기 시작한 시점부터 화면에 의미 있는 콘텐츠(텍스트, 이미지, svg 요소, 흰색이 아닌 canvas 요소)가 처음으로 렌더링되는 시점까지의 시간 (최적은 1.8초 이내)
• 내가 이해한 의미 : 화면에 맨 처음 그려지는 컨텐츠(텍스트, 이미지 등)이 그려지는 데 걸리는 시간 (최적은 몇 초이내)

<aside> 🏃🏻‍♀️

페이지 로딩, 로드와 렌더링

• 페이지 로딩 : 사용자가 페이지로 진입한 시점

• 로드 : 페이지 로드는 페이지를 구성하는데 필요한 모든 리소스(HTML 문서와 CSS, Javascript, 이미지 등의 외부 리소스)들이 다운로드 완료되었을 때

• 렌더링 : 브라우저가 HTML, CSS, Javascript를 화면에 표시하는 과정

</aside>

2. TTI (Time to Interactive)

: 웹 페이지가 완전히 ‘사용 가능한 상태’가 되는 시간

예) 유투브 썸네일이 확인은 되지만 아직 클릭이 안된다면 아직 TTI가 완료되지 않은 시간이며,

썸네일을 클릭할 수 있는 시점이 TTI라고 봄

• 모든 요소들이 상호작용 가능한 상황까지의 시간을 측정함
• 구글에서는 5초 이내여야 좋은 사용자 경험을 제공할 수 있다고 봄

2-1. 왜 바로 영상을 클릭할 수 없는건가?

웹 페이지가 단계적으로 로딩되기 때문이다.

<aside> 🏃🏻‍♀️

**웹 페이지의 단계적 로딩

1. 기본적인 HTML 구조가 로드 (뼈대)
2. 그 다음 이미지와 스타일이 로드 (겉모습)
3. 마지막으로 Javascript가 로드되고 실행 (기능)**

</aside>

3. FCP와 TTI의 차이점