코어 웹 바이탈(Core Web Vitals)이란 무엇인가

Core Web Vitals란 무엇인가요?

Core Web Vitals는 구글이 웹사이트에서의 사용자 경험을 개선하기 위해 만든 지표입니다. 로드 속도를 분석하기 위한 다양한 도구가 존재한다는 점이 구글이 이 모든 지표를 통합하기로 결정한 요인 중 하나였으며, 이는 로드 시간 최적화에 따르는 복잡함을 다소 단순화하기 위함입니다. 이 이니셔티브의 목표는 최적의 사용자 경험을 달성하는 데 매우 중요한 "품질 신호"에 집중하도록 만드는 것입니다.

구글은 Core Web Vitals가 무엇에 초점을 두는지 다음과 같이 짧게 요약합니다.

• ›

  로딩 경험

• ›

  상호작용성

• ›

  페이지 콘텐츠의 시각적 안정성

Largest Contentful Paint(LCP)

LCP, 즉 Largest Contentful Paint는 사용자에게 보이는 "가장 큰" 콘텐츠가 사용 가능해지기까지 걸리는 로드 시간을 알려주는 지표입니다. 다시 말해, 구글은 "Above the Fold"라고 알려진 영역에 배치된 요소들이 빠르게 로드되어 읽을 수 있어야 하며, 사용자가 상호작용할 수 있도록 사용 가능해야 한다고 말하는 것입니다.

사용자가 화면을 클릭하거나 스크롤할 때 나타나는 요소는 LCP에 영향을 주지 않는다는 점을 분명히 해야 합니다. 가장 큰 콘텐츠는 텍스트 블록, 동영상, 이미지 등이 될 수 있습니다.

시간 기준에 따른 LCP 상태 분류. 이미지 © web.dev

구글이 최적이라고 보는 시간은 얼마인가요?

차트에서 볼 수 있듯이, 구글은 좋은 사용자 경험을 제공하기 위해 LCP를 로드하는 최대 시간이 2.5초 미만이어야 한다고 봅니다. 로딩 중에 LCP 요소가 변경될 수 있다는 점도 중요합니다.

URL의 LCP를 어떻게 알 수 있나요?

크롬 브라우저 자체에서 Lighthouse 감사를 실행하면, 구글이 가장 큰 콘텐츠로 간주하는 요소를 확인할 수 있습니다. 방법은 다음과 같습니다.

LCP 로딩에 영향을 주는 요소는 무엇인가요?

LCP 로드 시간이 예상보다 길어지는 데에는 여러 가지 요인이 작용합니다. 그 요소들과 액션은 다음과 같습니다.

• ›

  서버 응답

• ›

  데이터베이스 쿼리

• ›

  응답이 느린 API

• ›

  렌더링을 차단하는 CSS 또는 JS

• ›

  다른 리소스의 느린 로딩

• ›

  최적화되지 않은 이미지

• ›

  기타 등등

First Input Delay(FID)

FID, 즉 First Input Delay는 사용자가 어떤 요소와 상호작용했을 때 페이지가 반응하기까지 걸리는 시간을 나타내는 지표입니다.

Pagespeed에서 확인한 지표

구글이 오래 전 모두에게 공개한 Pagespeed 도구에서 이 지표에 대한 참조를 확인할 수 있습니다. 양호하다고 판단되는 값은 100ms 미만이어야 합니다.

시간 기준에 따른 First Input Delay(FID) 상태 분류. 이미지 © web.dev

이 지표(FID)에서 발생하는 문제의 주요 원인은 JavaScript 실행에서 비롯되므로, 상호작용에 페이지가 반응하는 데 시간이 걸리도록 만드는 코드의 어떤 부분을 식별할 필요가 있습니다. 저는 광고 JS 로드와 관련해 직접 이 문제를 경험한 적이 있습니다.

Cumulative Layout Shift(CLS)

Cumulative Layout Shift는 로드되는 동안 표시 영역을 변경하는 요소의 로딩에 한계를 두는 지표입니다. 다른 리소스가 로드되더라도 화면이 이동하지 않도록 화면 요소에 안정성을 부여하는 것이 목표입니다.

구글(그리고 모든 사용자)은 페이지와 상호작용을 시작했는데(읽거나 스크롤하는 등), 나중에 로드된 요소가 사용자의 위치를 콘텐츠 기준으로 이동시켜 다시 스크롤로 보정해야 하는 상황이 매우 짜증스럽다고 봅니다.

이 예시는 이 지표가 어떻게 작동하는지 더 잘 설명해 줍니다. 처음에는 왼쪽에 콘텐츠가 로드된 모습이 보입니다. 구글이 안정성을 말할 때 가리키는 것은 세 번째 요소의 로딩이 이전에 로드된 요소들을 이동시키지 않는 것입니다. 오른쪽 이미지에서 볼 수 있듯이, YouTube 동영상이 로드되면서 처음에 로드되었던 두 블록이 밀려났습니다.

Core Web Vitals는 왜 중요한가요?

검색엔진, 특히 구글과 함께해 온 시간 동안, 구글은 웹사이트를 운영하며 검색결과의 한 옵션이 되고 싶어하는 모든 이에게 다양한 의무 사항을 부여해 왔습니다.

모든 기기에서의 접근성 개선, 보안 프로토콜에 의한 안전한 탐색 권장, 침해적인 광고(인터스티셜)를 사용하는 웹사이트 페널티 부여 등이 이 거대 기술 기업이 벌여 온 전투들입니다.

이 지표들은 구글이 사용자에게 문제가 될 수 있는 웹사이트 부분을 알려주는 표시입니다. 그런데… 이게 정말 중요한 걸까요?

