코어 웹 바이탈 측정 도구

이제 즐겨 사용하는 개발자 도구에서 코어 웹 바이탈을 측정할 수 있습니다.

최근 발표된 웹 바이탈 이니셔티브는 웹에서 우수한 사용자 환경을 제공하는 데 모든 사이트에서 필수적인 품질 신호에 관한 통합 가이드를 제공합니다. 웹 개발자를 위한 모든 인기 있는 Google 도구가 이제 코어 웹 바이탈 측정을 지원하여 사용자 환경 문제를 더 쉽게 진단하고 해결할 수 있게 되었습니다. 여기에는 Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev의 측정 도구, 웹 바이탈 Chrome 확장 프로그램, 새로운 Chrome UX 보고서 API가 포함됩니다.

이제 Google 검색에서 코어 웹 바이탈을 페이지 경험 평가의 기반으로 포함함에 따라 이러한 측정항목을 최대한 활용하고 실행 가능한 상태로 유지하는 것이 중요합니다.

코어 웹 바이탈로 사용자 환경을 최적화하는 여정을 시작하려면 다음 워크플로를 시도해 보세요.

• Search Console의 새로운 코어 웹 바이탈 보고서를 사용하여 필드 데이터를 기반으로 확인이 필요한 페이지 그룹을 식별합니다.
• 작업이 필요한 페이지를 식별한 후 PageSpeed Insights (Lighthouse 및 Chrome UX 보고서 기반)를 사용하여 페이지에서 실험실 및 필드 문제를 진단하세요. PageSpeed Insights (PSI)는 Search Console을 통해 이용하거나 PSI에 직접 URL을 입력할 수 있습니다.
• 실험실에서 로컬로 사이트를 최적화할 준비가 되셨나요? Lighthouse와 Chrome DevTools를 사용하여 코어 웹 바이탈을 측정하고 정확히 무엇을 수정해야 하는지에 관한 실행 가능한 안내를 받으세요. 웹 바이탈 Chrome 확장 프로그램을 사용하면 데스크톱에서 측정항목을 실시간으로 볼 수 있습니다.
• 코어 웹 바이탈의 커스텀 대시보드가 필요하신가요? 필드 데이터에는 업데이트된 CrUX Dashboard 또는 새로운 Chrome UX Report API, 실험실 데이터의 경우 PageSpeed Insights API를 사용합니다.
• 안내가 필요하신가요? web.dev/measure를 사용하면 PSI 데이터를 사용하여 페이지를 측정하고 최적화를 위해 우선순위가 지정된 가이드 및 Codelab을 제공할 수 있습니다.
• 마지막으로 pull 요청에 Lighthouse CI를 사용하여 변경사항을 프로덕션에 배포하기 전에 코어 웹 바이탈에 회귀가 없는지 확인합니다.

소개를 통해 각 도구의 구체적인 업데이트를 살펴보겠습니다.

등대

Lighthouse는 자동화된 웹사이트 감사 도구로 개발자가 문제를 진단하고 사이트의 사용자 환경을 개선할 수 있는 기회를 파악하는 데 도움을 줍니다. 성능 및 접근성을 포함하여 실험실 환경에서 사용자 경험 품질의 여러 측정기준을 측정합니다. 최신 버전 Lighthouse (6.0, 2020년 5월 중순 출시)에는 추가 감사, 새로운 측정항목, 새로 구성된 성능 점수가 포함되어 있습니다.

Lighthouse 6.0에서는 보고서에 세 가지 새로운 측정항목이 도입됩니다. 이러한 새로운 측정항목 중 두 가지인 최대 콘텐츠 페인트 (LCP)와 누적 레이아웃 변경 (CLS)은 코어 웹 바이탈의 실험실 구현이며 사용자 환경 최적화에 중요한 진단 정보를 제공합니다. 새로운 측정항목은 사용자 경험 평가에 있어 중요성을 고려하여 측정되고 보고서에 포함될 뿐만 아니라 실적 점수 계산에도 반영됩니다.

Lighthouse에 포함된 세 번째 새로운 측정항목인 총 차단 시간 (TBT)은 또 다른 Core Web Vitals 측정항목인 필드 측정항목 최초 입력 반응 시간 (FID)과 상관관계가 있습니다. Lighthouse 보고서에 제공된 권장사항을 따르고 점수를 기준으로 최적화하면 사용자에게 최상의 환경을 제공할 수 있습니다.

Lighthouse에서 지원하는 모든 제품은 최신 버전을 반영하도록 업데이트됩니다. Lighthouse CI는 병합 및 배포 전에 pull 요청에서 코어 웹 바이탈을 쉽게 측정할 수 있도록 지원합니다.

Lighthouse의 최신 업데이트에 관한 자세한 내용은 Lighthouse 6.0의 새로운 기능 블로그 게시물을 참고하세요.

PageSpeed Insights

