구글 핵심 웹 지표(Core Web Vitals)의 이해: LCP, FID, CLS 개선 가이드

6월 03, 2026

블로그에 좋은 글을 쓰고 XML 사이트맵까지 등록했는데도 상위 노출이 잘 안 된다면, 이제는 구글이 강조하는 '사용자 경험(UX)'을 점검해 봐야 합니다.

구글은 검색 순위를 결정할 때 웹사이트가 얼마나 빠르게 뜨고, 얼마나 매끄럽게 작동하는지 평가하는 '핵심 웹 지표(Core Web Vitals)'를 매우 중요한 알고리즘 요소로 활용하고 있습니다. 아무리 유익한 글이라도 페이지가 뜨는 데 한 세월이 걸리거나 화면이 덜컹거리면 사용자는 바로 이탈해 버리기 때문이죠.

구글이 평가하는 핵심 웹 지표의 3가지 핵심 요소인 LCP, FID(INP), CLS가 무엇인지, 그리고 내 블로그를 어떻게 최적화해야 하는지 알기 쉽게 정리해 드립니다.

1. 핵심 웹 지표의 3대 요소와 진단 기준

구글은 웹사이트의 성능을 크게 로딩 속도(시각적), 상호작용(반응성), 시각적 안정성의 3가지 기준으로 나누어 평가합니다.

① LCP (Largest Contentful Paint) : 최대 콘텐츠 렌더링 시간

개념: 사용자가 링크를 클릭한 후, 화면에서 가장 큰 이미지나 텍스트 블록(보통 메인 배너나 히어로 이미지)이 완전히 뜨는 데 걸리는 시간입니다. 즉, 사용자가 느낄 때 "이제 사이트가 다 떴구나"라고 인지하는 실질적인 로딩 속도입니다.
기준 점수: 2.5초 이하가 나와야 '좋음(Good)' 판정을 받습니다. 4.0초를 넘어가면 구글로부터 경고를 받게 됩니다.

② FID (First Input Delay) $\rightarrow$ INP (Interaction to Next Paint)로 진화

개념: 사용자가 버튼을 클릭하거나 링크를 눌렀을 때, 브라우저가 그 명령에 얼마나 빨리 반응하는지를 나타내는 지표입니다.
중요 업데이트: 기존의 FID는 최초의 클릭 반응만 측정한다는 한계가 있었습니다. 이를 보완하기 위해 구글은 사용자가 페이지에 머무는 전체 시간 동안의 모든 반응 속도를 측정하는 INP(Interaction to Next Paint)를 새로운 정식 지표로 대체 도입했습니다.
기준 점수 (INP 기준): 사용자의 액션 이후 200밀리초(0.2초) 이하로 다음 화면이 전환되어야 '좋음(Good)'입니다.

③ CLS (Cumulative Layout Shift) : 누적 레이아웃 이동

개념: 페이지가 로딩되는 동안 텍스트나 버튼 등 화면의 구성 요소가 위아래로 덜컹거리며 움직이는 현상을 수치화한 것입니다. 글을 읽으려고 마우스를 대려는데 갑자기 상단 광고가 늦게 뜨면서 화면이 아래로 밀려 원치 않는 광고를 클릭하게 되는 짜증 나는 경험, 다들 있으실 겁니다. 바로 그 현상을 잡아내는 지표입니다.
기준 점수: 레이아웃 이동 점수가 0.1 이하여야 안정적인 사이트로 인정받습니다.

2. 워드프레스 블로그를 위한 지표별 실전 개선 가이드

지표를 이해했다면 이제 내 블로그를 쾌적하게 고쳐야 할 때입니다. 비싼 개발자를 쓰지 않아도 워드프레스에서 플러그인과 몇 가지 습관만으로 점수를 극적으로 올릴 수 있는 방법입니다.

LCP(로딩 속도) 개선하기: 이미지 다이어트

LCP가 떨어지는 가장 큰 원인은 무겁고 큰 이미지 때문입니다.

차세대 이미지 포맷 사용: JPG나 PNG 대신 압축률이 뛰어난 WebP나 AVIF 포맷으로 이미지를 변환해서 업로드하세요. (무료 플러그인 Converter for Media 등 활용)
이미지 지연 로딩(Lazy Loading): 사용자의 화면 스크롤이 내려가기 전까지는 하단 이미지를 로드하지 않도록 설정합니다. (워드프레스 코어에 기본 내장되어 있으나, 최적화 플러그인을 쓰면 더 정교해집니다.)
CDN(콘텐츠 전송 네트워크) 사용: Cloudflare 같은 무료 CDN을 연동하여 전 세계 서버에서 사용자에게 가장 가까운 곳을 통해 블로그 데이터를 빠르게 쏴주도록 만드세요.

INP(반응 속도) 개선하기: 무거운 스크립트 정리

클릭했는데 먹통이 되는 이유는 브라우저가 무거운 자바스크립트(JS) 코드를 읽느라 바쁘기 때문입니다.

불필요한 플러그인 삭제: 쓰지 않으면서 활성화되어 있는 플러그인은 사이트를 무겁게 만듭니다. 과감히 정리하세요.
스크립트 최적화: WP Rocket이나 Autoptimize 같은 캐싱/최적화 플러그인을 사용하여 자바스크립트를 압축(Minify)하고, 비동기 로딩(Defer/Async) 설정을 켜두세요. 코드의 실행 순서를 뒤로 미뤄 반응 속도를 높여줍니다.

CLS(시각적 안정성) 개선하기: 자리 먼저 맡아두기

화면이 덜컹거리는 것은 브라우저가 이미지나 광고의 크기를 미리 알지 못해 임의로 배치했다가, 파일이 다 로드되면 그제야 공간을 넓히기 때문입니다.

이미지 크기(Width, Height) 명시: 이미지를 넣을 때 가로, 세로 크기를 고정 값으로 지정해 두면 브라우저가 그만큼의 자리를 비워두고 글을 먼저 배치하므로 화면이 밀리지 않습니다.
광고 슬롯 공간 고정: 구글 애드센스 자동 광고를 켜두면 CLS 점수가 망가지기 쉽습니다. 광고가 들어갈 자리에 미리 최소 높이(예: min-height: 250px)를 CSS로 지정해 두어 광고가 늦게 떠도 화면이 튀지 않게 만드세요.

내 블로그의 핵심 웹 지표 측정하는 방법

내 블로그가 현재 어떤 상태인지 궁금하다면 구글이 무료로 제공하는 아래 도구들을 활용해 보세요.

PageSpeed Insights (페이지스피드 인사이트): 구글의 대표적인 성능 측정 사이트입니다. URL만 입력하면 LCP, INP, CLS 점수를 빨강(나쁨), 노랑(개선 필요), 초록(좋음)으로 신호등처럼 보여주고 구체적인 해결 방법까지 한글로 알려줍니다.
구글 서치 콘솔 (Google Search Console): [체험] -> [핵심 웹 지표] 메뉴에 들어가면, 내 블로그 방문자들이 실제로 겪은 데이터를 기반으로 문제가 있는 URL들을 묶어서 리포트로 보여줍니다.

다정한 한 줄 요약
"이미지 용량을 줄여 LCP(속도)를 잡고, 무거운 플러그인을 비워내 INP(반응)를 올리며, 이미지와 광고의 자리를 미리 지정해 CLS(안정성)를 확보하세요. 구글 봇은 이 세 가지 숙제를 잘 끝낸 블로그를 '준비된 전문가'로 인정하고 상위 노출이라는 선물을 줄 것입니다."

온피드박스