웹사이트 성능은 단순히 페이지가 얼마나 빨리 로드되는지만의 문제가 아닙니다. 콘텐츠가 몇 초 안에 표시되더라도 버튼 반응이 느리거나 레이아웃이 예기치 않게 이동하면 방문자는 불편함을 느끼고 사용 경험이 나빠질 수 있습니다. 그렇다면 웹사이트가 제대로 성능을 내고 있는지 어떻게 판단할 수 있을까요? Core Web Vitals는 로딩 속도, 상호작용성, 시각적 안정성을 측정하는 Google의 핵심 성능 지표입니다. 이 가이드에서는 Core Web Vitals의 세 가지 지표와 권장 기준값, 그리고 웹사이트 성능을 측정하고 개선하는 데 활용할 수 있는 도구를 알아봅니다.
Core Web Vitals란 무엇인가요?
Core Web Vitals는 웹사이트 사용자 경험의 중요한 측면을 측정하기 위해 Google이 도입한 성능 지표 모음입니다. 이 지표들은 로딩 성능, 상호작용성, 시각적 안정성이라는 세 가지 주요 요소에 초점을 맞춥니다. 즉, 페이지가 얼마나 빨리 로드되는지, 사용자가 얼마나 원활하게 상호작용할 수 있는지, 그리고 로딩 중에 콘텐츠가 안정적으로 유지되는지를 웹사이트 소유자가 파악할 수 있도록 도와줍니다.
웹사이트 성능은 페이지가 얼마나 빨리 열리는지만을 의미하지 않습니다. 웹사이트가 짧은 시간 안에 콘텐츠를 로드하더라도 사용자가 버튼을 클릭하기 전에 기다려야 하거나 페이지 레이아웃이 예기치 않게 바뀐다면 전체적인 경험은 여전히 좋지 않을 수 있습니다. Core Web Vitals는 이러한 문제를 찾아내고 웹사이트 성능 개선을 위한 측정 가능한 목표를 제시합니다.
현재 Google은 Largest Contentful Paint(LCP), Interaction to Next Paint(INP), Cumulative Layout Shift(CLS)의 세 가지 Core Web Vitals 지표를 사용합니다. 각 지표는 사용자 경험의 서로 다른 부분을 측정하므로, 하나를 개선한다고 해서 나머지 두 지표도 함께 개선되는 것은 아닙니다.
Core Web Vitals는 왜 중요할까요?
웹사이트는 방문자에게 원활하고 신뢰할 수 있는 경험을 제공해야 합니다. 페이지 로딩이 너무 오래 걸리면 사용자는 필요한 정보에 접근하기도 전에 떠나버릴 수 있습니다. 마찬가지로 버튼 반응이 느리거나 페이지 요소가 예기치 않게 움직이면 방문자는 답답함을 느끼고 원하는 작업을 끝마치기 어려워집니다.
Core Web Vitals는 개인적인 인상에만 의존하지 않고 측정 가능한 성능 데이터를 활용해 이러한 문제를 파악할 수 있게 해 줍니다. 예를 들어 개발자가 고성능 컴퓨터에서 웹사이트를 테스트하면 빠르게 로드되는 것처럼 보일 수 있습니다. 하지만 오래된 모바일 기기나 느린 인터넷 연결을 사용하는 방문자는 훨씬 긴 로딩 시간을 경험할 수 있습니다.
이러한 차이 때문에 성능 모니터링이 중요합니다. Core Web Vitals 데이터를 분석하면 개발자는 웹사이트의 어느 부분을 개선해야 하는지 파악하고, 최적화 작업이 기대한 효과를 내고 있는지 확인할 수 있습니다.
Core Web Vitals는 검색 엔진 최적화(SEO)와도 관련이 있습니다. Google은 순위 시스템에서 페이지 경험 신호를 활용하지만, Core Web Vitals 점수가 좋다고 해서 더 높은 순위가 보장되는 것은 아닙니다. 관련성 높은 콘텐츠를 비롯한 여러 요소가 여전히 중요합니다. 따라서 이러한 지표의 개선은 유용하고 접근성이 뛰어나며 신뢰할 수 있는 웹사이트를 구축하기 위한 폭넓은 전략의 일부로 보아야 합니다.
Core Web Vitals의 세 가지 지표는 무엇인가요?
각 Core Web Vitals 지표는 웹사이트 성능의 특정 측면에 초점을 맞춥니다. 각 지표의 작동 방식을 이해하면 성능 문제를 파악하고 적절한 최적화 기법을 선택하기가 더 쉬워집니다.
Largest Contentful Paint(LCP)란 무엇인가요?
Largest Contentful Paint(LCP)는 초기 뷰포트에 보이는 가장 큰 이미지나 텍스트 블록이 표시되기까지 걸리는 시간을 측정합니다. 이 지표를 통해 페이지의 주요 콘텐츠가 사용자에게 언제 보이기 시작하는지 가늠할 수 있습니다.
예를 들어 방문자가 블로그 글을 연다고 생각해 보세요. 페이지 배경과 내비게이션 메뉴는 거의 즉시 나타나지만, 메인 제목이나 대표 이미지는 로드되는 데 몇 초가 걸릴 수 있습니다. 이 경우 일부 요소가 이미 보이더라도 방문자는 페이지가 아직 로딩 중이라고 느낄 수 있습니다. 좋은 LCP 점수는 2.5초 이하입니다. 2.5초에서 4초 사이라면 개선이 필요하며, 4초를 초과하는 LCP 값은 나쁨으로 간주됩니다.
LCP에는 느린 서버 응답 시간, 큰 이미지, 렌더링을 차단하는 CSS 및 JavaScript, 주요 콘텐츠 발견 지연 등 여러 요인이 영향을 미칠 수 있습니다.
LCP를 개선하기 위해 웹사이트 소유자는 다음과 같은 조치를 취할 수 있습니다.
- 이미지 최적화: 이미지 파일 크기를 줄이고, 적절한 경우 WebP나 AVIF 같은 최신 포맷을 사용하세요.
- 서버 응답 시간 개선: 웹사이트에 적합하다면 효율적인 호스팅 리소스, 캐싱, 콘텐츠 전송 네트워크(CDN)를 활용하세요.
- 주요 콘텐츠 우선 처리: 브라우저가 HTML 소스에서 중요한 이미지를 바로 발견할 수 있도록 하고, 필요한 경우 해당 이미지의 로딩 우선순위를 높이세요.
- 렌더링 차단 리소스 줄이기: 브라우저가 주요 콘텐츠를 표시하지 못하게 막는 CSS 및 JavaScript 파일을 최적화하세요.
- LCP 이미지에 지연 로딩 사용 피하기: LCP 요소가 될 가능성이 높은 이미지의 로딩을 지연시키면 페이지가 더 느리게 보일 수 있습니다.
이러한 기법을 활용하면 사용자가 주요 콘텐츠가 나타나기를 기다리는 시간을 줄일 수 있습니다. 다만 가장 효과적인 해결책은 지연의 원인에 따라 달라지므로, 변경하기 전에 먼저 페이지를 측정하는 것이 중요합니다.
Interaction to Next Paint(INP)란 무엇인가요?
Interaction to Next Paint(INP)는 사용자가 웹사이트와 상호작용할 때 얼마나 빠르게 반응하는지를 측정합니다. 버튼 클릭이나 키 입력 같은 사용자 상호작용이 발생한 시점부터 브라우저가 다음 화면 업데이트를 표시하기까지의 지연 시간을 평가합니다.
방문자가 온라인 스토어에서 장바구니 담기 버튼을 클릭하는 상황을 생각해 보세요. 브라우저가 장바구니를 업데이트하는 데 눈에 띄게 시간이 걸리면 방문자는 버튼이 작동하지 않았다고 생각하고 다시 클릭할 수 있습니다. 이는 혼란을 일으키고 중복 동작으로 이어질 수도 있습니다.
INP는 사용자가 방문하는 동안 페이지의 응답성을 측정하여 이러한 유형의 문제를 찾아냅니다. 브라우저가 첫 번째 상호작용을 처리하기 시작하기 전까지의 지연만 측정했던 First Input Delay(FID)와 달리, INP는 페이지 수명 전체에 걸친 폭넓은 상호작용 경험을 고려합니다. 좋은 INP 점수는 200밀리초 이하입니다. 200밀리초 초과 500밀리초 이하는 개선이 필요하며, 500밀리초를 초과하면 나쁨으로 간주됩니다.
브라우저가 사용자 입력에 응답하고 업데이트를 표시하기 전에 스크립트를 실행해야 할 수 있기 때문에, JavaScript는 INP가 나빠지는 흔한 원인입니다. 오래 실행되는 작업은 브라우저가 상호작용을 신속하게 처리하지 못하게 만들 수 있습니다.
개발자는 INP를 개선하기 위해 다음과 같은 기법을 활용할 수 있습니다.
- 불필요한 JavaScript 줄이기: 사용하지 않는 코드를 제거하고, 현재 페이지에 필요하지 않은 스크립트는 로드하지 마세요.
- 긴 작업 분할하기: 큰 JavaScript 작업을 작은 작업으로 나누어 브라우저가 사용자 상호작용을 처리할 기회를 더 많이 갖도록 하세요.
- 이벤트 핸들러 최적화: 상호작용과 관련된 함수는 최대한 단순하고 효율적으로 유지하세요.
- 불필요한 DOM 업데이트 피하기: 한 번에 너무 많은 요소를 업데이트하면 렌더링 시간이 늘어나 다음 화면 업데이트가 지연될 수 있습니다.
- 서드파티 스크립트 줄이기: 분석 도구, 광고 스크립트, 임베디드 서비스는 처리 리소스를 소모하여 응답성에 영향을 줄 수 있습니다.
INP를 개선하려면 JavaScript 파일의 전체 크기를 줄이는 것만으로는 부족합니다. 개발자는 스크립트가 언제 실행되는지, 그리고 상호작용 이후 브라우저가 얼마나 많은 작업을 수행해야 하는지도 이해해야 합니다.
Cumulative Layout Shift(CLS)란 무엇인가요?
Cumulative Layout Shift(CLS)는 웹 페이지의 시각적 안정성을 측정합니다. 페이지가 표시되는 동안 보이는 요소의 위치가 예기치 않게 바뀌는 현상에 초점을 맞춥니다.
예를 들어 방문자가 글을 읽던 중 위쪽에 광고가 나타나면서 갑자기 텍스트가 아래로 밀려나는 상황을 생각해 보세요. 방문자가 링크를 클릭하려던 참이었다면 이 예기치 않은 움직임 때문에 다른 요소를 클릭하게 될 수도 있습니다. 이러한 레이아웃 변화는 특히 화면 영역이 제한된 모바일 기기에서 웹사이트를 사용하기 어렵게 만듭니다. 좋은 CLS 점수는 0.1 이하입니다. 0.1 초과 0.25 이하는 개선이 필요하며, 0.25를 초과하면 나쁨으로 간주됩니다.
예기치 않은 레이아웃 이동은 몇 가지 흔한 문제로 인해 발생할 수 있습니다. 크기가 지정되지 않은 이미지, 동적으로 삽입되는 광고, 늦게 로드되는 콘텐츠, 텍스트 모양을 바꾸는 웹 폰트 등이 모두 시각적 안정성에 영향을 줄 수 있습니다.
다음 기법은 CLS 개선에 도움이 됩니다.
- 이미지 크기 지정: 이미지의 너비와 높이를 지정하거나 CSS 종횡비를 사용하여 이미지가 로드되기 전에 필요한 공간을 확보하세요.
- 광고 공간 확보: 광고 컨테이너에 충분한 공간을 할당하여 광고가 나타날 때 주변 콘텐츠가 밀려나지 않도록 하세요.
- 기존 콘텐츠 위에 콘텐츠 삽입 피하기: 새 요소를 표시해야 한다면 사용자가 이미 보고 있는 콘텐츠를 예기치 않게 움직이지 않는 위치에 배치하세요.
- 폰트 로딩 최적화: 적절한 폰트 로딩 전략과 대체 폰트를 사용하여 텍스트 레이아웃의 예기치 않은 변화를 줄이세요.
- 적절한 CSS 애니메이션 사용: 가능하면 레이아웃 변경을 유발하는 속성 대신 transform이나 opacity 같은 속성을 기반으로 한 애니메이션을 사용하세요.
모든 레이아웃 이동이 해로운 것은 아니라는 점을 이해하는 것이 중요합니다. 사용자 상호작용에 대한 직접적인 반응으로 발생하는 변화는 예상 가능한 것일 수 있습니다. CLS는 예기치 않은 시각적 불안정성에 초점을 맞추며, 레이아웃 이동의 영향 범위와 이동 거리에 기반한 점수 산정 방식을 사용합니다.
Core Web Vitals의 권장 기준값은 무엇인가요?
Google은 웹사이트 소유자가 자신의 페이지가 좋은 사용자 경험을 제공하는지 판단할 수 있도록 구체적인 기준값을 제시합니다. 이 기준값은 성능을 좋음, 개선 필요, 나쁨의 세 가지 범주로 나눕니다.
이러한 기준값을 통해 개발자는 각 지표를 개별적으로 평가할 수 있습니다. 하지만 한 번의 테스트만으로는 웹사이트가 꾸준히 좋은 경험을 제공하는지 판단하기에 충분하지 않습니다.
Google은 모바일과 데스크톱 결과를 각각 따로 고려하여, 페이지 방문의 75번째 백분위수를 기준으로 Core Web Vitals를 평가할 것을 권장합니다. 즉, 측정된 방문 중 최소 75%가 각 지표의 좋음 기준을 충족해야 한다는 의미입니다.
예를 들어 어떤 웹사이트의 75번째 백분위수 LCP 값이 2초라고 가정해 보겠습니다. 이는 측정된 페이지 방문의 75%가 2초 이하의 LCP를 기록했다는 뜻이며, 권장 기준값을 충족합니다.
웹사이트는 가장 좋은 점수 하나에만 집중하기보다 세 가지 지표 모두에서 좋음 기준을 충족하는 것을 목표로 해야 합니다.
Core Web Vitals 측정 도구에는 무엇이 있나요?
Core Web Vitals는 Google이 제공하는 여러 도구로 측정할 수 있습니다. 이러한 도구를 활용하면 개발자는 웹사이트의 성능을 파악하고 개선이 필요한 부분을 찾아낼 수 있습니다.
PageSpeed Insights
PageSpeed Insights는 Core Web Vitals를 확인하는 데 가장 유용한 도구 중 하나입니다. 실제 사용자 데이터(이용 가능한 경우)와 시뮬레이션 테스트를 통해 수집한 실험실 데이터를 모두 제공하며, 페이지 성능 개선을 위한 제안도 함께 제공합니다.
Google Search Console
Google Search Console에는 어떤 페이지 그룹이 좋은 사용자 경험을 제공하고 어떤 페이지 그룹이 개선이 필요한지 보여 주는 Core Web Vitals 보고서가 포함되어 있습니다. 실제 사용자 데이터를 활용하여 웹사이트 소유자가 여러 페이지에 걸친 성능 문제를 파악할 수 있도록 도와줍니다.
Chrome DevTools 및 Lighthouse
Chrome DevTools와 Lighthouse를 사용하면 개발자가 통제된 환경에서 페이지 성능을 테스트할 수 있습니다. JavaScript 실행, 이미지 로딩, 레이아웃 이동을 비롯해 Core Web Vitals에 영향을 미치는 여러 요인과 관련된 문제를 찾아낼 수 있습니다.
필드 데이터와 실험실 데이터의 차이점은 무엇인가요?
Core Web Vitals는 필드 데이터와 실험실 데이터라는 두 가지 유형의 데이터로 평가할 수 있습니다. 두 데이터의 차이를 이해하면 테스트 결과를 올바르게 해석하고 웹사이트 성능 개선에 적합한 접근 방식을 선택하는 데 도움이 됩니다.
필드 데이터
필드 데이터는 실제 사용자가 웹사이트를 탐색하는 과정에서 수집됩니다. 다양한 기기, 네트워크 연결, 사용자 상호작용 등 실제 탐색 환경을 반영합니다.
이 데이터는 웹사이트가 실제 상황에서 Google의 권장 Core Web Vitals 기준값을 충족하는지 파악하는 데 특히 유용합니다.
실험실 데이터
실험실 데이터는 Lighthouse 같은 도구를 사용하여 통제된 테스트 환경에서 수집됩니다. 개발자가 성능 문제를 재현하고 그 원인을 조사하는 데 도움이 됩니다.
필드 데이터와 달리 실험실 데이터는 모든 실제 사용자 경험을 대변하지는 않습니다. 따라서 실험실 테스트와 실제 사용자 측정에서 웹사이트의 결과가 다르게 나올 수 있습니다.
Core Web Vitals를 개선하는 방법
Core Web Vitals를 개선하려면 로딩 속도, 상호작용성, 시각적 안정성에 영향을 미치는 문제를 먼저 파악해야 합니다. 적절한 해결책은 어떤 지표의 성능이 낮은지에 따라 달라집니다.
Largest Contentful Paint(LCP) 개선하기
LCP를 개선하려면 화면에 보이는 가장 큰 콘텐츠 요소를 최대한 빨리 로드하는 데 집중해야 합니다. 일반적인 개선 방법으로는 이미지 최적화, 신뢰할 수 있는 웹 호스팅 서비스 선택, 서버 응답 시간 단축, 캐싱 활성화, 중요한 리소스 로딩 시 불필요한 지연 방지 등이 있습니다.
Interaction to Next Paint(INP) 개선하기
INP는 오래 실행되는 JavaScript 작업을 줄이고 메인 스레드의 불필요한 작업을 최소화하여 개선할 수 있습니다. 또한 이벤트 핸들러를 최적화하고, 사용자가 클릭하거나 탭하거나 입력한 후 브라우저가 지나치게 많은 작업을 수행하지 않도록 해야 합니다.
Cumulative Layout Shift(CLS) 개선하기
CLS를 줄이려면 이미지, 동영상, 광고 및 기타 요소가 로드되기 전에 미리 공간을 확보해 두어야 합니다. 기존 콘텐츠 위에 새 콘텐츠를 예기치 않게 삽입하지 말고, 가능한 한 시각적 요소에 일관된 크기를 사용하세요.
마치며
Core Web Vitals는 개발자가 로딩 성능, 상호작용성, 시각적 안정성 측면에서 사용자가 웹사이트를 어떻게 경험하는지 이해하는 데 도움을 줍니다. LCP, INP, CLS를 측정하면 웹사이트 소유자는 성능 문제를 파악하고 페이지를 더 쉽게 사용할 수 있도록 개선 작업의 우선순위를 정할 수 있습니다.
정기적인 모니터링, 실제 사용자 데이터, 목표에 맞춘 최적화를 통해 웹사이트는 장기적으로 좋은 Core Web Vitals 결과를 유지할 수 있습니다.
자주 묻는 질문
1. 필드 데이터와 실험실 데이터의 차이점은 무엇인가요?
필드 데이터는 웹사이트를 방문하는 실제 사용자로부터 수집되며, 실험실 데이터는 통제된 테스트 환경에서 수집됩니다. 필드 데이터는 실제 사용자 경험을 반영하는 반면, 실험실 데이터는 개발자가 성능 문제를 재현하고 진단하는 데 도움이 됩니다.
2. Core Web Vitals 점수는 어떻게 개선할 수 있나요?
이미지 최적화, 불필요한 JavaScript 축소, 서버 응답 시간 개선, 캐싱 활성화, 예기치 않은 레이아웃 이동 방지를 통해 Core Web Vitals를 개선할 수 있습니다.
