Google은 세 가지 핵심 측정항목을 사용하여 개발자에게 웹사이트 성능에 대한 통합 지침을 제공하는 Web Vitals 이니셔티브를 발표했습니다.
작년 Chrome 개발자 서밋에서 Google은 새로운 Chrome 개발자 도구 발표 페이지 로드 시간을 줄이고 기본 앱과 같은 경험을 구축합니다. 당시 회사는 사용자 경험과 성능을 염두에 두고 웹사이트를 구축할 때 측정할 수 있는 통합된 측정항목 세트를 개발자에게 제공하는 계획에 대해서도 논의했습니다. 초기 아이디어에 이어 Google은 이제 다음을 목표로 하는 Web Vitals 이니셔티브를 발표했습니다. "웹에서 뛰어난 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합 지침"입니다.
수년에 걸쳐 Google은 웹사이트 개발자가 웹사이트 성능을 측정하고 보고하는 데 도움이 되는 여러 도구를 제공해 왔습니다. 여기에는 등대, Chrome 개발자 도구, PageSpeed Insights 및 Search Console의 속도 보고서. 그러나 Google은 일부 개발자가 이러한 도구를 사용하는 데 상당히 능숙한 반면, 다른 개발자는 다양한 도구와 측정항목을 따라잡기가 다소 어렵다고 지적합니다. 새로운 이니셔티브를 통해 회사는 개발자가 핵심 웹 바이탈(Core Web Vitals)이라는 가장 중요한 측정 항목에 집중할 수 있도록 환경을 단순화하는 것을 목표로 합니다.
핵심 웹 바이탈은 모든 웹페이지에 적용되는 모든 웹 바이탈의 하위 집합으로, 모든 웹사이트 소유자가 측정해야 하며 모든 Google 도구에 표시됩니다. 현재 이러한 핵심 웹 바이탈은 사용자 경험의 세 가지 측면(로딩, 상호 작용 및 시각적 안정성)에 중점을 두고 있으며 다음 측정항목(및 해당 임계값)을 포함합니다.
- 콘텐츠가 포함된 최대 페인트(LCP): 로딩 성능을 측정합니다. 좋은 사용자 경험을 제공하려면 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 합니다.
- 첫 번째 입력 지연(FID): 상호작용을 측정합니다. 좋은 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 미만이어야 합니다.
- CLS(누적 레이아웃 변경): 시각적 안정성을 측정합니다. 좋은 사용자 경험을 제공하려면 페이지에서 CLS를 0.1 미만으로 유지해야 합니다.
개발자가 이러한 핵심 웹 바이탈을 측정하고 보고할 수 있도록 Google은 도구에 이러한 측정항목을 표시하기 위해 최선을 다하고 있습니다. 다음 차트에서는 Core Web Vitals를 지원하는 도구를 자세히 설명합니다.
또한 개발자는 표준 웹 API를 사용하여 JavaScript로 각 Core Web Vital을 측정하고 다음을 사용하여 코드를 작성하지 않고도 각 Core Web Vital에 대해 보고할 수 있습니다. 웹 바이탈 Chrome 확장 프로그램. 확장 프로그램은 웹 바이탈 라이브러리를 사용하여 이러한 측정항목을 측정하고 사용자가 웹을 탐색할 때 이를 표시합니다. 확장 프로그램은 귀하의 웹 사이트, 경쟁업체의 웹 사이트 및 웹 전체의 성능을 이해하는 데에도 도움이 될 수 있습니다. 또는 기본 웹 API를 사용하여 이러한 측정항목을 측정하려는 개발자는 아래 링크된 웹사이트의 측정항목 가이드에서 구현 세부정보를 참조할 수 있습니다.
Core Web Vitals와 함께 Google은 Core Vitals에 대한 프록시 또는 보충 측정항목 역할을 할 다른 Web Vitals에 대해서도 설명합니다. 여기에는 TTFB(Time to First Byte), FCP(First Contentful Paint), TBT(Total Blocking Time) 및 시간과 같은 측정항목이 포함됩니다. 개발자가 경험의 더 많은 부분을 포착하거나 특정 문제를 진단하는 데 도움을 줄 수 있는 Interactive(TTI) 문제.
이러한 웹 바이탈과 코어 웹 바이탈은 시간이 지남에 따라 발전할 것이며 개발자는 향후 개선 사항이나 목록 추가를 기대해야 한다는 점은 주목할 가치가 있습니다. 그러나 핵심 웹 바이탈은 모든 웹페이지와 관련이 있고 여러 Google 도구에 걸쳐 제공되므로 이러한 측정항목을 변경해도 해당 정의와 임계값은 변경되지 않습니다. 또한 개발자는 향후 변경 사항과 예측 가능한 연간 패턴에 대해 사전 통지를 받게 됩니다. 다른 웹 바이탈은 상황이나 도구에 따라 다르므로 해당 정의와 임계값은 사전 통지 없이 더 자주 변경될 수 있습니다. 모든 웹 바이탈에 대한 모든 변경 사항은 이 문서에 문서화됩니다. 공개 변경 로그.
원천: web.dev