웹사이트를 "로봇"의 관점에서 이해하든 "사용자"의 관점에서 이해하든, 이 지표들은 우리 웹사이트가 마땅히 그래야 할 만큼 잘 작동하지 않고 있다는 신호입니다. 여러 연구를 통해 로드 시간이 전환과 사용자 인내심에 얼마나 영향을 미치는지 확인할 수 있었습니다. 현재로서는 랭킹에 영향을 주지 않지만, 우리가 이런 지표를 무시할 이유가 있을까요?

저희로서는 분명히 이를 고려할 것입니다.

Core Web Vitals는 랭킹에 영향을 주나요?

오늘 시점에서 우리가 아는 사실은 사용자 경험을 개선하기 위한 지표가 점점 더 중요해지고 있으며, 그 중 일부는 이미 검색결과에서 고려되고 있다는 것입니다. 5월 28일자 구글 블로그 글에서는 2021년에 사용자 경험 관련 여러 지표를 포함한 새로운 업데이트가 출시될 예정이라고 발표했습니다.

**모바일 퍼스트 인덱스**가 어떻게 처리되었는지, 그리고 사전 공지가 어떻게 이루어졌는지 떠올려 보면 됩니다. 이번 경우에도 5월의 글에서 최소 6개월 전에 사전 공지가 있을 것이라고 경고하고 있으니… 내년 말에 업데이트가 있을까요?

Core Web Vitals 최적화 도구

이제 Core Web Vitals가 무엇이고 앞으로 몇 달 동안 얼마나 중요해질지 살펴봤으니, 이 지표들을 최적화하는 작업을 시작할 차례입니다. 다양한 도구를 통해 감지된 문제를 해결하고 성능 개선을 이룰 수 있습니다.

Lighthouse

Lighthouse는 크롬에 내장되어 있는 강력한 오픈소스 도구입니다. Lighthouse를 통해 다양한 테스트를 실행해 웹사이트를 감사하고, 부족한 부분이나 최적화가 필요한 페이지 영역에 대한 결과를 얻을 수 있습니다. 그 중에는 Core Web Vitals 지표도 포함되어 있습니다.

Lighthouse 감사 결과에서 가져온 이미지

Page Speed Insights

Page Speed Insights는 웹사이트의 성능 데이터를 얻을 수 있도록 구글이 제공하는 또 다른 옵션입니다. 이 도구는 가장 중요한 지표와 그 상태를 그래프로 보여주기까지 합니다. Page Speed Insights는 다른 웹사이트와 비교한 데이터를 얻는 것을 목표로 하는 사용자 경험 보고서를 기반으로 합니다.

Page Speed Insights가 제공하는 지표

Chrome UX

Chrome User Experience Report는 구글이 크롬을 통해 전 세계 사용자의 행동에 관해 제공하는 데이터 모음입니다. 이 데이터에 접근하려면 Big Query를 사용해야 하며, Google Cloud 계정도 있어야 합니다.

Google Data Studio를 통해 접근이 더 쉽게 만들어졌으며, 이 Dashboard에서 거의 모든 것이 준비되어 있습니다.

Chrome Dev Tools

Core Web Vitals 지표는 Lighthouse뿐 아니라 크롬의 개발자 도구를 통해서도 분석할 수 있고, 같은 결론에 도달할 수 있습니다. 예를 들어 "Performance" 탭에서 녹화 또는 새 로드를 수행하면 URL이 어떻게 동작하는지에 대한 유용한 정보를 얻을 수 있습니다.

Chrome Dev Tools의 Performance 옵션에서 가져온 스크린샷

Web.Dev

적어도 Core Web Vitals를 알고 싶을 때, 일을 더 쉽게 하는 방법은 늘 있습니다. 공식 웹사이트에는 각 지표를 자세히 설명하는 페이지가 있고, 그것이 무엇인지와 개선 방법을 알려줍니다.

또한, 크롬 스토어에는 각 URL에 들어갈 때 이 정보를 알려주는 확장 프로그램이 있습니다.

빨간색 또는 초록색 표시로 이 지표 기준에서의 URL 상태를 확인할 수 있습니다.

Web Vitals 확장 프로그램이 제공하는 결과 스크린샷

Search Console

Search Console은 모든 웹마스터에게 필수적인 도구입니다. 어떤 URL에 이 3가지 지표(LCP, FID, CLS) 관련 문제가 있는지 확인할 수 있는 기능이 추가되었습니다. 왼쪽 메뉴에 "Core Web Vitals" 옵션이 있고, 이를 선택하면 기기별 URL 결과를 보여주는 두 개의 그래프가 나타납니다. 기기(데스크톱 또는 모바일)를 선택하면 어떤 URL에 문제가 있는지 자세히 볼 수 있습니다.

오른쪽에 URL 수가 많아 보여도 놀라지 마세요. 이는 비교적 정상적인 현상이며, 보통 페이지 유형(예: 블로그 글)별로 문제가 발생하기 때문에 그 중 하나만 작업해도 모두에 걸쳐 개선이 이루어집니다.

결론

Core Web Vitals를 살펴본 이 여정은 점점 더 비중이 커질 지표들에 우리를 익숙해지게 만드는 것이 목적이며, SEO 담당자든 웹마스터든 이 지표들과 함께 살아가야 합니다. SEOcrawl은 여러분의 웹사이트 WPO 성능을 개선하는 데 분명히 도움이 될 이 모든 도구들을 적극 활용할 것을 권합니다.

*사이트 속도를 개선하는 도전을 받아들이시겠습니까? 위에서 언급한 도구 중 하나로 테스트를 실행해 보고 스크린샷과 함께 메시지를 보내주세요. 무료로 개선 팁을 알려드리겠습니다! *