웹 페이지 최적화를 위한 CWV 점검

코어 웹 바이탈(CWV)이란?

핵심 웹 바이탈(CWV)은 웹 사이트가 검색 엔진 결과에 표시되는 위치에 영향을 미치는 웹 성능 측정 지표입니다.
웹사이트 퍼포먼스를 평가할 때 정말 중요한데 어떤 지표들로 구성되는지 알아보겠습니다.

 

✅ CWV 3대 지표 + 최신 지표

LCP	Largest Contentful Paint	가장 큰 콘텐츠(이미지, 비디오, 텍스트 등)가 로드 완료되는 시간	2.5초 이하
FID	First Input Delay	사용자가 첫 클릭/탭 등 입력했을 때 반응하기까지의 시간	100ms 이하
CLS	Cumulative Layout Shift	페이지가 로딩 중 갑자기 요소가 밀리는 현상의 총합	0.1 이하
INP⭐	Interaction to Next Paint	전체 페이지 이용 중 모든 상호작용 반응 속도를 종합한 값 (클릭, 키보드 입력 등)	200ms 이하

 

✅ INP는 뭐가 다른가?

• FID는 "첫 번째" 입력에만 집중했지만,
  INP는 페이지 전체 이용하면서 발생하는 모든 인터랙션의 반응성을 종합적으로 측정합니다.
• 그래서 사용자 입장에서는 실제 체감 속도를 더 정확하게 반영합니다.

📌 요약

2024년부터는 FID 대신 INP가 Core Web Vitals에 포함되어
퍼포먼스 점검할 때 INP, LCP, CLS 이 3개를 체크하는 게 기준이 되었다고 하니,

웹표준을 위한 최적화 작업할 때 신경써줘야 합니다.

 

 

✅ Core Web Vitals 측정 도구

내 사이트의 CWV를 점검하고자 한다면 관련 도구를 이용하여 측정하면 되는데

아래 방법중 편한 방법으로 확인해볼 수 있습니다.

 

1. Lighthouse

1. 크롬 브라우저에서 테스트할 사이트 접속.
2. 키보드에서 F12 또는 우클릭 → 검사(Inspect) 클릭.
3. 상단 탭에서 “Lighthouse” 선택.체크박스에서 분석할 범위 선택 (Performance, SEO 등).
4. Generate report 클릭.
5. 잠시 기다리면 리포트 자동 생성(LCP, CLS, INP, TBT 등 CWV 지표 포함)

애플 사이트) Lighthouse 실행시 화면

🔹 참고 팁

• 모바일/데스크탑 모드 선택 가능.
• 실제 환경과 약간 차이가 있는 랩 데이터 기준.
• 문제 영역은 색깔로 쉽게 구분(빨강-노랑-초록).

⚠️  주의사

• INP 확인 불가 (FID 확인은 가능)

 

2. Web Vitals Chrome 확장 프로그램

1. 크롬 확장 프로그램에서 'Core Web Vitals Visualizer' 검색 후 설치.
2. 설치된 확장 프로그램에서 'clear cache & reload' 버튼 클릭.

애플 사이트) Core Web Vitals Visualizer 실행시 화면

 

🔹 참고 팁

• 페이지 내 상호작용을 많이 해보면서 INP가 어떤 요소에서 튀는지 확인
• 화면에 표시되는 수치가 높게 나오면, 원인을 추적해서 개선 (예: 버튼 반응 느림 → 코드 최적화)
• 문제 영역은 색깔로 쉽게 구분(빨강-노랑-초록).

⚠️  주의사항

• 초기 로딩 후 잠시 대기: 특히 INP는 상호작용 이후 측정되므로 클릭/스크롤 후 체크

 

3. PageSpeed Insights 사이트 활용

아래 링크 접속하여 분석하고자 하는 URL 입력

https://pagespeed.web.dev/

PageSpeed Insights

애플 사이트) PageSpeed Insights 에서 분석시 화면

 

▶ 추천 조합

• 빠르게 확인할 땐 👉 PageSpeed Insights
• 개발 단계에서 👉 Lighthouse
• 실시간 점검용 👉 Web Vitals 확장 프로그램
• 사이트 전체 상태 확인 👉 Search Console