PageSpeed Insights (PSI)는 모바일과 데스크톱 기기 모두에서 페이지의 실험실 및 필드 성능을 보고합니다. 이 도구는 실제 사용자가 페이지를 경험하는 방식에 대한 개요 (Chrome UX 보고서 제공)와 사이트 소유자가 페이지 경험을 개선할 수 있는 방법에 관한 실행 가능한 권장사항 모음 (Lighthouse에서 제공)을 제공합니다.

PageSpeed Insights 및 PageSpeed Insights API도 Lighthouse 6.0을 사용하도록 업그레이드되어 이제 보고서의 실험실 및 필드 섹션 모두에서 코어 웹 바이탈 측정을 지원합니다. 코어 웹 바이탈에는 아래와 같이 파란색 리본으로 주석이 달립니다.

Search Console은 사이트 소유자에게 주의가 필요한 페이지 그룹에 대한 개요를 제공하는 반면, PSI는 페이지 경험을 개선할 수 있는 페이지별 기회를 파악하는 데 도움이 됩니다. PSI에서는 보고서 상단에서 페이지가 모든 코어 웹 바이탈에서 우수한 환경을 위한 기준점을 충족하는지(코어 웹 바이탈 평가를 통과 또는 코어 웹 바이탈 평가를 통과하지 못함) 명확하게 확인할 수 있습니다.

CrUX

Chrome UX 보고서 (CrUX)는 수백만 개의 웹사이트에 대한 실제 사용자 환경 데이터의 공개 데이터 세트입니다. 모든 코어 웹 바이탈의 필드 버전을 측정합니다. 실험실 데이터와 달리 CrUX 데이터는 현장에서 사용에 동의한 사용자로부터 가져옵니다. 이 데이터를 사용하여 개발자는 자체 웹사이트 또는 경쟁사 웹사이트의 실제 사용자 경험 분포를 파악할 수 있습니다. 사이트에 RUM이 없더라도 CrUX를 사용하면 빠르고 쉽게 코어 웹 바이탈을 평가할 수 있습니다. BigQuery의 CrUX 데이터 세트는 모든 코어 웹 바이탈의 세분화된 성능 데이터를 포함하며 출처 수준의 월간 스냅샷으로 제공됩니다.

사용자를 위해 사이트가 어떤 실적을 보이는지 정확히 알 수 있는 유일한 방법은 사용자가 사이트를 로드하고 상호작용할 때 현장에서 사이트의 실적을 측정하는 것입니다. 이러한 유형의 측정을 일반적으로 Real User Monitoring(RUM)이라고 합니다. 사이트에 RUM이 없더라도 CrUX를 사용하면 빠르고 쉽게 코어 웹 바이탈을 평가할 수 있습니다.

CrUX API 소개

오늘 Google은 다음과 같은 필드 측정항목에 대해 개발 워크플로를 원본 및 URL 수준 품질 측정과 쉽게 통합할 수 있는 빠르고 무료인 방법인 CrUX API를 발표하게 되어 기쁩니다.

• 콘텐츠가 포함된 최대 페인트
• 누적 레이아웃 변경
• 최초 입력 반응 시간
• 콘텐츠가 포함된 첫 페인트

개발자는 출처 또는 URL을 쿼리하고 다양한 폼 팩터별로 결과를 분류할 수 있습니다. 매달 집계되는 BigQuery 데이터 세트와 달리 API는 매일 업데이트되며 지난 28일간의 데이터를 요약합니다. 이 API에는 다른 API인 PageSpeed Insights API (일일 요청 25,000건)에 적용되는 것과 동일하게 완화된 공개 API 할당량이 적용됩니다.

다음은 CrUX API를 사용하여 코어 웹 바이탈 측정항목을 좋음, 개선이 필요함, 느림의 분포로 시각화하는 데모입니다.

향후 출시 버전에서는 추가 CrUX 데이터 세트 측정기준 및 측정항목에 액세스할 수 있도록 API를 확장할 계획입니다.

개편된 CrUX 대시보드

새롭게 디자인된 CrUX 대시보드를 사용하면 시간 경과에 따른 출처의 실적을 쉽게 추적할 수 있으며, 이제 모든 코어 웹 바이탈 측정항목의 분포를 모니터링할 수 있습니다. 대시보드를 시작하려면 web.dev에서 튜토리얼을 확인하세요.

사이트의 실적을 한 눈에 더 쉽게 확인할 수 있도록 새로운 코어 웹 바이탈 방문 페이지를 도입했습니다. Google은 모든 CrUX 도구에 대한 의견을 환영합니다. 의견이나 질문이 있으면 @ChromeUXReport Twitter 계정 또는 Google 그룹으로 문의하세요.

Chrome DevTools Performance 패널

환경 섹션에서 레이아웃 변경 이벤트 디버그

