웹 성능 최적화 지표 (Core Web Vitals & 확장 지표)

안녕하세요 선영입니다.
저는 이전에 UI 프로젝트를 진행하면서
웹 접근성과 웹 성능 최적화를 위해 WAVE와 LightHouse를 활용해본 경험이 있습니다.

그 과정에서 LightHouse에서 평가하는 지표들은 정확히 무엇을 의미할까?
라는 궁금증이 생겨 이번 글을 정리하게 되었습니다

---

Core Web Vitals란?

구글은 웹 사이트 성능을 평가할 때 가장 중요한 세 가지 지표를 Core Web Vitals로 정의합니다.
이는 단순한 속도 측정이 아니라, 사용자 경험(UX)과 직결되는 요소들입니다.

Core Web Vitals가 우수하다 = 웹 성능 최적화 + 사용자 경험 개선 + SEO(검색 엔진 최적화) 강화

처음에는 LCP, FID, CLS였지만, FID가 한계(첫 상호작용만 측정)를 보여서 현재는 INP로 대체되었습니다

---

주요 지표

1. LCP (Largest Contentful Paint)

• 의미: 화면에서 가장 큰 콘텐츠가 표시되는 데 걸린 시간
• 측정 대상
  • <img> 요소 (애니메이션의 경우 첫 프레임)
  • <svg> 안의 <image> 요소
  • <video> 요소 (포스터 이미지 또는 첫 프레임)
  • CSS url() 배경 이미지
  • 블록 요소 안의 텍스트 노드/인라인 텍스트
• 사용자가 실제로 콘텐츠로 인식하지 않을 가능성이 있는 요소는 제외
  => Chromium 기반 브라우저는 몇 가지 휴리스틱(경험적 규칙)을 사용
  • 투명한 요소: 불투명도가 0이라 화면에 안 보이는 요소
  • 배경으로 보이는 큰 요소: 화면 전체를 덮지만 실제 콘텐츠가 아닌 요소
  • 자리표시자 이미지: 실제 콘텐츠가 아닐 가능성이 높은 저해상도/단순 이미지 

즉, 사용자가 페이지가 떴다고 느끼는 시점을 평가하는 지표입니다.

2. FID → INP (Interaction to Next Paint)

• FID: 사용자가 첫 상호작용(클릭, 탭, 키 입력)을 했을 때 반응 지연 시간
• INP: 페이지 전체 이용 과정에서 발생하는 모든 상호작용 반응 속도를 종합적으로 측정

즉, INP는 FID보다 더 실제 사용자 경험에 가까운 지표 입니다.

3. CLS (Cumulative Layout Shift)

• 의미: 화면 내 요소가 예기치 않게 이동하거나 크기가 변하는 정도
• 예시: 버튼이 갑자기 밀려나서 다른 버튼을 잘못 클릭하는 경우

CLS는 시각적 안정성을 평가하는 핵심 지표입니다.

---

확장 Web Vitals

Core Web Vitals 외에도 추가적으로 참고할 수 있는 지표들이 있습니다.

1. FCP (First Contentful Paint)

• 사용자가 페이지를 열고 첫 번째 텍스트나 이미지가 화면에 나타날 때까지 걸린 시간

2. TTFB (Time To First Byte)

• 사용자가 요청을 보낸 후 서버에서 첫 응답이 도착하기까지 걸린 시간
• 즉, 서버 응답 속도를 평가하는 지표

---

정리

• Core Web Vitals: LCP, INP, CLS → 사용자 경험에 직접적인 영향
• 확장 지표: FCP, TTFB → 성능 원인 분석 및 최적화 가이드 제공
• 좋은 Web Vitals = 빠른 속도 + 안정된 UI + 긍정적인 UX
• SEO(검색 엔진 최적화)에도 직접적인 도움이 됨

결국, Web Vitals 관리는
단순히 점수를 올리는 것이 아니라
더 나은 사용자 경험과 웹 환경을 만드는 기반이라고 할 수 있습니다.

AI로 손쉽게 코드를 작성할 수 있고
부트캠프로 예비개발자가 쏟아져 나오고 있는 지금

웹 성능 최적화와 사용자 경험을 신경 쓰는 태도가
나만의 차별점이 될 수 있지 않을까란 생각을 해봅니다!

참고자료 
- web.dev article : LCP/FID/INP/CLS/FCP/TTFB 

Core Web Vitals 및 Google 검색결과 이해하기 | Google 검색 센터  |  Documentation  |  Google for Developers

 

최대 콘텐츠 렌더링 시간(LCP)  |  Articles  |  web.dev

 

TTFB (Time to First Byte)  |  Articles  |  web.dev