정보실

웹학교

정보실

기타 웹 바이탈 소개 : 건강한 사이트를 위한 필수 지표

본문

웹 사이트의 장기적인 성공을 위해서는 사용자 경험의 품질을 최적화 하는 것이 중요합니다. 

Google은 수백만 명의 웹 개발자 및 사이트 소유자와의 지속적인 참여 및 협업을 통해 Google 전체에서 비즈니스 소유자, 마케팅 담당자 및 개발자 모두가 사용자 경험을 개선 할 수 있는 기회를 식별 할 수 있도록 많은 유용한 측정 항목과 도구를 개발했습니다. 그러나 많은 메트릭과 도구는 많은 우선 순위, 명확성 및 일관성 문제를 야기합니다.


오늘 우리는 웹에서 훌륭한 사용자 경험을 제공하는 데 필수적인 고품질 신호에 대한 통합 지침을 제공하기 위해 Google의 이니셔티브인 새로운 프로그램인 Web Vitals를 소개합니다.


https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html 


i9iF8GqgQhXkh1MLRlGQjYRxy_WzXNWTOTvBl5b-HCiL8HTgCk-Qh7PINQ1ruv-q5qUiRNhlpzKMybGzO_nYiTVOxIJoFBxBLRMIPCbI4AIcKLmcMhmh08JWQpCtpJq-hltKhiFi 


핵심 웹 바이탈 


사용자 경험의 품질을 측정하는 데는 많은 측면이 있습니다. 사용자 경험의 일부 측면은 사이트 및 상황에 따라 다르지만 모든 웹 경험에 중요한 공통 신호 세트 ( "핵심 웹 바이탈")가 있습니다. 

이러한 핵심 사용자 경험에는 로딩 경험, 상호 작용 및 페이지 컨텐츠의 시각적 안정성이 포함되며 2020 핵심 웹 바이탈의 기초가 됩니다.


HlrpevA1hZKx35h2SQdwOBdCO4FOC0YOqie9eMTiGDZx5MdSVTxY2VwPwdL58Pi68cuuG0ooeRTs3RJQEfU5woNRpgq1ZLV4SrWkzHIOH4kTnLS32i62Qf7UibEcz2xm8Gb4nT_e 


  • Largest Contentful Paint 감지 된로드 속도를 측정하고 페이지의 주요 내용이 로드 되었을 때 페이지 로드 타임 라인의 포인트를 표시합니다.
  • First Input Delay 응답 성을 측정하고 페이지와 처음 상호 작용할 때 사용자가 느끼는 경험을 정량화 합니다.
  • Cumulative Layout Shift 시각적 안정성을 측정하고 표시되는 페이지 컨텐츠의 예기치 않은 레이아웃 이동량을 수량화 합니다.

이러한 모든 측정 항목은 중요한 사용자 중심 결과를 포착하고 현장에서 측정 가능하며 실험실 진단 측정 항목과 툴링을 지원합니다. 예를 들어, 가장 큰 Contentful Paint는 최상위 로딩 메트릭이지만, FCP (First Contentful Paint) 및 TTFB (Time to First Byte)에 따라 크게 달라 지므로 모니터링 및 개선이 중요합니다.


핵심 웹 바이탈 측정 


우리의 목표는 Core Web Vitals를 Google 사이트 전체와 자체 대시 보드 및 도구 내에서 모든 사이트 소유자와 개발자가 쉽고 간편하게 액세스하고 측정 할 수 있도록 하는 것입니다.


Chrome UX 보고서를 사용하면 실제 Chrome 사용자가 경험 한대로 사이트 소유자가 각 Web Vital에 대한 사이트 성능을 빠르게 평가할 수 있습니다. BigQuery 데이터 세트는 이미 모든 핵심 웹 Vital에 공개적으로 액세스 할 수 있는 히스토그램을 표시하며 URL 및 원본 수준 데이터에 간단하고 쉽게 액세스 할 수 있는 새로운 REST API를 개발 중입니다.


모든 사이트 소유자는 각 Core Web Vital에 대한 고유 한 실제 사용자 측정 분석을 수집 할 것을 적극 권장합니다. 

이를 가능하게 하기 위해 Google 크롬을 포함한 많은 브라우저가 현재 핵심 웹 바이탈 초안 사양 (최대 컨텐츠 페인트, 레이아웃 불안정성 및 이벤트 타이밍)을 지원합니다. 

개발자가 자신의 사이트에 대한 핵심 웹 바이탈 성능을 쉽게 측정 할 수 있도록 오늘 오픈 소스 웹 바이탈 JavaScript 라이브러리를 시작합니다.

이 라이브러리는 사용자 지정 메트릭을 지원하는 모든 분석 공급자와 함께 사용하거나 이를 수행하는 방법에 대한 참조로 사용할 수 있습니다 

사이트 사용자를 위한 각 핵심 웹 Vital을 정확하게 캡처합니다.


// 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}));


테스트 및 개발 프로세스에서 개발 및 웹 탐색시 각 핵심 웹 Vital의 상태에 쉽게 액세스 할 수 있는 것이 중요하다는 것을 알았습니다. 개발자가 오늘날 최적화 기회를 발견 할 수 있도록 새로운 핵심 웹 Vitals 확장에 대한 개발자 미리보기를 발표합니다. 

이 확장 프로그램은 웹을 탐색 할 때 각 중요 상태에 대한 시각적 표시기를 Chrome에 표시하며, 향후 각 핵심 중요 상태에 대한 집계 된 실제 사용자 통계 (Chrome UX 보고서에서 제공)를 볼 수도 있습니다 현재 URL 및 출발지


마지막으로 앞으로 몇 달 동안 Lighthouse, Chrome DevTools, PageSpeed ​​Insights, Search Console의 속도 보고서 및 기타 인기 있는 도구를 업데이트하여 핵심 웹 Vitals를 개선하기 위한 일관되고 실행 가능한 지침을 강조 표시합니다.


진화하는 핵심 웹 바이탈 


오늘날의 Core Web Vitals 지표는 웹에서 사용자 경험의 세 가지 중요한 측면을 측정하지만 Core Web Vitals에서는 아직 다루지 않은 많은 사용자 경험 측면이 있습니다. 앞으로 사용자 경험에 대한 이해를 높이기 위해 매년 핵심 웹 바이탈을 업데이트하고 향후 후보자, 동기 부여 및 구현 상태에 대한 정기적 인 업데이트를 제공 할 것으로 기대합니다.


2021 년을 향해서, 우리는 더 나은 이해와 페이지 속도 측정 기능 및 기타 중요한 사용자 경험 특성을 구축하는 데 투자하고 있습니다. 예를 들어, 최초 상호 작용뿐만 아니라 모든 상호 작용에서 입력 대기 시간을 측정하는 기능을 확장합니다. 매끄러움을 측정하고 정량화 하는 새로운 메트릭; 웹상에서 즉각적인 프라이버시 보호 경험을 제공 할 수 있는 기본 요소 및 지원 지표; 그리고 더.


web.dev에서 업데이트를 따르고 메일 링리스트에 가입하여 중요한 요소 및 모든 웹에 대한 향후 업데이트를 확인하십시오.





페이지 정보

조회 18회 ]  작성일20-05-23 18:12

웹학교