코어 웹 바이탈 개선 방법 — LCP·INP·CLS 우선순위 7단계

사이트 속도 점수가 빨간불인데 어디부터 손대야 할지 막막한 분이 많으실 거예요. 저희가 컨설팅을 다녀보면 공통적으로 "이미지를 가볍게 했는데 LCP가 안 떨어진다", "INP가 뭔지 모르겠다" 같은 얘기를 정말 많이 듣습니다. 솔직히 말하면 코어 웹 바이탈은 한 번에 다 잡으려고 하면 오히려 헷갈립니다. 이 글에서는 저희가 실무에서 검증한 코어 웹 바이탈 개선 방법을 LCP·INP·CLS 우선순위 순으로 정리했습니다. 가장 효과 큰 작업부터 차례로 따라 하면 됩니다.

코어 웹 바이탈이 검색 순위에 미치는 영향

코어 웹 바이탈은 Google 검색 센터 공식 문서에 명시된 페이지 경험 신호의 일부입니다. 단독으로 순위를 결정하지는 않지만, 콘텐츠 품질이 비슷한 두 페이지가 경쟁할 때 사용자 경험이 더 좋은 쪽이 우대됩니다. 실무에서는 동률 깨기(tiebreaker) 신호로 보면 거의 맞습니다.

위 수치는 web.dev — Core Web Vitals 개선 가이드가 인용한 HTTP Archive 2024 Web Almanac 기준입니다. 이 세 숫자만 봐도 어디서 점수가 새는지 보이죠. 즉 대부분의 사이트가 이미지 처리만 제대로 해도 점수가 한 단계씩 올라옵니다.

현재 점수 측정하기 — 필드 데이터와 랩 데이터

개선에 들어가기 전에 반드시 현재 점수를 정확히 측정해야 합니다. 측정 없이 추측으로 손대면 엉뚱한 곳을 고치게 됩니다. 코어 웹 바이탈은 두 가지 데이터로 본다는 점이 핵심입니다.

PageSpeed Insights

가장 먼저 열어야 할 도구입니다. URL을 넣으면 상단에 필드 데이터(=실제 사용자 경험), 하단에 랩 데이터(=Lighthouse) 결과가 같이 나옵니다. 저희는 보통 필드 데이터에서 빨간 지표를 먼저 확인하고, 그 지표를 랩 데이터에서 재현시키는 순서로 봅니다.

Search Console — Core Web Vitals 보고서

도메인 단위로 어떤 URL 그룹이 미흡인지 한 번에 봅니다. 단일 URL 검사는 PSI가 빠르지만, 사이트 전체 패턴은 Search Console이 정확합니다. 색인 자체가 안 잡히는 경우라면 먼저 크롤링 문제 진단부터 해두세요.

Lighthouse + Chrome DevTools

실시간 디버깅용입니다. DevTools의 Performance 패널에서 "Long tasks"를 켜고 사용자 인터랙션을 흉내 내면 INP 원인이 정확히 어느 스크립트인지 보입니다.

LCP 개선 방법 — 가장 큰 콘텐츠 빠르게 그리기

LCP는 사용자가 페이지에서 가장 큰 요소(보통 메인 이미지나 헤드라인)가 화면에 그려지는 시간입니다. 모바일 페이지의 73%가 LCP 요소가 이미지라는 통계만 봐도, LCP 개선 방법은 결국 "메인 이미지를 얼마나 빨리 보여주냐" 싸움입니다.

1단계: LCP 요소 찾기

Chrome DevTools의 Performance 패널을 열고 페이지를 로드하면 타임라인에 "LCP" 마커가 찍힙니다. 마커를 클릭하면 어떤 DOM 요소가 LCP인지 정확히 보입니다. 의외로 원하지 않는 요소(예: 푸터 배너, 광고 영역)가 LCP로 잡히는 경우가 흔합니다.

2단계: 이미지 발견성 확보 (fetchpriority)

• LCP 이미지는 반드시 HTML에 <img src="..."> 또는 <link rel="preload">로 직접 등장해야 합니다. CSS background-image나 자바스크립트로 주입하면 발견이 늦어집니다.
• LCP 이미지에 fetchpriority="high"를 추가합니다. 브라우저가 다른 리소스보다 먼저 다운로드를 시작합니다.
• 스크롤 위쪽(above the fold) 이미지에 loading="lazy"가 붙어 있다면 즉시 제거합니다. lazy loading은 아래쪽 이미지에만 적용해야 합니다.
• 이미지를 WebP/AVIF로 변환하고 srcset으로 디바이스별 적절한 크기를 제공합니다.

3단계: TTFB와 CDN

이미지를 아무리 가볍게 해도 서버 응답이 느리면 LCP는 떨어지지 않습니다. TTFB(Time To First Byte)가 0.8초를 넘는다면 가장 먼저 CDN을 붙여야 합니다. web.dev에 따르면 HTML 문서 요청의 33%만 CDN에서 제공된다고 하니, 도입만 해도 상당한 개선 여지가 있습니다.

