리옹 Core Web Vitals 최적화 — Google 점수를 모두 양호로, 더 높은 검색 순위로

Core Web Vitals란 무엇이며, Google은 왜 중요하게 여길까요?

2021년부터 Google 순위 요소로 반영

2021년 6월부터 Google은 Core Web Vitals를 순위 알고리즘에 반영하고 있습니다. 빠르고 안정적인 사이트는 느린 경쟁 사이트보다 검색 결과에서 우대받습니다. 이 업데이트로 SEO에서 기술적 성능의 중요성이 한층 커졌습니다. Core Web Vitals 최적화에 투자하는 리옹의 중소기업은 지역 검색 결과에서 측정 가능한 경쟁 우위를 얻으며, 이러한 성능은 Google Business Profile에서의 노출에도 직접적인 영향을 미칩니다.

LCP — Largest Contentful Paint(최대 콘텐츠 렌더링)

LCP는 페이지에서 가장 큰 가시 요소(히어로 이미지, 메인 제목, 텍스트 블록)가 표시되기까지 걸리는 시간을 측정합니다. Google은 LCP가 2.5초 미만이면 양호, 2.5~4초면 개선 필요, 4초를 넘으면 불량으로 평가합니다. LCP가 나쁜 주요 원인은 최적화되지 않은 이미지, 느린 서버(높은 TTFB), 렌더링을 차단하는 CSS와 JavaScript, 무거운 웹 폰트입니다.

INP — Interaction to Next Paint(다음 페인트까지의 상호작용)

INP는 2024년 3월 FID(First Input Delay)를 대체해 공식 지표가 되었습니다. 방문 중 발생하는 모든 사용자 상호작용(클릭, 키 입력, 탭)의 지연 시간을 측정하고, 그중 가장 나쁜 값을 기준으로 삼습니다. Google의 양호 기준은 200ms 미만입니다. INP가 높은 원인은 대개 브라우저의 메인 스레드를 차단하는 무거운 JavaScript 스크립트입니다.

CLS — Cumulative Layout Shift(누적 레이아웃 이동)

CLS는 페이지의 시각적 안정성, 즉 초기 로딩 후 요소가 움직이면서 생기는 예기치 않은 이동을 측정합니다. Google의 기준은 0.1 미만입니다. 흔한 원인은 크기가 명시되지 않은 이미지, 리플로우를 일으키는 웹 폰트, 동적으로 로딩되는 광고, 크기가 지정되지 않은 iframe입니다. CLS가 나쁘면 사용자가 불편을 느끼고 사이트를 떠날 수 있습니다.

Core Web Vitals를 개선하는 방법

이미지 최적화(WebP, 지연 로딩, 크기 지정)

모든 이미지를 WebP(또는 AVIF) 형식으로 변환해 스마트하게 압축하고, CLS를 방지하기 위해 width와 height 속성을 추가하며, 첫 화면 아래의 이미지에는 네이티브 지연 로딩을 적용합니다. 결과적으로 LCP는 평균 절반으로 줄고 CLS는 0이 됩니다.

CSS, JS, HTML 압축(minify)

1킬로바이트도 중요합니다. CSS, JavaScript, HTML을 압축해 전송되는 파일 크기를 줄입니다. tree-shaking으로 사용하지 않는 코드를 제거하고, code-splitting으로 번들을 필요할 때 로딩되는 조각으로 나눕니다.

서드파티 스크립트 지연 로딩

서드파티 스크립트(분석 도구, 채팅, 광고, 소셜 미디어)는 INP 저하의 주범인 경우가 많습니다. 이러한 스크립트를 비동기 또는 지연 방식으로 로딩해 페이지의 초기 렌더링에 영향을 주지 않도록 합니다.

핵심 리소스 사전 로딩

preload, prefetch, preconnect 지시어를 활용해 브라우저가 폰트, 히어로 이미지, 핵심 스타일시트 등 필수 리소스를 미리 로딩하도록 합니다.

