WordPress Core Web Vitals 최적화: LCP, INP 및 CLS 개선 (2026)

Core Web Vitals란 무엇이며 왜 랭킹 요소인가?

Google의 Page Experience 업데이트 이후, Core Web Vitals는 직접적인 랭킹 요소가 되었습니다. Google은 이를 사용하여 실제 사용자에게 웹사이트가 얼마나 빠르고 안정적으로 로드되는지 평가합니다.

세 가지 지표 개요:

• LCP (Largest Contentful Paint): 가장 큰 가시 요소가 얼마나 빨리 로드되는가? 목표: 2.5초 이내.
• INP (Interaction to Next Paint): 페이지가 사용자 입력에 얼마나 빨리 반응하는가? 목표: 200ms 이내.
• CLS (Cumulative Layout Shift): 로딩 중 레이아웃이 얼마나 안정적인가? 목표: 0.1 이내.

HTTP Archive 데이터에 따르면, 모바일에서 세 가지 지표를 모두 통과하는 WordPress 웹사이트는 44%에 불과합니다. 이것은 경쟁사를 앞지를 수 있는 기회입니다.

진단: 현재 어디에 있는가?

최적화하기 전에 먼저 측정해야 합니다. 다음 도구로 현재 성능을 확인할 수 있습니다:

Google PageSpeed Insights는 랩 모드와 필드 데이터 모드(Chrome User Experience Report의 실제 사용자 데이터) 모두에서 URL을 분석합니다. 가장 중요한 페이지를 입력하세요 — 홈페이지, 카테고리 페이지, 제품 페이지.

Google Search Console → Core Web Vitals 보고서는 도메인에서 "나쁨" 또는 "개선 필요"로 평가된 모든 페이지를 보여줍니다. Google이 정확히 이 데이터를 랭킹에 사용하므로 가장 중요한 시작점입니다.

WebPageTest.org는 다양한 기기와 네트워크 속도로 테스트할 수 있습니다 — 모바일 사용자 경험을 현실적으로 시뮬레이션하는 데 이상적입니다.

LCP 개선: 가장 큰 요소를 더 빠르게 로드

대부분의 WordPress 사이트에서 LCP는 히어로 이미지, H1 헤드라인 또는 큰 비디오 썸네일에 의해 결정됩니다.

히어로 이미지 최적화:

• WebP 형식으로 이미지 제공 (JPEG/PNG보다 30-50% 작음)
• LCP 이미지에 fetchpriority="high" 표시:
• LCP 이미지의 지연 로딩 명시적 비활성화: loading="eager"

TTFB (Time to First Byte) 줄이기: 느린 서버는 모든 것을 지연시킵니다. 호스팅 제공업체를 확인하세요 — WordPress에는 서버 측 캐싱이 있는 제공업체를 권장합니다. 목표: TTFB 800ms 이내.

크리티컬 CSS 인라인화: CSS 파일은 렌더링을 차단합니다. WP Rocket이나 NitroPack 같은 도구는 자동으로 크리티컬 CSS를 추출하여 에 인라인으로 삽입하고, 나머지는 비동기로 로드합니다.

LCP 권장 플러그인:

• WP Rocket — 프리로딩, 크리티컬 CSS, TTFB 최적화를 갖춘 올인원 솔루션
• Imagify / ShortPixel — 자동 WebP 변환 및 압축
• Cloudflare (무료) — CDN이 전 세계적으로 TTFB를 크게 줄임

INP 개선: 페이지가 입력에 반응하게 만들기

INP는 2024년에 기존 FID 지표를 대체했으며, 모든 사용자 상호작용(클릭, 탭, 키보드 입력)의 응답 시간을 측정합니다.

JavaScript 비대화 줄이기: 불필요한 플러그인마다 JavaScript를 로드합니다. 필요 없는 플러그인을 비활성화하세요. Chrome DevTools의 Performance 탭에서 어떤 스크립트가 가장 오래 차단하는지 확인할 수 있습니다.

스크립트 온디맨드 로드: Perfmatters 같은 플러그인을 사용하면 특정 페이지에서만 또는 사용자 상호작용 후에만 스크립트를 로드할 수 있습니다 (defer, async).

렌더링 차단 리소스 제거: 에서 defer나 async 없는 스크립트는 렌더링을 완전히 차단합니다. 대부분의 최신 플러그인은 올바르게 로드되지만, 오래된 테마와 플러그인은 그렇지 않은 경우가 많습니다.

CLS 제거: 더 이상 레이아웃 이동 없이

로딩 중 페이지가 이동하여 잘못된 버튼을 클릭하게 만드는 것만큼 사용자를 좌절시키는 것은 없습니다.

항상 이미지 크기 포함: width와 height 속성이 없으면, 브라우저는 이미지가 로드되기 전에 얼마나 많은 공간이 필요한지 알 수 없습니다:

<img src="image.webp" width="800" height="450" alt="..." />

웹 폰트 안정화: 커스텀 폰트는 Flash of Invisible Text (FOIT) 또는 Flash of Unstyled Text (FOUT)를 유발합니다. 해결책: CSS 선언에서 font-display: swap 사용. 더 좋은 방법: Google Fonts에서 로드하는 대신 폰트를 로컬에서 호스팅.

광고 및 임베드 공간 예약: 광고, YouTube 임베드 또는 쿠키 배너가 로딩 후 페이지에 삽입되면 레이아웃이 이동합니다. CSS를 통해 이러한 요소에 항상 고정 높이를 예약하세요.

모니터링: 장기적으로 수치 추적하기

최적화는 일회성 작업이 아닙니다. 새로운 플러그인, 테마 업데이트마다 Core Web Vitals가 악화될 수 있습니다.

Google Search Console은 페이지가 "나쁨" 카테고리로 떨어지면 자동으로 알려줍니다.

AniSEO는 WordPress 사이트를 지속적으로 모니터링하고 랭킹 하락이 발생하기 전에 사전에 최적화를 제안합니다.

AniSEO로 Core Web Vitals 자동 모니터링 →

---

관련 기사:

• WordPress SEO 감사: 단계별 가이드 2026
• WordPress 온페이지 SEO: 완벽 가이드 2026
• WordPress의 Schema Markup: Rich Snippets 2026