웹사이트 속도 최적화 완전 가이드: Core Web Vitals 점수를 90점 이상으로 올리는 법

공식 참고 자료

• Google Search Central

다음 실행

• webp-converter
• 관련 가이드 더 보기

실행 기준 요약

발행 전 체크리스트

• Core Web Vitals를 적용할 페이지나 채널을 하나만 정합니다.
• 본문의 핵심 주장과 예시가 실제 실행 순서로 이어지는지 확인합니다.
• 관련 도구로 제목, 설명, 링크, CTA를 발행 전에 한 번 더 점검합니다.

핵심 개요

구글은 2021년 Core Web Vitals를 공식 랭킹 신호로 채택했습니다. LCP(최대 콘텐츠 렌더링 시간), INP(입력 반응성), CLS(레이아웃 이동)가 기준치를 넘지 못하면 검색 랭킹이 불리해집니다. 속도 최적화는 SEO뿐 아니라 전환율에도 직결됩니다. 페이지 로딩이 1초 지연될 때마다 전환율이 7% 감소한다는 연구 결과가 있습니다. 이 글에서 소개하는 전략과 팁들은 실제 운영 경험을 바탕으로 엄선했습니다. 단계별로 적용하면 가시적인 변화를 확인할 수 있습니다. 이 글에서 소개하는 방법들은 실제 운영 경험을 바탕으로 엄선한 실전 전략입니다. 실전에 바로 쓸 수 있는 글자수 세기과 WebP 변환기을 활용하면 이 가이드의 내용을 더욱 빠르게 적용할 수 있습니다.

Core Web Vitals 3가지 지표 이해하기

최적화 전에 각 지표가 무엇을 측정하는지 정확히 이해해야 합니다. LCP (Largest Contentful Paint) — 목표: 2.5초 이하 페이지에서 가장 큰 콘텐츠(주로 히어로 이미지나 큰 텍스트)가 화면에 렌더링되는 시간. 사용자가 "페이지가 로딩됐다"고 느끼는 시점과 가장 가깝습니다. 주요 원인: 느린 서버 응답, 최적화되지 않은 이미지, 렌더링 차단 리소스, 클라이언트 사이드 렌더링 INP (Interaction to Next Paint) — 목표: 200ms 이하 사용자가 클릭, 탭, 키보드 입력 등 상호작용 후 화면이 반응하는 시간. 2024년부터 FID를 대체한 지표. 주요 원인: 긴 JavaScript 실행, 메인 스레드 블로킹, 복잡한 DOM CLS (Cumulative Layout Shift) — 목표: 0.1 이하 페이지 로딩 중 요소가 예기치 않게 이동하는 정도. 광고가 갑자기 나타나거나 이미지가 늦게 로딩되면서 텍스트가 밀리는 현상. 주요 원인: 이미지/동영상에 크기 속성 미지정, 늦게 로딩되는 광고, 웹폰트 로딩 시 텍스트 이동 측정 도구: PageSpeed Insights: 빠른 진단 Chrome DevTools Performance 탭: 상세 분석 Search Console Core Web Vitals 보고서: 실제 사용자 데이터

이미지 최적화: LCP 점수를 가장 빠르게 올리는 방법

대부분의 사이트에서 LCP 저하의 주원인은 이미지입니다. 이미지 최적화만으로도 점수를 20~30점 이상 올릴 수 있습니다. WebP 형식으로 전환: 동일 품질 기준 JPG 대비 WebP는 25~35% 용량이 작습니다. 크레피카의 WebP 변환기를 사용하면 이미지를 일괄 변환할 수 있습니다. 화질 80~85% 설정이 파일 크기와 품질의 최적 균형입니다. 반응형 이미지 적용: srcset과 sizes 속성을 사용해 디바이스 화면 크기에 맞는 이미지를 제공합니다. 모바일 사용자에게 데스크톱용 2000px 이미지를 보낼 필요가 없습니다. 이미지 크기 속성 지정: img 태그에 width와 height를 반드시 지정하세요. 미지정 시 이미지 로딩 후 레이아웃이 재조정되어 CLS 점수가 나빠집니다. LCP 이미지 우선 로딩: 히어로 이미지에는 loading="eager"와 fetchpriority="high" 속성을 추가하고, link rel="preload" 태그를 head에 추가합니다. 나머지 이미지는 loading="lazy"로 지연 로딩합니다. CDN 활용: 이미지를 CDN에 올리면 사용자 위치에 가까운 서버에서 제공되어 전송 속도가 빨라집니다. Cloudflare Images, AWS CloudFront 등이 대표적입니다.

JavaScript와 CSS 최적화: INP 점수 개선

JavaScript 과부하는 INP 점수 저하의 주범입니다. 효율적인 스크립트 관리 방법을 소개합니다. Code Splitting (코드 분할): 모든 JavaScript를 하나의 큰 파일로 번들링하면 초기 로딩이 느립니다. Webpack이나 Vite의 Dynamic Import를 사용해 필요한 시점에 필요한 코드만 로딩하도록 분할합니다. Thirdparty Script 지연 로딩: 구글 애널리틱스, 챗봇, 광고 스크립트 등 서드파티 스크립트는 async 또는 defer 속성을 추가해 메인 스레드를 차단하지 않도록 합니다. 필요 없는 서드파티 스크립트는 과감히 제거하세요. CSS 최적화: 사용하지 않는 CSS 제거: PurgeCSS 같은 도구 활용 Critical CSS 인라인 삽입: 첫 화면 렌더링에 필요한 CSS를 인라인으로 넣어 FOUT(스타일 없는 텍스트 노출) 방지 CSS 애니메이션은 transform과 opacity만 사용: 이 두 속성만 GPU 가속을 활용해 레이아웃 재계산이 없음 Web Worker 활용: 복잡한 계산이 필요한 작업(데이터 처리, 암호화 등)을 Web Worker로 분리해 메인 스레드 블로킹을 줄입니다.

