Core Web Vitals 최적화: 페이지 속도 SEO를 위한 단계별 가이드

요약

Core Web Vitals는 검색 순위에 직접적인 영향을 미치는 Google의 사용자 경험 지표입니다. 많은 사이트 소유자가 낮은 LCP, INP, CLS 점수로 인해 SEO에 어려움을 겪고 있습니다. 이 글은 이미지 압축부터 코드 분할까지 각 지표를 최적화하기 위한 구체적이고 단계별 계획을 제공합니다. 현재 성능을 측정하고, 수정 사항의 우선순위를 정하며, 과도한 최적화와 같은 일반적인 실수를 피하는 방법을 배우게 됩니다. 실제 사례를 통해 개선 전후의 변화를 확인할 수 있습니다. 이 단계를 따라 Core Web Vitals를 높이고 검색 결과에서 상위에 오르세요.

Core Web Vitals 문제

Google의 Core Web Vitals는 직접적인 순위 요소가 되었으며, 느리거나 버벅거리는 웹사이트는 검색 결과에 묻히게 됩니다. 그러나 많은 사이트 소유자는 낮은 점수는 확인했지만 체계적으로 수정하는 방법을 모르는 상태에 갇혀 있습니다. 이 가이드는 Largest Contentful Paint(LCP), Interaction to Next Paint(INP), Cumulative Layout Shift(CLS)를 최적화하기 위한 반복 가능한 프로세스를 안내합니다. 마지막에는 사이트 성능과 SEO를 개선하기 위한 명확한 실행 계획을 갖게 됩니다.

세 가지 지표 이해하기

수정에 들어가기 전에 각 지표가 측정하는 내용과 그 중요성을 이해하는 것이 중요합니다.

• LCP(Largest Contentful Paint) – 로딩 성능을 측정합니다. 이상적으로 2.5초 미만. 페이지의 주요 콘텐츠가 표시되는 시간을 나타냅니다.
• INP(Interaction to Next Paint) – 응답성을 측정합니다. 이상적으로 200밀리초 미만. 사용자 상호작용(클릭, 탭)과 시각적 응답 사이의 지연을 측정합니다.
• CLS(Cumulative Layout Shift) – 시각적 안정성을 측정합니다. 이상적으로 0.1 미만. 표시되는 콘텐츠가 예기치 않게 얼마나 이동하는지 수치화합니다.

Google은 이를 순위 신호로 사용하지만, 사용자 참여에도 직접적인 영향을 미칩니다. 빠르게 로드되고, 즉시 반응하며, 콘텐츠가 흔들리지 않는 사이트는 방문자를 만족시키고 전환율을 높입니다.

최적화 전에 측정하세요

측정하지 않으면 수정할 수 없습니다. 여러 소스에서 기준 데이터를 수집하는 것으로 시작하세요.

1. PageSpeed Insights – 모든 URL에 대한 실험실 및 필드 데이터를 제공합니다. 가장 중요한 페이지에서 실행하세요.
2. Chrome User Experience Report(CrUX) – PageSpeed Insights 또는 BigQuery를 통해 집계된 실제 사용자 데이터입니다.
3. Chrome DevTools의 Lighthouse – 실행 가능한 권장 사항과 점수를 제공합니다.
4. Web Vitals 확장 프로그램 – 자신의 사이트를 탐색하면서 실시간 지표를 확인할 수 있습니다.

실험실 데이터만이 아닌 필드 데이터(실제 사용자)에 집중하세요. 목표는 실제 사용자 경험을 개선하는 것입니다. 지표 값을 기록하고 페이지 중 가장 나쁜 항목을 식별하세요.

1단계: LCP 최적화 – 히어로 이미지 및 서버 TTFB

가장 흔한 LCP 요소는 히어로 이미지나 큰 텍스트 블록입니다. LCP를 줄이는 방법은 다음과 같습니다.

a. 이미지 압축 및 최신 형식 사용

• WebP 또는 AVIF와 같은 최신 형식을 사용하세요. JPEG/PNG보다 25-50% 더 작은 파일 크기를 제공합니다.
• 이미지를 최대 표시 크기로 조정하세요. 1200px 컨테이너에서 4000px 이미지를 제공하지 마세요.
• 자동 이미지 최적화가 가능한 CDN(예: Cloudflare, Imgix)을 사용하여 올바른 크기의 버전을 제공하세요.

예시: 히어로 이미지가 500KB JPEG에서 50KB WebP로 변경되어 품질 손실 없이 LCP가 4.2초에서 2.1초로 감소했습니다.

b. 서버 응답 시간(TTFB) 개선

• 좋은 캐싱을 제공하는 빠른 호스팅 제공업체(예: Vercel, Netlify, 또는 CDN 기반 호스트)를 사용하세요.
• 동적 페이지에 서버 측 캐싱을 구현하세요.
• 서버 처리를 최소화하기 위해 가벼운 CMS 또는 정적 사이트 생성기를 고려하세요.

c. 중요 리소스 우선 로드

• 히어로 이미지를 조기에 가져오기 위해 <link rel="preload">를 사용하세요.
• 렌더링 차단을 방지하기 위해 최상단 콘텐츠에 중요한 CSS를 인라인으로 포함하세요.

