핵심 Web Vitals: 무엇이며 어떻게 테스트할 수 있습니까?

2020년 9월 17일 최종 업데이트

웹사이트를 운영하는 사람이라면 웹사이트를 최대한 원활하게 운영하는 것이 얼마나 중요한지 압니다. 느슨하고 제대로 구축되지 않은 사이트는 신뢰성과 신뢰성을 전달하지 못합니다. 일반 웹 사용자는 사이트를 사용하기에 충분히 편안함을 느끼기 전에 이러한 느낌을 받을 필요가 있습니다. 귀하와 전 세계의 웹 개발자가 사이트를 개선할 수 있도록 Google은 최근 Core Web Vitals를 출시했습니다. 이것은 사이트의 품질과 잠재적인 사용자 경험 을 결정하는 데 도움이 되는 일련의 메트릭을 제공하는 새로운 프로그램입니다. 이 기사에서는 주요 메트릭 또는 웹 바이탈을 분석하고 이를 테스트하여 사이트의 상태를 결정하는 방법에 대해 설명합니다.

주요 Web Vital은 무엇입니까?

사이트에서 제공하는 서비스 품질을 결정할 때 명확한 그림을 개발하기 위해 검토해야 하는 몇 가지 메트릭이 있습니다. Google은 일반 웹 개발자를 위해 범위를 좁혔습니다. 그들은 세 가지 메트릭이 사이트를 평가할 수 있는 주요 구성 요소라고 결정했습니다. 이 세 가지 메트릭은 LCP(Large Contentful Paint), FID(First Input Delay) 및 CLS(Cumulative Layout Shift)입니다.

가장 큰 콘텐츠가 포함된 페인트 는 웹페이지가 로드되는 속도를 측정한 것입니다. 해당 페이지의 주요 내용을 측정한 지점을 표시합니다. 이것은 페이지에서 가장 큰 텍스트(또는 이미지) 블록이 로드되는 데 걸리는 시간을 측정한 것입니다. 일반적으로 사이트에서 콘텐츠가 포함된 가장 큰 페인트를 로드하는 데 2.5초 이상 걸리지 않기를 바랍니다. 확실히 이것은 웹 디자인 중에 고려할 가치가 있는 포인트입니다.

첫 번째 입력 지연 은 사용자가 페이지와 상호 작용할 때 사이트가 작동하는 방식을 측정합니다. 여기에는 반응성과 같은 것들이 포함됩니다. 사용자가 페이지를 클릭할 때마다 웹사이트가 해당 클릭에 응답하는 데 걸리는 시간은 첫 번째 입력 지연으로 측정됩니다. 일반적으로 100ms보다 빠른 것이 좋지만 그 이후에는 몇 가지 개선 사항이 필요합니다.

마지막으로 누적 레이아웃 이동 은 페이지의 시각적 개체의 안정성을 측정합니다. 페이지의 예상치 못한 레이아웃 이동의 양을 수량화할 수 있는 측정값입니다. 이 세 가지 측정항목 각각에 대해 모든 페이지 로드의 75번째 백분위수 이상에 도달하기를 원할 것입니다. 이러한 지표를 고려하는 한 이는 "통과"로 간주됩니다.

핵심 웹 바이탈을 측정하는 방법은 무엇입니까?

우리는 이러한 측정항목이 잘 실행된 SEO 캠페인 만큼 중요할 수 있음을 확인했습니다. 그렇다면 측정 방법은 무엇입니까? Google은 핵심 웹 필수 요소를 사용자 경험의 척추로 간주하면서 이를 측정할 수 있는 도구를 제공하기 위해 최선을 다하고 있습니다. 다음은 사이트의 핵심 Web Vital 성능을 측정할 수 있는 세 가지 방법입니다.

Chrome 사용자 경험 보고서를 통해 Google은 각 핵심 웹 바이탈에 대한 익명의 실제 사용자 경험을 수집합니다. 이는 외부 응용 프로그램을 미리 설정할 필요가 없기 때문에 유용합니다. 실제로 Google은 이미 미리 처리했습니다. 또한 PageSpeed ​​Insights와 같은 도구는 동일한 플랫폼에서 실행되므로 즉시 사용할 수 있습니다.

이 방법은 매우 간단하고 사용자의 입력이 거의 필요하지 않지만 이 방법에서 제공하는 분석은 그다지 상세하지 않습니다. 무엇보다도 페이지뷰당 원격 분석을 포함하지 않습니다. 이것은 누군가가 웹 페이지의 잠재적인 문제를 정확하게 진단하는 데 도움이 될 것입니다.

자바스크립트 사용

