Core Web Vitals 해결 방법

LCP, INP, CLS — 세 가지 지표가 말하는 건 하나입니다: 실제 휴대폰에서 내 페이지를 기다림 없이, 튀지 않게 볼 수 있는가? WordPress도 어느 정도는 다듬을 수 있습니다. 하지만 CDN 위의 정적 HTML이 이 지표들을 통과하고, 그 상태를 유지하는 가장 확실한 방법입니다.

Quick answer

LCP는 TTFB를 줄이고 히어로 이미지를 최적화하면 해결됩니다. INP는 메인 스레드 JS(page builder, 클릭 시 로드되는 GTM, 채팅)를 제거해야 개선됩니다. CLS는 이미지에 크기를 지정하고, 나중에 콘텐츠를 끼워 넣지 않으면 줄일 수 있습니다. page builder를 쓰는 WordPress라면, 다음 주에 깨질 수도 있는 플러그인 조합에 기대기보다 Cloudflare 위의 정적 Hugo로 옮기는 것이 Core Web Vitals를 안정적으로 통과하는 방법입니다.

당신의 LCP / INP / CLS 문제를 확인하세요

WordPressEscape의 무료 60초 진단은 실제 PageSpeed, Core Web Vitals, SEO 격차, 페이지 수를 보여줍니다. 그다음에는 WordPress를 삭제하고 모든 URL을 그대로 유지한 채 Cloudflare의 엣지에 호스팅하는, 맡기기만 하면 되는 Hugo 마이그레이션으로 이어집니다.

내 사이트를 무료로 스캔 →

LCP — 페이지가 너무 늦게 보여집니다

Largest Contentful Paint는 보통 히어로 이미지와 느린 첫 바이트가 함께 만들어냅니다. WordPress의 TTFB가 사실상 세금처럼 붙습니다. HTML을 엣지에서 서빙하고, LCP 이미지에 width, height, fetchpriority를 지정하세요. LCP의 대부분은 이것으로 해결됩니다.

INP — 탭 반응이 둔합니다

Interaction to Next Paint는 결국 JS 문제입니다. Elementor, GTM, 채팅, 슬라이더가 대표적입니다. 지연 로드용 JS 플러그인은 땜질의 연속일 뿐입니다. 작은 런타임만 필요한 정적 페이지(forms, search)는 jQuery 400KB가 필요하지 않습니다.

CLS — 페이지가 흔들립니다

크기가 지정되지 않은 이미지, 웹폰트, 광고, Cloudflare 이메일 난독화가 원인입니다. 치수는 반드시 지정하세요. 페인트 이후에 헤더를 끼워 넣지 마세요. 이건 우리도 자사 사이트에서 직접 배운 교훈입니다 — 난독화는 CLS를 망치는 주범입니다.

이 항목은 진단에서 점수화합니다

무료 스캔은 렌더링을 막는 리소스, srcset 누락, 레이아웃 문제를 표시합니다. 그다음 마이그레이션이 핵심 지표 통과를 기본값으로 만듭니다.

당신의 LCP / INP / CLS 문제를 확인하세요

내 사이트를 무료로 스캔 →

자주 묻는 질문

Core Web Vitals란 무엇인가요?

Google이 측정하는 로드(LCP), 상호작용성(INP), 시각적 안정성(CLS) 지표입니다. 검색 순위와 사용자가 페이지를 체감하는 방식에 영향을 줍니다.

WordPress에서도 Core Web Vitals를 통과할 수 있나요?

가능한 경우도 있습니다. 테마가 단순하고 플러그인이 거의 없을 때입니다. 하지만 플러그인이 많거나 page builder 기반인 사이트는 대부분 ‘good’ 범위를 오래 유지하기 어렵습니다. 정적 제공 방식이 가장 안정적인 해결책입니다.

WordPressEscape가 Core Web Vitals를 해결해 주나요?

네 — 또 하나의 캐시 플러그인을 설치하는 방식이 아니라, Cloudflare 위의 정적 HTML로 마이그레이션해서 해결합니다. URL은 그대로 유지되므로 순위가 초기화되지 않습니다.

how to fix core web vitalsfix lcpfix clsimprove inp