Core Web Vitals 모바일 점수는 이제 Google.com.vn(구글 베트남) 검색 순위를 직접 결정하는 공식 신호입니다. 문제는 베트남 현지 모바일 환경이 한국보다 훨씬 까다롭다는 점입니다. 호치민 시내에서도 4G 신호가 불안정한 구역이 많고, 베트남 소비자의 90% 이상이 스마트폰으로 첫 검색을 합니다. 한국에서 잘 나오던 사이트가 베트남 PageSpeed Insights에서 40점대를 받는 이유가 바로 여기에 있습니다. 이 글에서는 Core Web Vitals 모바일 세 지표(LCP·CLS·INP)를 베트남 환경에 맞게 최적화하는 6단계 실전 루틴을 정리합니다.
이 글 3줄 요약
1. Core Web Vitals 모바일 점수는 Google.com.vn 순위 직결 요소이며, 베트남 3G/4G 환경에서 한국보다 훨씬 빠르게 점수가 깎입니다.
2. LCP 2.5초 이하, CLS 0.1 이하, INP 200ms 이하를 목표로 이미지·폰트·레이아웃을 단계별로 수정해야 합니다.
3. WPdesign.vn이 실제 프로젝트에서 적용한 개선 루틴을 따라가면 PageSpeed Insights 모바일 점수 70점 이상을 안정적으로 달성할 수 있습니다.
1. Core Web Vitals 모바일 — 세 지표 한 줄 정리
Core Web Vitals 모바일 최적화를 시작하기 전에 세 지표가 각각 무엇을 측정하는지 명확히 알아야 합니다.
| 지표 | 풀네임 | 목표값 | 측정 대상 |
|---|---|---|---|
| LCP | Largest Contentful Paint | 2.5초 이하 | 화면 내 가장 큰 이미지·텍스트 블록 로딩 시간 |
| CLS | Cumulative Layout Shift | 0.1 이하 | 페이지 로드 중 레이아웃이 얼마나 튀는지 |
| INP | Interaction to Next Paint | 200ms 이하 | 버튼·메뉴 탭 후 화면 반응 속도 |
2024년 3월부터 FID(First Input Delay)가 INP로 교체됐습니다. 아직 FID를 기준으로 최적화하고 있다면 지금 당장 Google Search Console(구글 서치 콘솔)의 Core Web Vitals 보고서를 열고 INP 항목을 확인하세요. 베트남 사이트의 경우 INP 문제가 가장 빈번하게 발견됩니다.
공식 기준: Google Search Central — Core Web Vitals
2. 베트남 환경이 점수를 깎는 이유
PageSpeed Insights는 사용자 실제 환경(CrUX 데이터)을 기반으로 점수를 산출합니다. 베트남 사용자 데이터가 충분히 쌓인 사이트는 베트남 현지 네트워크 조건이 그대로 반영됩니다.
베트남 특유의 점수 저하 원인 세 가지:
- 서버 위치 미스매치: 한국 서버를 쓰면 베트남 사용자 기준 TTFB(Time to First Byte)가 평균 800ms 이상 추가됩니다. 호치민 현지 서버(싱가포르 CDN 포함) 대비 LCP가 1.2초 이상 벌어지는 경우도 흔합니다.
- 한국산 이미지 원본 업로드: 한국에서 제작한 고해상도 배너(보통 2MB 이상)를 그대로 올리면 4G 환경에서 LCP가 5초를 넘깁니다.
- Google Fonts 직접 호출: 베트남에서 Google API 서버 응답이 느린 구간이 존재해 폰트 로딩이 렌더링 블로킹을 일으킵니다.
wpdesign.vn이 2024년 진행한 한국 식품 브랜드 베트남 쇼핑몰 프로젝트에서 서버를 싱가포르 CDN으로 이전하고 이미지 포맷을 WebP로 전환한 것만으로 LCP가 6.2초 → 2.1초로 단축됐습니다.
3. 1단계·2단계 — LCP 2.5초 이하로 잡기
1단계 — 히어로 이미지 WebP 변환 + fetchpriority="high" 추가
LCP 요소는 대부분 히어로 배너 이미지입니다. 워드프레스에서 플러그인 없이 처리하려면:
– functions.php에 WebP 지원 필터 추가 또는 Imagify / ShortPixel 플러그인으로 자동 변환
– 히어로 이미지 <img> 태그에 fetchpriority="high" 속성 추가 (WordPress 6.3 이상에서 wp_get_attachment_image() 파라미터로 전달 가능)
– lazy loading을 히어로 이미지에 절대 적용하지 말 것 — loading="lazy"가 히어로에 붙으면 LCP 2~3초 추가
2단계 — 렌더 블로킹 리소스 제거
Google Fonts를 직접 호출하는 대신 폰트 파일을 서버에 self-host하거나, font-display: swap을 CSS에 추가합니다. 또한 불필요한 플러그인의 CSS·JS가 모든 페이지에 로딩되고 있는지 Asset CleanUp 플러그인으로 점검하세요. 베트남 사이트 평균 렌더 블로킹 리소스는 6~10개 수준이며, 이를 2개 이하로 줄이면 LCP가 0.5~1초 단축됩니다.
4. 3단계·4단계 — CLS 0.1 이하로 레이아웃 안정화
3단계 — 이미지·임베드에 width·height 또는 aspect-ratio 명시
CLS의 1위 원인은 크기가 지정되지 않은 이미지입니다. 이미지가 로드되기 전까지 브라우저가 공간을 확보하지 못해 텍스트가 밀립니다.