패스잇
프론트엔드 개발 · 기초

웹 페이지 로딩 속도를 측정하는 대표적인 지표(Metrics)에는 어떤 것들이 있으며, 각각 무엇을 의미하나요? (예: FCP, LCP)

힌트 · FCP(First Contentful Paint)는 첫 번째 콘텐츠가 렌더링되는 시간, LCP(Largest Contentful Paint)는 가장 큰 콘텐츠가 렌더링되는 시간을 측정합니다. 이 외에도 CLS, FID 등이 있습니다.

FCPLCPTTFBCLSFID

모범답안

웹 페이지 로딩 속도를 측정하는 주요 지표에는 다음과 같은 것들이 있습니다.

  • FCP (First Contentful Paint): 브라우저가 페이지에서 처음으로 콘텐츠(텍스트, 이미지 등)를 렌더링하는 데 걸리는 시간을 의미합니다. 사용자가 페이지가 로딩되고 있다는 것을 인지하는 데 중요한 지표입니다.

  • LCP (Largest Contentful Paint): 뷰포트 내에서 가장 큰 콘텐츠 요소(이미지, 비디오, 블록 레벨 텍스트 등)가 렌더링되는 시간을 측정합니다. 사용자 경험의 핵심 지표로, 페이지의 주요 콘텐츠가 얼마나 빨리 보이는지를 나타냅니다.

  • TTFB (Time to First Byte): 브라우저가 서버로부터 첫 번째 바이트를 받는 데 걸리는 시간입니다. 서버 응답 속도, 네트워크 지연 등을 파악하는 데 유용합니다.

  • FID (First Input Delay): 사용자가 페이지와 처음 상호작용할 때(예: 버튼 클릭) 브라우저가 응답하기까지의 지연 시간을 측정합니다. 페이지의 반응성을 나타내는 지표입니다.

  • CLS (Cumulative Layout Shift): 페이지 로딩 중 예상치 못한 레이아웃 변경이 발생하는 정도를 측정합니다. 시각적 안정성을 평가하는 데 사용되며, 사용자가 콘텐츠를 읽거나 상호 작용하는 데 방해를 줄 수 있는 요소를 파악합니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 웹 성능 최적화 면접 질문

← 웹 성능 최적화 면접 질문 전체 보기