폰트, 캐싱, 서버 응답 최적화

속도 최적화의 마무리 단계입니다. 작은 개선이 모이면 큰 차이를 만듭니다. 웹폰트 최적화: 웹폰트 로딩 중 텍스트가 사라지거나(FOIT) 다른 폰트로 보였다가 바뀌는(FOUT) 현상이 CLS를 악화시킵니다. 해결 방법: fontdisplay: swap 설정 (텍스트를 시스템 폰트로 먼저 표시, 이후 교체) preconnect 추가: 폰트 서버(fonts.googleapis.com)와 미리 연결 Variable Font 사용: 여러 굵기를 하나의 파일로 제공해 총 폰트 파일 수 감소 브라우저 캐싱: 정적 리소스(이미지, CSS, JS)에 CacheControl 헤더를 설정해 재방문 시 빠른 로딩을 보장합니다. 변경이 없는 리소스는 maxage=31536000(1년) 설정을 권장합니다. 서버 응답 시간(TTFB) 개선: 서버 응답 시간이 600ms 이상이면 LCP가 아무리 최적화해도 한계가 있습니다. 호스팅 업그레이드 (공유 호스팅 → VPS/클라우드) Vercel, Netlify 같은 엣지 네트워크 CDN 플랫폼 사용 서버 사이드 캐싱 적용 (Redis, Varnish) 크레피카는 Vercel을 사용해 엣지 CDN의 혜택을 받고 있습니다. 이런 플랫폼은 설정 없이도 기본적인 캐싱과 CDN 배포가 자동으로 적용됩니다.

마무리

Core Web Vitals 최적화는 한 번에 끝나는 작업이 아닙니다. 새 기능 추가나 서드파티 스크립트 삽입마다 점수가 영향을 받으므로, 정기적인 PageSpeed Insights 검사를 습관화하세요. 이미지 WebP 전환부터 시작해 JS 분할, 캐싱 설정 순서로 우선순위를 두면 투자 대비 가장 빠른 점수 향상을 기대할 수 있습니다. 처음에는 작게 시작해도 괜찮습니다. 실제로 적용하고 결과를 측정하는 과정에서 더 빠른 성장이 일어납니다.

자주 묻는 질문

PageSpeed Insights 점수가 모바일과 데스크톱에서 크게 차이나는 이유는?

모바일 시뮬레이션은 느린 네트워크(4G)와 중급 사양 기기를 기준으로 하기 때문에 데스크톱보다 훨씬 낮게 나옵니다. 모바일 점수 60점이면 실제 사용자 경험은 나쁘지 않을 수 있습니다. 핵심은 점수보다 실제 필드 데이터(CrUX)입니다.

CLS 점수를 올리는 가장 쉬운 방법은?

모든 이미지와 동영상에 width와 height 속성을 지정하는 것이 가장 빠른 방법입니다. 또한 광고, 임베드 콘텐츠에 고정 크기의 컨테이너를 지정하면 로딩 중 레이아웃 이동을 막을 수 있습니다.

Lighthouse 점수와 실제 사용자 경험은 얼마나 일치하나요?

Lighthouse는 시뮬레이션 환경이고, Search Console의 CrUX 데이터는 실제 사용자 경험입니다. 둘 사이에 차이가 있을 수 있습니다. SEO 랭킹에는 Lighthouse보다 CrUX 기반의 실제 데이터가 사용됩니다.

속도 최적화 후 순위에 반영되는 데 얼마나 걸리나요?

구글이 개선된 Core Web Vitals를 인지하고 랭킹에 반영하는 데 수 주에서 수 개월이 소요됩니다. 또한 속도는 랭킹 신호 중 하나일 뿐이므로 다른 SEO 요소도 함께 강화해야 효과가 나타납니다.

Vite로 빌드한 SPA에서 LCP를 최적화하는 방법은?

SPA는 초기 HTML이 비어있어 LCP가 낮게 나올 수 있습니다. 히어로 이미지에 preload 추가, 서버 사이드 렌더링(SSR) 또는 정적 생성(SSG) 도입, 중요 콘텐츠의 초기 HTML 포함(SSR/prerender) 등이 효과적입니다.

다음 단계

상단의 관련 크레피카 도구를 활용해 초안을 점검한 뒤, 이 가이드로 돌아와 최종 발행 전 구조와 표현을 다시 확인하세요.

사이트 검토 정보

크레피카는 크리에이터와 마케터를 위한 무료 유틸리티 사이트입니다. 실무 도구, 편집 가이드, 문의 정보, 개인정보처리방침, 이용약관, RSS, robots.txt, ads.txt, 사이트맵을 제공해 사용자와 검색엔진이 자바스크립트 렌더링에만 의존하지 않고 사이트 구조를 이해할 수 있게 합니다.

광고는 Google AdSense 자동 광고로 노출될 수 있습니다. 이 정적 크롤러 페이지에는 수동 광고 슬롯을 삽입하지 않으며, 광고는 도구 결과나 편집 추천 내용에 영향을 주지 않습니다.

정책 페이지: 개인정보처리방침, 이용약관, 크레피카 소개, 문의하기.