고급 캐싱과 CDN

리소스 유형별로 최적의 기간을 적용해 브라우저 캐시를 설정하고, 글로벌 CDN에 배포해 방문자와 가장 가까운 거점에서 페이지를 제공합니다. 지속적인 성능 유지를 위해 유지보수 서비스를 함께 이용해 보세요.

렌더링을 차단하는 JavaScript 제거

페이지 렌더링을 차단하는 JavaScript를 찾아 제거하거나 로딩을 뒤로 미룹니다. 핵심 CSS는 HTML에 인라인으로 삽입하고, 나머지는 비동기로 로딩합니다.

숫자로 보는 성과

목표: PageSpeed 90점 이상, 측정 결과 공개

저희의 우수 제작 사례는 PageSpeed 성능 점수 95/100을 넘습니다. Damien Mugnier 97점, Compagnie l'Entr'Axes 98점, Le Galant 96점입니다. 하지만 모든 사례가 그런 것은 아닙니다. 측정한 프로젝트의 평균은 84/100이며, 이보다 낮은 점수는 모두 원인과 개선 계획과 함께 프로젝트 페이지에 공개합니다. 바로 그것이 이 서비스가 해결하는 과제입니다. 이러한 점수를 장기적으로 유지하기 위해 유지보수 서비스를 통한 정기적인 관리로 최적의 성능을 지속적으로 보장합니다.

LCP: Google 기준은 2.5초, 저희는 그보다 훨씬 낮은 값을 목표로 합니다

저희는 “평균 LCP”를 공개하지 않습니다. LCP는 방문자의 네트워크와 기기에 따라 달라지므로 단일 수치는 의미가 없기 때문입니다. 저희가 공개하는 것은 각 프로젝트의 Lighthouse 성능 점수이며, 개선의 여지가 있는 경우까지 포함해 각 사례 연구 페이지에 게재합니다.

CLS: 화면 이동 제로를 설계 원칙으로

CLS가 0이라는 것은 페이지 로딩 중 화면 이동이 전혀 없다는 뜻입니다. 모든 이미지에 크기 명시, 흔들림 없는 폰트 로딩, 요소 높이 사전 확보. 이것이 저희의 개발 원칙이며 Lighthouse 측정 때마다 확인합니다. 다만 모든 프로젝트에 보장하는 수치는 아닙니다.

최근 모든 개발 프로젝트에 INP 최적화 적용

최신 기술(React, Next.js, Vite)을 선택하고 code-splitting에 세심하게 신경 쓴 덕분에, 저희 사이트는 Google 기준인 200ms보다 훨씬 빠르게 상호작용에 반응하도록 설계됩니다.

Core Web Vitals와 리옹에서의 Google 검색 순위

속도가 검색 순위에 미치는 영향

Google은 Core Web Vitals를 여러 순위 신호 중 하나로 활용합니다. 콘텐츠 수준이 같다면 더 빠른 사이트가 더 잘 크롤링되고 전환율도 높습니다. 저희는 측정하지 않은 순위 상승을 공개하지 않습니다. 각 프로젝트의 Lighthouse 점수는 해당 사례 연구 페이지에 게재되어 있으며, 관리 서비스를 이용하는 고객님께는 매월 순위 보고서를 보내드립니다.

속도와 전환율의 관계

모바일 속도에 관한 Google 연구 (새 탭에서 열림)에 따르면 로딩 시간이 1초에서 3초로 늘어나면 이탈 확률이 32%, 1초에서 5초로 늘어나면 90% 증가합니다. 속도는 전환, 매출, 고객 만족도에 직접적인 영향을 미칩니다.

현재 Core Web Vitals 무료 진단

현재 Core Web Vitals에 대한 빠르고 무료인 진단을 제공합니다. 15분 만에 주요 개선 기회를 찾아드립니다. 전체적인 현황을 파악하려면 종합 기술 SEO 감사 또는 웹사이트 종합 감사를 함께 받아 보세요.