이제 Web Vitals 확장 프로그램에 Core Web Vitals 문제의 근본 원인을 파악하는 데 도움이 되는 디버깅 정보가 더 많이 표시됩니다.
게시일: 2023년 5월 4일
Web Vitals 확장 프로그램을 사용하면 개발자가 Core Web Vitals 문제를 측정하고 해결하는 데 도움이 되는 Core Web Vitals 진단 정보에 쉽게 액세스할 수 있습니다. 이 도구는 개발자가 웹사이트 환경을 개선하는 데 도움이 되도록 Chrome팀에서 제공하는 다른 도구를 보완합니다.
개발자가 성능 문제를 더 쉽게 이해하고 해결할 수 있도록 디버그 정보를 추가로 제공하도록 확장 프로그램을 업데이트했습니다.
콘솔에 디버그 정보 표시
Web Vitals 확장 프로그램에는 오래 전부터 '콘솔 로깅' 디버그 옵션이 있었습니다. 옵션 화면에서 사용 설정할 수 있습니다.
이 마지막 업그레이드 이전에는 확장 프로그램을 뒷받침하는 web-vitals library의 출력을 JSON 객체에 로깅했습니다.
그런 다음 이 객체를 펼쳐 전체 세부정보를 확인하고 LCP 이미지와 같은 요소를 마우스 오버하여 기본 패널에서 강조 표시할 수 있습니다.
이는 유용했지만 출력 형식이 특히 사용자 친화적이지 않았으며 더 나은 개발자 환경을 제공할 수 있다고 생각했습니다. 따라서 Google에서는 가장 중요한 정보를 더 많이 표시하는 동시에 더 자세한 정보를 원하는 사용자를 위해 전체 객체를 포함하도록 확장 프로그램을 개선했습니다.
각 측정항목의 새로운 디버그 정보
새 버전에서는 문제를 찾고 해결하는 데 도움이 되도록 더 읽기 쉬운 형식으로 새로운 디버그 정보를 추가했습니다. 측정항목마다 서로 다른 정보가 제공됩니다.
LCP 디버그 정보
최대 콘텐츠 렌더링 시간(LCP)의 경우 요소와 LCP 최적화 가이드에 자세히 설명된 4단계의 세부정보가 모두 표시됩니다.
LCP 시간(2,876밀리초, 약 2.9초)은 '개선 필요' 카테고리에 속하므로 황색으로 강조 표시됩니다.
이 예에서는 Resource load time이 가장 긴 시간이므로 LCP 시간을 개선하려면 별도의 도메인에서 호스팅하지 않도록 하거나 더 작은 이미지 또는 더 효율적인 형식을 사용하여 LCP 시간을 최적화해 봅니다. 이 경우 출력을 보여주기 위해 인위적으로 속도가 느려지기 때문입니다. web.dev는 속도가 빠른 사이트입니다.
이 요소 위로 마우스를 가져가면 이미지가 강조 표시됩니다.
요소를 마우스 오른쪽 버튼으로 클릭하면 요소 패널에 요소가 표시됩니다.
여기서 LCP 요소는 이미지이며 오른쪽 콘솔에서 이미지 위로 마우스를 가져가면 왼쪽 사이트에서도 해당 요소가 강조표시됩니다.
CLS 디버그 정보
이제 누적 레이아웃 변경(CLS)에 기여하는 이동도 표시되며 마우스를 가져가면 관련 요소가 강조표시됩니다.
위 스크린샷에는 두 가지 전환이 표시됩니다. 첫 번째는 두 요소로 구성되며(배너 이미지가 로드되고 그 아래의 콘텐츠가 다운로드된 경우) 두 번째는 4개의 요소로 구성됩니다(동적 광고가 로드되고 페이지의 대부분이 아래로 이동된 경우).
오른쪽 콘솔의 스크린샷에서 h2 요소 위로 마우스를 가져가면 왼쪽 사이트의 요소가 강조표시됩니다.
FID 디버그 정보
첫 입력 지연(FID)의 경우 영향을 받는 요소(마우스를 가져가면 페이지에서 강조 표시할 수 있음)와 상호작용 유형을 평소와 같이 전체 JSON 객체와 함께 표시합니다.
INP 디버그 정보
다음 페인트에 대한 상호작용(INP)에 두 가지 새로운 로그가 추가되었습니다.
- INP - 가장 긴 상호작용
- 상호작용 - 모든 상호작용
INP 측정항목
먼저 INP 측정항목이 변경될 때 강조 표시합니다.
LCP와 마찬가지로 확장 프로그램은 INP 시간을 분류하여 다음 세 단계를 표시합니다.
- 입력 지연
- 처리 기간
- 표시 지연
이를 통해 다른 이벤트로 인해 지연되어 이벤트가 느려졌는지(입력 지연), 코드로 인해 이벤트 핸들러 자체가 느려졌는지(처리 시간), 후처리 렌더링 지연이 원인인지(표시 지연), 아니면 이 중 두 가지 이상의 조합으로 인해 느려졌는지 확인할 수 있습니다.
상호작용 수
이전 상호작용이 기본 스레드를 차단하여 INP가 느려지고 입력 지연이 발생할 수 있습니다. 이러한 이유로 Google에서는 모든 상호작용을 INP 로깅과 유사한 형식으로 나열합니다.
이렇게 하면 웹사이트와 상호작용하고 콘솔에서 어떤 상호작용 조합이 INP 문제를 일으킬 가능성이 있는지 확인하여 웹사이트를 '실시간으로 추적'할 수 있습니다.
또한 가장 큰 INP 상호작용뿐만 아니라 느린 상호작용을 여러 개 파악할 수 있으므로 응답성을 개선할 때 헛수고하는 느낌을 피할 수 있습니다.
콘솔 로그 필터링
이러한 모든 추가 정보는 유용하지만 Core Web Vitals와 관련 없는 다른 개발을 진행 중이거나 특정 Core Web Vitals에만 관심이 있는 경우 방해가 될 수 있습니다.
DevTools의 콘솔 필터링 옵션을 사용하여 일부 또는 모든 메시지를 필터링할 수 있습니다.
- 확장 프로그램 메시지를 모두 삭제하려면 옵션에서 이 기능을 사용 중지하거나
-Extension필터를 사용하세요. - LCP만 보려면
Web Vitals Extension LCP필터를 사용하면 됩니다. - INP 및 상호작용만 보려면
Web Vitals Extension -LCP -CLS -FID필터를 사용하면 됩니다.
이 확장 프로그램의 옵션 수를 최소화하기 위해 노력하고 있지만 DevTools 필터링이 충분하지 않고 여기에서 옵션을 사용하고 싶다면 GitHub 문제를 제출하여 알려주세요.
결론
최신 버전의 확장 프로그램에서 제공하는 새로운 디버그 옵션이 유용하며 Core Web Vitals 문제를 더 쉽게 식별하고 해결하여 웹사이트의 사용자 경험을 개선하는 데 도움이 되기를 바랍니다.
개발자 컴퓨터에서의 환경이 실제 사용자의 환경을 대표하지 않을 수 있다는 점에 유의하세요. 확장 프로그램에서 사이트의 CrUX 필드 데이터를 확인하는 방법에 관한 이전 블로그 게시물을 참고하여 사용자와의 환경 일치를 파악하세요.
이러한 개선사항에 관한 의견이나 GitHub Issue Tracker에 관한 다른 제안사항이 있으면 알려주세요.