FP (First Paint)

FP
First Paint
웹 성능 메트릭 중 하나로, 브라우저가 탐색 후 화면에 무엇이든 처음으로 그리기 시작한 시점을 의미한다.
사용자가 하얀 빈 화면을 보다가 무언가(배경색, 텍스트 한 글자, 이미지의 일부 등)가 처음으로 나타나는 찰나의 순간이다.
사용자 경험(UX): 사용자가 "아, 페이지가 로딩 중이구나"라고 인지하기 시작하는 심리적 지표이다.
측정 대상: 픽셀이 화면에 렌더링되는 모든 순간을 포함한다. 이는 의미 있는 콘텐츠(이미지, 제목 등)가 아니어도 상관없으며, 단순한 배경색 변경만으로도 FP가 트리거될 수 있다.

FP, FCP - 비교

FP가 늦게 발생한다는 것은 사용자가 오랫동안 빈 화면을 보고 있다는 뜻이며, 보통 다음 요인들이 영향을 준다.
1. 렌더링 차단 리소스(Render-blocking resources): <head> 태그 내의 무거운 외부 CSS나 JavaScript 파일이 로드되고 실행될 때까지 브라우저는 렌더링을 멈춘다.
2. 네트워크 지연: 서버로부터 HTML 첫 번째 바이트를 받는 시간(TTFB: Time to First Byte)이 길어지면 당연히 FP도 뒤로 밀린다.
3. 메인 스레드 부하: 복잡한 스타일 계산이나 JavaScript 실행이 초기 렌더링 프로세스를 방해할 때 발생한다.