Chrome DevTools의 Performance 패널에는 예기치 않은 레이아웃 변경을 감지하는 데 도움이 되는 새로운 환경 섹션이 있습니다. 이는 누적 레이아웃 변경의 원인이 되는 페이지의 시각적 불안정성 문제를 찾고 수정하는 데 유용합니다.

레이아웃 변경(Layout Shift)을 선택하여 Summary(요약) 탭에서 세부정보를 확인합니다. 이동이 발생한 위치를 시각화하려면 이전 값 및 다음으로 이동됨 필드 위로 마우스를 가져갑니다.

바닥글의 총 차단 시간을 통한 디버그 상호작용 준비

총 차단 시간 (TBT) 측정항목은 실험실 도구에서 측정할 수 있으며 최초 입력 반응 시간을 측정하는 훌륭한 프록시입니다. TBT는 기본 스레드가 입력 반응성을 방지할 만큼 충분히 오랫동안 차단된 경우 콘텐츠가 포함된 첫 페인트 (FCP)와 상호작용 시작 시간 (TTI) 사이의 총 시간을 측정합니다. 실험실에서 TBT를 개선하는 성능 최적화를 통해 필드의 FID가 개선될 것입니다.

이제 페이지 성능을 측정할 때 TBT가 Chrome DevTools의 성능 패널 바닥글에 표시됩니다.

1. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
2. 실적 탭을 클릭합니다.
3. 녹화를 클릭합니다.
4. 수동으로 페이지를 새로고침합니다.
5. 페이지가 로드될 때까지 기다린 후 녹화를 중지합니다.

자세한 내용은 DevTools의 새로운 기능 (Chrome 84)을 참조하세요.

Search Console

Search Console의 새로운 코어 웹 바이탈 보고서를 사용하면 CrUX의 실제 (필드) 데이터를 바탕으로 사이트에서 주의가 필요한 페이지 그룹을 식별할 수 있습니다. URL 실적은 상태, 측정항목 유형, URL 그룹 (유사한 웹페이지 그룹)별로 그룹화됩니다.

보고서는 세 가지 코어 웹 바이탈 측정항목인 LCP, FID, CLS를 기반으로 합니다. 이러한 측정항목에 대한 최소량의 보고 데이터가 없는 URL은 보고서에서 생략됩니다. 새 보고서를 사용하여 출처의 실적을 전체적으로 확인하세요.

코어 웹 바이탈 관련 문제가 있는 페이지 유형을 식별한 후 PageSpeed Insights를 사용하여 대표 페이지를 위한 특정 최적화 제안사항에 관해 알아볼 수 있습니다.

web.dev

https://pagespeed.web.dev/를 사용하면 개선 방법에 관한 가이드 및 Codelab의 우선순위가 지정된 목록을 제공하여 시간 경과에 따른 페이지 성능을 측정할 수 있습니다. PageSpeed Insights를 통해 측정됩니다. 이제 측정 도구에서 다음과 같이 코어 웹 바이탈 측정항목도 지원합니다.

Web Vitals 확장 프로그램

웹 바이탈 확장 프로그램은 (데스크톱) Chrome의 세 가지 코어 웹 바이탈 측정항목을 실시간으로 측정합니다. 이는 개발 워크플로 초기에 문제를 포착하는 데 유용하며 웹을 탐색할 때 Core Web Vitals의 성능을 평가하는 진단 도구로도 사용됩니다.

이제 Chrome 웹 스토어에서 확장 프로그램을 설치할 수 있습니다. 이 정보가 도움이 되기를 바랍니다. 프로젝트 개선을 위한 참여와 프로젝트의 GitHub 저장소에 관한 의견을 보내주세요.

간단한 하이라이트

마무리 취할 수 있는 조치:

• DevTools에서 Lighthouse를 사용하여 사용자 환경을 최적화하고 현장에서 코어 웹 바이탈을 성공적으로 활용할 수 있도록 준비하세요.
• PageSpeed Insights를 사용하여 실험실 및 필드 코어 웹 바이탈 성능을 비교합니다.
• 새로운 Chrome User Experience Report API를 사용해 지난 28일 동안 Core Web Vitals를 기준으로 출처 및 URL의 실적을 손쉽게 확인해 보세요.
• DevTools Performance 패널의 Experience 섹션과 바닥글을 사용하여 특정 Core Web Vitals를 자세히 살펴보고 디버그합니다.
• 출처의 필드 실적 요약을 확인하려면 Search Console의 코어 웹 바이탈 보고서를 사용하세요.
• 웹 바이탈 확장 프로그램을 사용하여 코어 웹 바이탈과 비교하여 페이지의 성능을 실시간으로 추적합니다.

6월에 web.dev Live에서 코어 웹 바이탈 도구에 관한 자세한 내용을 다룰 예정입니다. 이벤트에 관한 새로운 소식을 받아보려면 신청하세요.

~ 작성자: Elizabeth 및 Addy, WebPerf Janitors