또는 JavaScript를 사용하여 핵심 웹 바이탈을 처리할 수 있습니다. 시작하는 가장 간단한 방법은 web-vitals 라이브러리에서 JavaScript 항목을 가져오는 것입니다. 이것은 정확한 웹 API를 사용할 준비가 된 상태를 제공합니다. 또한 Chrome 웹 스토어는 Web Vitals Chrome Extension 이라는 확장 프로그램을 제공하므로 코드를 작성하지 않고도 각 웹 vitals에 대해 보고할 수 있습니다.

마지막으로 랩 도구를 사용하여 각 핵심 Web Vital을 측정할 수 있습니다. 이는 사이트가 시작되기 전에 사이트의 성능에 대한 아이디어를 얻으려는 사람들에게 특히 유용합니다. 그러나 필드 메트릭을 무시할 수 있다는 의미는 아닙니다. 사용자 경험은 다양한 요인의 영향을 받습니다. 예에는 네트워크 상태 및 사용자 측에서 실행될 수 있는 추가 프로그램이 포함됩니다. 따라서 사이트가 가동되고 실행되면 현장 도구 테스트를 활용하는 것이 가장 좋습니다. 모든 것이 올바른 상태인지 확인하는 간단한 방법입니다.

알아야 할 기타 지표

포함된 핵심 웹 필수 요소가 고려해야 할 가장 중요한 요소이지만 고려해야 할 다른 가치 있는 웹 품질 측정항목이 있습니다. 결국 사이트 성능과 클라이언트의 사이트 즐거움을 향상시키는 것이 바람직합니다. 이러한 측정은 종종 웹 페이지 진단을 미세 조정하는 데 도움이 됩니다. 여기에는 사이트에서 사용자의 로딩 경험에 중요한 첫 번째 바이트까지의 시간과 같은 측정값과 사이트의 상호 작용에 문제가 있는 경우 도움이 되는 대화형 시간이 포함됩니다. 둘 다 중요하지만 현장에서 측정할 수 없으므로 주요 핵심 웹 바이탈과 동일한 상태가 부여되지 않습니다.

Lighthouse 6.0은 어떻습니까?

사이트의 품질을 평가하는 데 관심이 있다면 빠른 진단을 원하는 경우 시작할 수 있는 도구 중 하나가 Lighthouse입니다. 이 감사 프로그램은 자동화되어 있으며 Chrome DevTools에서 Chrome 스토어를 통해 사용 가능한 확장 프로그램이나 노드 모듈 및 CLI로 사용할 수 있습니다.

Lighthouse의 최신 버전은 FDI 및 CLS와 같은 핵심 웹 필수 요소에 대한 Google의 강조를 통합하고 이러한 측정항목과 관련하여 사이트가 어떻게 수행되는지에 대한 평가를 제공합니다. 이제 Lighthouse에서 사이트와 관련하여 제공하는 성능 점수가 이러한 새 모델을 포함하도록 업데이트되었습니다. 즉, 이전의 가중치 모델이 이제 다음과 같이 표시되도록 조정되었습니다.

이러한 새로운 변경 사항은 사이트의 성능 평가에 실질적인 영향을 미칩니다. 사이트의 20%만이 평가 점수가 개선된 것으로 나타났지만, 모든 사이트의 약 50%는 새로 구현된 가중치 척도로 점수가 5점 이상 하락했습니다.

Chrome 개발자 도구

Lighthouse와 같은 Chrome DevTools는 웹 개발자에게 더 나은 서비스를 제공하기 위해 몇 가지 새로운 변경 사항을 경험했습니다. 이러한 변경 사항 중 가장 중요한 것은 이전 반복에서 빈번한 문제와 어수선함을 겪었던 문제 탭의 수정입니다. 또한 성능 패널은 이제 로드 성능을 기록한 후 페이지 하단에 총 차단 시간을 기록합니다. 이 도구는 페이지가 작동하는 것처럼 보이지만 JavaScript가 메인 스레드를 차단하여 현재 페이지에서 사용자 입력이 작동하지 않도록 방지하기 때문에 실제로 사용할 수 없는 시간을 측정합니다. 마지막으로 Chrome UX 대시보드는 이제 콘텐츠 웹 바이탈별로 페이지를 분류하여 사용자가 사이트의 성능을 경쟁업체 및 업계 전체의 성능과 비교할 수 있습니다.

간단히 말해서 핵심 성능 평가는 웹 페이지에서 사용자 경험을 측정한 것입니다. 상황이 발전함에 따라 사소한 방식과 중요한 방식 모두에서 변경될 가능성이 있습니다. 웹페이지를 최적화할 때 건강한 핵심 웹 바이탈을 유지하려고 노력하십시오. 그러면 사이트를 방문하는 사람들을 만족시킬 수 있을 것입니다.