Google for Developers Korea Blog: Web Vitals 소개: 건강한 사이트를 위한 필수적인 측정항목

Web Vitals 소개: 건강한 사이트를 위한 필수적인 측정항목

2020년 5월 11일 월요일

.post-body span { white-space: normal !important; } 작성자: Ilya Grigorik (웹 성능 엔지니어)

번역 리뷰는 조은(Web GDE)님께서 참여해주셨습니다.

사용자 경험을 좋게 만드는 건 모든 웹 사이트의 장기적 성공 비결입니다. Chrome 팀은 수백만에 이르는 웹 개발자 및 사이트 소유자와의 지속적인 협업 및 참여를 통해 Google 전반에 걸쳐 비즈니스 오너, 마케터, 개발자에게 똑같이 사용자 경험을 개선시키는 데 도움이 되는 수많은 측정 항목과 도구를 개발했습니다. 하지만 측정 항목과 도구가 다양하다는 점이 오히려 많은 사람들에게 우선순위, 명료성, 일관성 등에서 문제를 일으키기도 합니다.
오늘 Chrome 팀은 웹에서 훌륭한 사용자 경험을 제공하는 데 필수라고 생각하는 품질 지표에 대한 통합적 지침을 제시하는 Google 이니셔티브인 Web Vitals 라는 새로운 프로그램을 소개합니다.

Core Web Vitals

사용자 경험을 측정하는 데에는 많은 요인이 있습니다. 사용자 경험의 일부분은 사이트와 컨텍스트에 한정되어있지만, 모든 웹 경험에서 중요한 공통 집합인 ‘Core Web Vitals’가 있습니다.이러한 핵심 사용자 경험 요구사항에는 로딩 경험, 상호 작용, 페이지 콘텐츠의 시각적 안정성이 포함되며, 이들이 결합되어 2020 Core Web Vitals의 기초를 이룹니다.

Largest Contentful Paint는 인식되는 로드 속도를 측정하는 항목으로, 페이지의 주요 콘텐츠가 로드되었을 가능성이 높은 시점에 페이지 로드 타임라인에 점을 표시합니다.

First Input Delay는 응답성을 측정하는 항목으로, 사용자가 페이지와 처음 상호 작용하려고 할 때 느끼는 경험을 정량화합니다.

Cumulative Layout Shift는 시각적 안정성을 측정하는 항목으로, 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정량화합니다.

이들 측정항목은 모두 중요한 사용자 중심의 결과를 포착하고, 현장에서 측정 가능하며, 이를 뒷받침해주는 실험실 진단 측정항목 등가 기준과 도구가 있습니다. 예를 들어, Largest Contentful Paint는 가장 중요한 로딩 측정항목이지만, 모니터링과 개선에 여전히 중요한 First Contentful Paint(FCP)와 Time to First Byte(TTFB)에도 크게 의존합니다.

Core Web Vitals 측정

우리의 목표는 모든 사이트 소유자와 개발자가 Google에서 제공하는 각종 측정항목 전체뿐 아니라 자체적인 대시보드와 도구에서도 간편하고 손쉽게 Core Web Vitals에 접근하고 측정할 수 있도록 하는 것입니다.
사이트 소유자는 Chrome UX Report를 사용해 실제 Chrome 사용자가 경험하는대로, 각 Web Vital에 대해 사이트의 성능을 빠르게 평가할 수 있습니다. BigQuery 데이터셋은 이미 모든 Core Web Vitals에 대해 공개적으로 접근 가능한 히스토그램을 보여주며, 우리는 URL과 원본 데이터에 모두 간편하고 쉽게 접근할 수 있게 해줄 새로운 REST API 관련 작업을 진행 중입니다. 계속 관심을 갖고 지켜봐 주세요.
모든 사이트 소유자는 각각의 Core Web Vital에 대해 자체적인 실제 사용자 측정 분석 데이터를 수집하도록 강력히 권해 드립니다. 이 점을 고려해, Google Chrome을 비롯한 많은 브라우저에서는 현재의 모든 Core Web Vitals, 즉 Largest Contentful Paint, Layout Instability, Event Timing의 초안 사양에 적합한 지원 기능이 구현되어 제공되고 있습니다.
개발자들이 사이트 내 Core Web Vitals 성능 측정을 쉽게 하기 위해, web-vitals 자바스크립트 라이브러리를 출시하였습니다. Web-vitals 라이브러리는 커스텀 측정을 지원하는 애널리틱스 제공자와 함께 사용할 수 있으며, 사이트 사용자 각각의 Core Web Vitals를 정확히 포착하는 레퍼런스로 사용할 수 있습니다.

// Example of using web-vitals to measure & report CLS, FID, and LCP.

import {getCLS, getFID, getLCP} from 'web-vitals';

function reportToAnalytics(data) {

const body = JSON.stringify(data);

(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||

fetch('/analytics', {body, method: 'POST', keepalive: true});

}

getCLS((metric) => reportToAnalytics({cls: metric.value}));

getFID((metric) => reportToAnalytics({fid: metric.value}));

getLCP((metric) => reportToAnalytics({lcp: metric.value}));

테스트 및 개발 과정에서, 우리는 개발할 때와 웹을 검색할 때 모두 각 Core Web Vital의 상태에 쉽게 접근할 수 있도록 하는 것이 매우 중요하다는 점을 깨달았습니다. 개발자가 최적화 기회를 발견하는 데 도움을 드리고자, 우리는 오늘 새로운 Core Web Vitals 확장 프로그램의 개발자 프리뷰 버전도 발표합니다. 이 확장 프로그램은 Chrome에서 웹 검색 시에 각 Vital 항목의 상태에 대해 시각적으로 표시해 보여주며, 앞으로는 현재 URL과 원본 URL에 대한 각 Core Vital 항목의 상태에 대해 집계된 실제 사용자 통계(Chrome UX Report를 통해 제공)도 볼 수 있도록 제공할 예정입니다.
마지막으로, 앞으로 몇 달 동안 우리는 Core Web Vitals를 개선하기 위해 일관되고 실행 가능한 지침을 제공하고 강조하기 위해 Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console’s Speed Report 및 기타 인기 도구를 업데이트할 예정입니다.

Core Web Vitals의 발전

현재의 2020 Core Web Vitals 세트는 웹에서 이상적인 사용자 경험을 포착하는 측정항목으로 구성된 완전한 세트가 아닙니다. 우리는 매년 Core Web Vitals를 업데이트하고 미래의 후보, 동기 부여, 구현 상태를 기준으로 정기적으로 업데이트를 제공할 것으로 예상합니다.
우리는 2021년을 내다보며 페이지 속도와 기타 중요한 사용자 환경 특성을 측정하기 위한 능력을 배양하고 더욱 깊게 이해하는 데 투자하고 있습니다. 최초의 상호 작용뿐 아니라 모든 상호 작용에서 입력 지연 시간을 측정하는 능력 확장, 부드러움을 측정하고 정량화하기 위한 새로운 측정항목, 웹에서 즉각적이면서도 개인정보를 보호하는 경험을 제공할 수 있는 기본 요소 및 지원 측정항목 등을 예로 들 수 있습니다.
web.dev에서 업데이트를 팔로우하고 메일링 리스트에 구독 신청해서 Vital 항목과 웹에 관해 향후에 업데이트되는 정보를 놓치지 마시기 바랍니다.