핵심 Web Vitals: 성능 병목 현상을 식별하는 7가지 도구 및 기술
게시 됨: 2021-07-19Core Web Vitals(CWV)는 현재 화두입니다. 여기에서는 2021년 5월에 있을 Google 순위 업데이트에 대비하여 웹사이트 성능 문제를 식별하는 데 사용할 수 있는 몇 가지 도구를 살펴보겠습니다.
Core Web Vitals에 대한 복습이 필요하십니까? Core Web Vitals Explained 기사에서 이것이 무엇이며 최적화하는 방법을 알아보십시오.
CWV 메트릭의 자동화된 모니터링
테스트 후 수동으로 테스트를 실행할 필요 없이 시간이 지남에 따라 모니터링하려는 여러 웹사이트 또는 주요 페이지가 있는 경우 Digital Inspiration의 이 스프레드시트가 적합할 수 있습니다. Lighthouse PageSpeed API 키를 잡고 일부 URL을 연결하기만 하면 됩니다!
스프레드시트는 주요 CWV 지표에 대한 잠재적인 성능 문제와 이러한 문제가 발생한 시기를 식별하는 데 도움이 되며, 이를 통해 원인이 무엇인지에 대한 단서를 제공할 수 있습니다. 또한 웹 사이트가 성장함에 따라 또는 기본 페이지 속도 알고리즘이 변경될 때 속도 점수가 시간이 지남에 따라 자연스럽게 변경될 수 있는 방법을 설명하는 데 사용할 수도 있습니다.
우리는 이 스프레드시트의 수정된 버전을 몇 달 동안 사용해 왔으며 여러 웹사이트의 성능을 개선할 기회를 찾는 데 도움이 되었습니다.
PageSpeed 인사이트
Google의 PageSpeed Insights는 모바일 및 데스크톱 장치 모두에서 성능 및 CWV 관련 문제에 대한 초기 최상위 조사에 사용하는 도구입니다. 보고서에는 '필드 데이터'가 포함됩니다. 반복 가능하고 일관된 테스트에 유용한 페이지 로드를 시뮬레이션하는 Lighthouse 'Lab' 데이터와 함께 실제 사용자가 웹 사이트를 경험하는 방법.
핵심 Web Vital 메트릭은 색상으로 구분된 단순한 표시기로 명확하게 강조 표시됩니다. 불량 메트릭은 빨간색으로 강조 표시되고 양호는 녹색으로 강조 표시됩니다. 이러한 메트릭을 결합하여 전체 속도 점수를 제공하며 녹색 '통과'를 위해서는 90% 이상이 필요합니다.
일련의 권장 사항 및 진단도 이러한 보고서에 제공되며, 저장할 수 있는 총 시간(초) 측면에서 가장 큰 영향을 미치는 항목별로 정렬됩니다.
Chrome DevTools 성능 모니터
성능 및 CWV 관련 문제에 대한 보다 자세한 분석을 위해 저는 종종 DevTools 내에서 Chrome의 성능 모니터를 사용하며 제가 사용하는 주요 CWV 지표 중 일부는 아래 스크린샷에 번호가 매겨져 있습니다.
- 먼저 LCP 및 CLS 요소가 종종 다른 해상도에서 변경되기 때문에 성능 모니터를 올바른 해상도에서 실행하고 있는지 확인해야 합니다. PageSpeed Insights 모바일 보기를 복제하기 위해 350 x 636 픽셀로 설정했습니다.
- 보고서를 실행하기 전에 모바일 장치의 연결 및 성능을 시뮬레이션할 수도 있습니다. 나는 종종 빠른 3g 및 4x CPU 속도 저하를 선택합니다.
- 보고서가 생성된 후 LCP 메트릭을 선택하면 가장 큰 요소가 무엇인지 식별합니다. 이것은 가능한 한 FCP(First Contentful Paint)에 가까워야 합니다. 공백이 있는 경우 가장 큰 요소를 식별하고 전달하는 과정을 간소화해야 합니다.
- 긴 CPU 작업은 회색 막대의 빨간색 대각선으로 강조 표시됩니다. 이는 종종 노란색 막대로 표시되는 더 무거운 JavaScript로 인해 발생하며 상호 작용 측정항목(FID, TBT 및 TTI)에 영향을 미칩니다. 아래 막대를 드릴다운하면 일반적으로 문제가 되는 JavaScript 파일 및 기능을 가리킵니다.
- Layout Shifts는 이러한 빨간색 막대로 강조 표시되며 이를 선택하면 일반적으로 어떤 요소가 이동되었는지 강조 표시됩니다. 이들 중 많은 양은 더 높은 CLS 값을 생성합니다.
- 프레임 보기는 콘텐츠가 로드될 때 콘텐츠가 표시되고 레이아웃이 이동하는 방식을 시각적으로 강조 표시하는 좋은 방법이 될 수 있습니다. CLS 값이 높은 경우 프레임에서 원인이 무엇인지 분명히 알 수 있습니다. 이 예에서 큰 쿠키 배너로 인해 콘텐츠가 아래로 밀려나면서 레이아웃이 이동합니다.
Web Vitals Chrome 확장 프로그램
핵심 SERP 핵심
SERP Vitals 확장은 검색 결과에 직접 LCP, FID 및 CLS 메트릭에 대한 편리한 표시기를 표시합니다. 경쟁사 분석에 유용하며 웹 페이지를 방문하기 전에 웹 페이지의 속도를 빠르게 표시할 수 있습니다.
데이터는 Chrome 사용자 경험 보고서(CrUX)에 의해 실제 사용자로부터 익명으로 컴파일됩니다. 그러나 새로운 사이트나 트래픽이 거의 없는 사이트에서는 충분한 데이터 포인트를 얻지 못하기 때문에 모든 사이트에서 사용할 수 있는 것은 아닙니다. 
웹 바이탈
편리한 Web Vitals 확장 프로그램은 Chrome의 데스크톱 사용자에 대한 3가지 주요 CWV 측정항목을 실시간으로 측정하고 신호등 색상은 웹사이트를 탐색할 때 빠른 표시기를 제공합니다. 외부에서 수집한 사용자 데이터에 의존하지 않기 때문에 로컬 환경에서 작업하는 개발자가 문제를 조기에 파악하는 데 유용할 수 있습니다. 
등대
Lighthouse Extensions는 Chrome DevTools 내에서 사용할 수 있는 동일한 보고 기능에 대한 빠른 경로를 제공하고 CrUX를 통해 실제 사용자의 Field Data가 아닌 Lighthouse API를 사용하여 Lab Data를 가져옵니다.
성능 보고서는 PageSpeed Insights 모바일 분석과 매우 유사하여 유사한 진단 및 권장 사항을 제공합니다. SEO, 접근성 및 모범 사례에 대한 추가 보고서도 생성됩니다.
Treo 사이트 속도 시각화 도우미
https://treo.sh/sitespeed의 시각화 도우미는 시간 경과에 따른 CWV 메트릭을 보여주며 장치, 연결 및 지리적 지역별로 필터링할 수 있습니다. 매주 업데이트되며 CrUX 보고서의 데이터를 사용합니다.
bbc.co.uk에 대한 아래 예에서 CLS 메트릭이 최근 3개월 동안 어떻게 크게 감소하여 모든 핵심 메트릭에 대해 녹색 '통과' 결과를 제공하는지 확인할 수 있습니다. 이는 시간 경과에 따른 CWV 메트릭의 성능을 분석하거나 경쟁사 분석을 수행하는 좋은 방법입니다.
타사 요청 시각화
FID, TTI 및 TBT에 대한 상호 작용 메트릭은 종종 문제를 해결하기 어려울 수 있습니다. PageSpeed Insights는 가장 무거운 타사 스크립트를 식별하는 데 유용할 수 있지만 때로는 적절한 시각화가 이러한 스크립트의 영향을 훨씬 쉽게 전달할 수 있습니다.
요청 매핑 도구 https://requestmap.herokuapp.com/이 이에 적합합니다. 생성된 맵에는 각 타사 요청에 대한 노드가 포함되어 있으며 노드가 클수록 영향이 큰 스크립트를 나타냅니다. 상호 작용 메트릭이 좋지 않은 경우 이 지도에서 많은 노드를 볼 수 있습니다.
다음은 대화형 TTI 측정에 소요되는 시간이 무려 26초인 사이트의 예입니다. 지도를 한 눈에 보면 전체 요청의 절반 이상을 차지하는 상단에 수많은 짙은 파란색 노드로 표시되는 라이브 채팅 위젯이 표시됩니다.
요청 맵 도구는 스크립트 또는 기타 자산이 로드되는 위치를 결정하는 좋은 방법이기도 합니다. 이 예에서 노란색 Google 태그 관리자 노드에서 직접 오는 여러 노드를 아래에서 볼 수 있습니다.
WebPageTest의 폭포
WebPageTest 보고서는 PageSpeed Insights보다 훨씬 더 자세한 정보를 제공하며 다양한 장치와 위치에서 생성할 수 있습니다.
페이지에 있는 모든 자산의 로드 순서를 시각화하는 폭포수 분석에 이 도구를 자주 사용합니다. 이것은 중요한 '스크롤 없이 볼 수 있는 부분' 콘텐츠를 간소화하려고 할 때 특히 유용할 수 있습니다. 예를 들어, LCP에 대해 최적화하고 접기 요소 위의 가장 큰 요소가 이미지 또는 타이포그래피인 경우 가장 큰 이미지 및 글꼴 파일에 사전 로드를 구현하고 이러한 사전 로드된 자산이 폭포수 상단에 나타나는지 확인해야 할 수 있습니다. . 
CWV가 귀하의 사이트에 어떤 영향을 미칠지 확실하지 않다면 지금 바로 연락주십시오.