INP 개선 방법 — 사용자 인터랙션 빠르게 응답하기

INP는 2024년 3월부터 FID를 대체한 새 지표입니다. 사용자가 클릭/탭/입력했을 때 다음 화면 갱신까지 걸리는 시간 중 가장 긴 값을 측정합니다. 즉 "내 사이트가 얼마나 응답성이 좋은가"의 척도입니다. INP 200ms 미만이 양호 기준입니다.

긴 작업 쪼개기

수백 개의 DOM 노드를 한 번에 렌더링하거나, 큰 배열을 동기적으로 정렬하는 코드는 메인 스레드를 길게 점유합니다. 작업을 작은 단위로 쪼개서 중간중간 브라우저에 제어권을 돌려줘야 합니다.

async function processItems(items) {
  for (const item of items) {
    doHeavyWork(item);
    if (scheduler?.yield) await scheduler.yield();
  }
}

불필요한 자바스크립트 제거

Chrome DevTools의 Coverage 탭을 열면 페이지 로드 시 실제로 사용되지 않은 JS/CSS가 빨간색으로 표시됩니다. 저희가 분석해보면 평균적으로 페이지당 30~50%의 JS가 실행되지 않고 있습니다. 코드 스플리팅과 dynamic import로 초기 번들을 줄이세요.

이벤트 핸들러 최적화

스크롤·resize·input 이벤트에 무거운 콜백을 그대로 붙이면 INP가 무너집니다. requestAnimationFrame으로 묶거나 디바운스/스로틀을 적용하고, 상태 업데이트는 React라면 useDeferredValue / startTransition으로 우선순위를 낮추는 식으로 처리합니다.

CLS 개선 방법 — 화면이 흔들리지 않게

CLS는 페이지가 로드되는 도중 콘텐츠가 갑자기 점프하는 정도를 측정합니다. 0.1 미만이 양호인데, 양호로 만들기는 사실 다른 두 지표보다 쉽습니다. 원인이 거의 정해져 있기 때문입니다.

이미지·iframe·동영상에 width·height

가장 큰 원인입니다. <img> 태그에 width, height 속성이 없으면 브라우저가 이미지 로드 전까지 자리를 비워두지 못합니다. 모든 미디어 요소에 명시적 크기를 넣거나, CSS aspect-ratio: 16/9로 비율을 잡아주세요.

폰트 FOIT/FOUT 처리

웹폰트가 늦게 로드되면 시스템 폰트 → 웹폰트로 바뀌면서 줄 길이가 달라져 CLS가 발생합니다. font-display: optional로 처리하거나, size-adjust·ascent-override 같은 속성으로 대체 폰트와 크기를 맞추세요.

동적 삽입 콘텐츠 자리 확보

광고 배너, 동의 배너, "더 보기" 버튼처럼 늦게 삽입되는 요소는 미리 min-height로 자리를 잡아두지 않으면 무조건 CLS가 터집니다. 삽입 위치 위에 사용자가 이미 콘텐츠를 보고 있다면 더 치명적입니다.

현실에서 자주 보는 실수와 해결 패턴

저희가 컨설팅에서 반복적으로 마주치는 패턴을 정리했습니다. 본인 사이트에 해당하는 게 있는지 빠르게 체크해보세요.

월간 점검 루틴과 다음 단계

코어 웹 바이탈은 한 번 잡고 끝나는 게 아니라, 콘텐츠 추가·디자인 개편·외부 스크립트 추가로 슬금슬금 망가지는 지표입니다. 매달 30분만 들여서 점검 루틴을 돌리는 게 장기적으로 가장 효율적입니다.

• Search Console → Core Web Vitals 보고서에서 도메인 단위 빨간 URL 그룹 확인
• 주요 랜딩 페이지 3~5개 PageSpeed Insights 측정 (모바일 우선)
• 최근 추가한 외부 스크립트(GA, 광고, 채팅 등) 목록 점검 — 안 쓰는 건 삭제
• 새로 게재된 이미지에 width/height 속성과 적절한 포맷 적용 여부 확인
• LCP 이미지가 변경됐다면 fetchpriority 속성 재확인
• 이번 달 INP 회귀(regression)가 있다면 DevTools Performance로 long task 추적

여기까지 따라오셨다면 모바일 점수를 한 단계 위로 끌어올릴 토대는 갖춰졌습니다. 코어 웹 바이탈은 결국 "사용자가 빠르게 보고, 빠르게 누르고, 화면이 안 흔들리느냐"의 문제니까요. 같은 흐름에서 콘텐츠 구조와 메타 정보까지 함께 점검하고 싶다면 온페이지 SEO 최적화 가이드와 SEO 분석 도구 사용법도 같이 보시면 좋습니다.