2단계: INP 최적화 – 무거운 JavaScript 제어

INP는 주로 메인 스레드를 차단하는 긴 JavaScript 작업으로 인해 악화됩니다. 개선하려면:

a. 코드 분할 및 지연 로딩

• JavaScript 번들을 분할하여 초기에 필요한 코드만 로드하세요. 경로/컴포넌트에 대해 import()를 사용하세요.
• 중요하지 않은 스크립트는 defer 또는 async로 지연 로드하세요.

b. 긴 작업 분할

• requestIdleCallback() 또는 setTimeout()을 사용하여 작업을 더 작은 조각으로 나누세요.
• 가능하면 비용이 많이 드는 계산을 Web Worker로 이동하세요.

c. 이벤트 핸들러 최적화

• 스크롤 및 리사이즈 핸들러를 디바운스 또는 스로틀하세요.
• 복잡한 인라인 이벤트 리스너를 피하세요. 적절한 경우 이벤트 위임을 사용하세요.

예시: 무거운 분석 스크립트가 일찍 로드되어 INP가 350ms로 증가한 사이트가 있었습니다. 스크립트를 requestIdleCallback을 사용해 로드 후로 이동하여 INP를 180ms로 개선했습니다.

3단계: CLS 최적화 – 레이아웃 이동 방지

CLS는 일반적으로 누락된 크기나 늦게 로드되는 콘텐츠로 인해 발생하므로 수정하기 가장 쉬운 경우가 많습니다.

a. 명시적 크기 설정

• 이미지와 비디오에는 항상 width 및 height 속성을 추가하세요. 최신 CSS는 aspect-ratio로 반응형 크기를 처리할 수 있습니다.
• 동적 광고의 경우 고정 높이 컨테이너를 예약하거나(또는 일반적인 광고 변동을 고려한 플레이스홀더 사용)하세요.

b. 웹 폰트 제어

• font-display: swap을 사용하여 사용자 정의 폰트가 로드되는 동안 텍스트가 대체 폰트로 즉시 렌더링되도록 하세요.
• 중요하지 않은 폰트의 경우 font-display: optional을 선호하세요.

c. 기존 콘텐츠 위에 동적 삽입 방지

• 서드파티 임베드(광고, 위젯)는 주변 레이아웃이 안정된 후에만 삽입하거나, 미리 공간을 확보하세요.

예시: 히어로 이미지에 명시적인 width와 height를 추가하고(잘못 계산된 인라인 크기 제거) CLS가 0.32에서 0.05로 크게 개선되었습니다.

수정 사항 우선순위 정하기

모든 수정 사항이 노력 대비 효과가 동일하지는 않습니다. 다음 우선순위 목록을 사용하세요.

1. CLS 우선 – 수정이 가장 쉽고 빠른 경우가 많습니다. 크기 하나만 변경해도 0.1 미만으로 낮출 수 있습니다.
2. LCP 다음 – 이미지 압축과 캐싱으로 빠른 성과를 얻을 수 있습니다.
3. INP 마지막 – 일반적으로 코드 분할과 같은 아키텍처 변경이 필요합니다.

각 수정 후 PageSpeed Insights를 실행하여 진행 상황을 측정하세요. LCP가 개선되었지만 INP가 악화되었다면 변경 사항으로 인해 JavaScript가 증가했을 수 있습니다. 항상 모바일에서 테스트하세요. 모바일에서 사용자가 성능 저하를 가장 많이 느낍니다.

피해야 할 일반적인 함정

• 과도한 최적화: 모든 애니메이션을 제거하거나 불필요하게 프레임워크를 버리지 마세요. 완벽함보다는 좋은 수준을 목표로 하세요.
• 모바일 경험 무시: 가장 작은 화면을 먼저 최적화하세요.
• 서드파티 스크립트 간과: 느린 광고 서버는 지표를 망칠 수 있습니다. 지연 로딩과 비동기 로딩을 사용하세요.
• 실험실 데이터만 확인: Google은 필드 데이터(CrUX)를 사용합니다. 필드 데이터가 나쁘면 실험실 데이터가 실제 상황을 반영하지 않을 수 있습니다.

결론

Core Web Vitals 최적화는 일회성 작업이 아니라 지속적인 개선 주기입니다. 측정, CLS 해결, LCP 자산 압축, 코드 분할로 INP 제어 등 설명된 단계를 따르면 체계적으로 점수와 SEO를 개선할 수 있습니다. 지금 바로 한 개의 주요 페이지를 감사하고 세 가지 쉬운 성과(이미지 크기 설정, 히어로 이미지 압축, 중요하지 않은 JavaScript 지연 로드)를 적용하세요. 사용자와 검색 순위 모두 감사할 것입니다.

성능 기준선을 확보한 후에는 처음부터 성능이 내장된 새 페이지를 구축하는 것도 고려할 수 있습니다. Pagenza와 같은 도구를 사용하면 일반 텍스트 설명만으로 완전한 랜딩 페이지를 만들 수 있으며, 수동 최적화 없이 깔끔하고 빠른 HTML을 생성합니다. 이렇게 하면 다음 페이지가 처음부터 Core Web Vitals 임계값을 충족하도록 할 수 있습니다.