코어 웹 바이탈이란 무엇인가
구글은 지난 2021년 6월 페이지 경험을 업데이트하면서, 검색 결과에 게재되는 웹페이지들에 사용자들이 경험하여 평가한 결과를 표시하겠다고 발표하였습니다. 페이지 경험이란 사용자들이 웹 페이지에서 상호작용했던 경험을 어떻게 인식하는지 측정하는 신호인데요. 구글은 웹 바이탈 항목이던 모바일 친화성, HTTPS, 안전 브라우징, 방해요소 4가지와 더불어 코어 웹 바이탈 3가지를 발표하였습니다.
웹 바이탈이란?
웹 바이탈 (Web Vitals)이란 웹에서 사용자의 경험을 제공하는 데 필요한 품질 신호에 대해 구글의 측정 기준을 나타낸 것입니다. 웹 바이탈은 구글 검색에서 우수한 페이지 경험을 제공하는 데 중요한 역할을 하는 것으로 알려져 있죠. 기본적으로 웹 바이탈은 4가지로 분류됩니다.
1. 모바일 친화성
페이지가 모바일 친화적인가?
2. 안전 브라우징
콘텐츠가 악성 소프트웨어 등으로부터 안전한가?
3. HTTPS
HTTPS 제공을 통해 사이트 연결이 안전한가?
4. 방해요소
사용자가 페이지의 콘텐츠가 쉽게 접근할 수 있는가?
이와 같이 분류되는 웹 바이탈은 다음에 나올 사이트 측정에서 가장 중요한 지표인 코어 웹 바이탈 (Core Web Vitals)에 초점을 맞추도록 도와주는 역할을 합니다.
코어 웹 바이탈이란?
코어 웹 바이탈 (Core Web Vitals) 이란 페이지의 로딩 속도, 응답성, 안정성을 평가하여 사용자를 위해 측정하는 항목을 말합니다. 웹 바이탈의 하위 집합으로, 모든 웹페이지에 적용됩니다.
구글은 위에서 언급한 웹 바이탈 4가지를 제외한 항목으로 로딩 성능을 측정하는 항목인 LCP, 페이지의 응답성을 측정하는 항목인 FID, 시각적 안정성을 측정하는 항목인 CLS 총 3가지를 코어 웹 바이탈의 항목으로 분류하였습니다.
1. LCP (Largest Contentful Paint)
LCP는 최대 콘텐츠 랜더링 시간으로서 웹 페이지의 로딩 속도를 측정하는 지표입니다. 페이지의 메인 콘텐츠가 로드되었을 때, 처음 로드를 시작한 시간을 기준으로 이미지 또는 텍스트의 렌더링 시간을 측정하여 페이지 로드 타임라인에 표시합니다. 페이지가 2.5초 이내로 로딩되면 빠름, 2.5초~4초 이내면 개선이 필요함, 4초를 초과할 경우 느림으로 측정됩니다. 구글에서는 2.5초 이내에 LCP가 발생하도록 권장하고 있습니다.
LCP 개선 방안으로는 콘텐츠의 레이아웃을 변경하는 것이 있습니다. 중요한 콘텐츠는 상단에 배치하거나, 중요한 부분을 가벼운 형식으로 배치하는 것도 좋습니다.
2. FID (First Input Delay)
FID는 최초 입력 반응 시간으로서 웹 페이지와 사용자 사이에 상호 작용에 대해 측정하는 지표입니다. 즉 사용자가 페이지를 클릭하는 등 작용을 발생시킨 이후 페이지가 반응할 때까지의 시간, 응답성을 말합니다. 페이지 반응 시간이 100밀리 초 이내라면 빠름, 100밀리 초~300밀리 초 이내라면 개선이 필요함, 300밀리 초를 초과할 경우 느림으로 측정됩니다. 구글에서는 100밀리 초 이내에 FID가 발생하도록 권장하고 있습니다.
FID 개선 방안으로는 코드를 최소화하는 것이 있습니다. 불필요한 코드는 제거하고 필요한 코드만 전송하는 것이죠. 또한 스타일과 레이아웃을 최대한 단순하게 만드는 것도 좋은 방안이 될 수 있습니다.
3. CLS (Cumulative Layout Shift)
CLS는 레이아웃 변경 횟수로서 시각적인 안정성을 측정하는 지표입니다. 어떤 페이지에서 콘텐츠를 보던 중 광고 혹은 다른 요소가 나와 레이아웃이 변경될 경우, 변경된 횟수를 점수로 환산하여 변화 수의 총 합계를 측정한 것을 말합니다. 점수는 0부터 시작하고, 0.1 이하면 빠름, 0.1~0.25 이하면 개선이 필요함, 0.25를 초과할 경우 느림으로 측정됩니다. 구글에서는 0.1 미만을 권장하고 있습니다.
CLS 개선 방안으로는 시각적으로 안정적인 페이지 로딩이 가능하도록 레이아웃 배치를 변경하는 것이 좋습니다. 특히 과도한 변환 애니메이션의 경우 자제하는 것이 좋습니다. 즉 비디오 요소에 주의를 기울이는 것이 중요합니다.
이러한 코어 웹 바이탈의 목표 측정은 세 가지 지표 모두에서 75번째 백분위수를 측정하는 것입니다. 이 말은 ‘페이지 좋음’ 상태인지, ‘개선이 필요’한 상태인지, ‘나쁨’ 상태인지의 기준값으로 75번째 백분위수를 사용한다는 의미로, 구글은 75번째 백분위수가 가장 균형 있는 값이라고 판단하고 있습니다.
코어 웹 바이탈 측정 도구
일반적으로 성능 지표는 크게 두 가지 방법으로 측정할 수 있습니다.
실험실 도구
제한된 상태에서 웹 페이지를 로드하는 행동을 발생시키는 도구를 사용하는 것을 말합니다.
현장 도구
실제 웹 페이지를 사용자가 직접 로드하고 반응하는 것을 말합니다.
두가지 방법을 모두 활용하는 것이 웹페이지 성능 개선 차원에서는 도움이 됩니다.
한편, 코어 웹 바이탈을 측정하기 위해서는 다음과 같은 실험실 및 현장 도구가 사용되고 있습니다.
- Chrome User Experience Report
- PageSpeed Ingsights
- Search Console
- Chrome DevTools
- Lighthouse
- WebPage Test
구글의 자체 조사에 따르면, 도구를 사용하여 측정한 코어 웹 바이탈이 기준점을 충족할 경우 사용자가 페이지 로드 과정에서 이탈할 가능성이 24% 낮아질 수 있다고 합니다. 따라서 웹사이트의 코어 웹 바이탈을 적절한 수준으로 유지할 수 있도록 주기적으로 측정하고, 관리하는 것이 매우 중요합니다.
에지오의 관측(Observability) 서비스
에지오의 관측(Observability) 서비스는 코어 웹 바이탈을 효과적으로 사용할 수 있는 서비스입니다. 실제 사용자 지표를 보기 위해 사이트를 에지오 AppOps에서 호스팅할 필요가 없습니다. 손끝에서 실시간으로 통찰력이 확인 가능합니다.
에지오의 관측 가능성 서비스는 다음과 같은 특징을 가지고 있습니다.
- 한눈에 인사이트를 얻는 것이 가능합니다.
- 실제 사용자 통계 모니터링이 가능합니다.
- 몇 분 안에 문제 해결이 가능합니다.
- 필터링 및 보고가 가능합니다.
- 라이브 전에 모든 CDN 구성을 검토할 수 있습니다.
- DevTools를 활성화할 수 있습니다.
- HTTPS 요청 심층 검사가 가능합니다.
에지오의 관측 (Observability) 서비스에 대해서 더 알아보고 싶으시다면 문의하기 버튼을 통해 에지오의 전문가와 상담해보세요.
