minstudio

핵심 웹 지표 (Core Web Vitals): SEO 랭킹의 핵심

과거에는 검색 키워드만 많이 적어두면 1페이지에 떴지만, 이제 구글은 "사용자가 이 사이트를 얼마나 쾌적하게 썼는가(UX)"를 측정하여 검색 순위에 엄청난 영향을 줍니다. 이 3대 측정 지표를 Core Web Vitals(핵심 웹 지표)라고 합니다.

📊 구글 최적화 대시보드 (목표: 올 그린)

LCP 최대 콘텐츠 렌더링 < 2.5초 INP 다음 페인트에 대한 상호작용 < 200ms CLS 누적 레이아웃 이동 < 0.1
  • 1. LCP (Largest Contentful Paint)

    가장 큰 이미지나 텍스트 블록이 화면에 렌더링되는 시간입니다. 해결책: 메인 배너 이미지에 fetchpriority="high"를 적용하고, 압축률이 높은 .webp 포맷을 사용하세요.

  • 2. INP (Interaction to Next Paint)

    버튼 클릭이나 키보드 입력 후 화면이 반응하기까지의 지연 시간입니다. (과거 FID를 대체함). 해결책: 무거운 JS 연산을 Web Worker로 넘기거나, setTimeout 등으로 메인 스레드 블로킹을 방지하세요.

  • 3. CLS (Cumulative Layout Shift)

    뒤늦게 로딩된 이미지나 폰트 때문에 화면이 덜컹거리는 시각적 불안정성입니다. 해결책: 이미지와 광고 영역에 미리 width, height, aspect-ratio를 설정하여 레이아웃 공간을 확보하세요.

<!-- 이미지 최적화를 통한 LCP 개선 예시 -->
<!-- LCP(가장 큰 이미지)는 빨리 로딩되도록 fetchpriority="high" 부여 -->
<img src="hero-banner.webp" fetchpriority="high" alt="메인 배너">

<!-- 화면 아래에 숨겨진 이미지는 지연 로딩(lazy) 처리하여 초기 로딩 속도 확보 -->
<img src="footer-logo.png" loading="lazy" alt="로고">

<!-- CLS(레이아웃 밀림 현상) 방지를 위해 이미지의 가로세로 비율 미리 확보 -->
<img src="ad.png" width="300" height="250" style="aspect-ratio: 300/250;" alt="광고 이미지">
핵심 웹 지표 (Core Web Vitals): SEO 랭킹의 핵심 | Minstudio