여러 Google 도구를 함께 사용하여 웹사이트를 효과적으로 감사, 개선, 모니터링하세요.
코어 웹 바이탈은 로드 성능, 사용자 입력에 대한 반응성, 레이아웃 안정성과 같은 기준에 따라 사용자 환경을 평가하는 일련의 측정항목입니다.
이 가이드에서는 웹사이트의 Core Web Vitals를 개선하기 위한 워크플로를 살펴보지만 이 워크플로가 시작되는 지점은 자체 필드 데이터를 수집하고 있는지에 따라 다릅니다. 종료 지점은 사용자 환경 문제를 진단하고 해결하는 데 유용한 Google 도구에 따라 달라질 수 있습니다.
Core Web Vitals는 현장에서 가장 잘 측정됩니다.
코어 웹 바이탈은 사용자 중심 측정항목인 사용자의 웹사이트 경험을 측정하도록 특별히 설계되었습니다. Lighthouse와 같은 실험실 기반 도구는 잠재적인 성능 문제와 권장사항을 강조 표시하는 진단 도구입니다. 실험실 기반 도구는 사전 정의된 특정 조건에서 실행되며 사용자가 경험하는 실제 Core Web Vitals 측정값을 반영하지 않을 수 있습니다.
예를 들어 Lighthouse는 시뮬레이션된 데스크톱 또는 모바일 환경에서 시뮬레이션 제한으로 테스트를 실행하는 실험실 기반 도구입니다. 느린 네트워크 및 기기 상태에 대한 이러한 시뮬레이션은 성능 문제를 진단할 때 유용하지만, 네트워크 조건 및 기기 기능의 매우 다양한 하나일 뿐이므로 사이트 사용자가 경험하는 것을 반영하지 못할 수 있습니다.
Lighthouse와 같은 실험실 기반 도구는 일반적으로 '콜드 로드'를 수행합니다. 완전히 새로운 방문자로 간주할 수 있습니다. 일반적으로 로드가 가장 느릴 수 있지만, 실제로 방문자는 이전에 방문한 적이 있거나 사이트를 탐색할 때 일부 애셋이 캐시될 수 있습니다. 신규 방문자 및 도구 또한 쿠키 배너 또는 사용자에게 표시되는 기타 콘텐츠에 따라 사이트 환경이 달라질 수 있습니다.
간단히 말해, 실험실 기반 도구는 잠재적인 성능 문제를 파악하고 디버그 및 반복하는 데 도움이 되지만 실제로 웹사이트를 경험하는 방문자 수를 나타내지는 않을 수 있습니다. 현장 데이터를 사용하여 실제 성능을 측정하고 Lighthouse와 같은 실험실 기반 도구를 사용하여 개선 방법을 진단합니다. Lighthouse를 사용하는 경우 섹션도 참고하세요.
Google에서는 Chrome 사용자 환경 (CrUX) 보고서를 통해 코어 웹 바이탈을 측정합니다. 실제 Chrome 사용자로부터 수집된 공개 데이터 세트입니다. 사이트의 Core Web Vitals를 보고하는 Google 및 서드 파티 도구의 핵심입니다.
하지만 CrUX에는 한계가 있습니다. 문제가 발생한 시점을 알려주지만 이유를 알려주는 데이터가 충분하지 않은 경우가 많습니다.
가능한 경우 자체 필드 데이터 수집
현장에서 웹사이트 성능을 개선하는 데 가장 적합한 데이터 세트는 직접 빌드하는 데이터 세트입니다. 먼저 웹사이트 방문자로부터 필드 데이터를 수집합니다. 방법은 조직의 규모 및 서드 파티 솔루션 비용을 지불할지 또는 자체적으로 솔루션을 만들지에 따라 다릅니다.
유료 솔루션은 Core Web Vitals (및 기타 성능 측정항목)를 거의 확실하게 측정하며, 일반적으로 결과 데이터를 자세히 살펴볼 수 있는 다양한 도구를 제공합니다. 상당한 리소스를 보유한 대규모 조직에서는 이 방법이 선호될 수 있습니다.
그러나 귀사는 대규모 조직에 속하지 않거나 제3자 솔루션을 구매할 수 있는 여력이 있는 조직의 일원이 아닐 수도 있습니다. 이 경우 Google의 web-vitals 라이브러리를 사용하여 모든 Web Vitals를 수집할 수 있습니다. 그러나 데이터의 보고, 저장, 분석 방식에 대한 책임은 사용자에게 있습니다.
이미 Google 애널리틱스를 사용하고 있지만 자체 필드 데이터 수집을 시작하지 않았다면 web-vitals 라이브러리를 사용하여 필드에서 수집된 웹 바이탈을 Google 애널리틱스로 전송하고 GA4의 BigQuery 내보내기를 사용하여 데이터에 대해 보고할 수 있습니다.
Google 도구 이해하기
자체 현장 데이터를 수집하고 있는지 여부와 관계없이 Core Web Vitals를 분석하는 데 유용한 Google 도구가 몇 가지 있습니다. 워크플로를 설정하기 전에 각 도구를 개략적으로 살펴보면 자신에게 가장 적합한 도구와 적합하지 않은 도구를 파악하는 데 도움이 됩니다.
Chrome 사용자 환경 보고서 (CrUX)
앞서 언급했듯이 CrUX는 수백만 개의 웹사이트에서 실제 Chrome 사용자 세그먼트로부터 수집한 현장 데이터의 공개 데이터 세트입니다. 여기에는 Core Web Vitals 측정항목과 트래픽이 충분한 웹사이트를 위한 기타 측정항목이 포함됩니다.
CrUX는 URL 또는 출처에서 CrUX 데이터 세트에 충분한 샘플이 있는 경우 출처 수준의 월별 BigQuery 데이터 세트 또는 URL 또는 출처 수준의 일일 API로 사용할 수 있습니다. BigQuery 데이터는 CrUX Dashboard에서도 볼 수 있기 때문에 사이트에서 과거 추세를 검토할 수 있습니다.
CrUX를 사용해야 하는 경우
자체 현장 데이터를 수집하더라도 CrUX가 여전히 유용합니다. CrUX는 Chrome 사용자의 하위 집합을 나타내지만 웹사이트의 현장 데이터를 비교하여 CrUX 데이터와 어떻게 일치하는지 확인하는 것이 유용합니다. 각각에는 장단점이 있으며 차이가 발생할 수 있습니다. 웹사이트에 대한 필드 데이터를 전혀 수집하지 않는 경우 CrUX는 특히 웹사이트가 데이터 세트에 표시되어 있는 경우 높은 수준의 개요를 제공하는 데 유용합니다.
CrUX를 직접 사용하거나 다른 도구 (아래에 언급된 도구 포함)를 사용할 수 있습니다. BigQuery 또는 API를 사용하여 CrUX 데이터 세트를 직접 사용하면 다른 도구에 표시되지 않는 데이터를 노출할 수 있습니다. 예를 들어 국가 수준 데이터는 다른 도구에서 사용할 수 없는 경우가 많거나 다른 도구에서 표시되지 않는 CrUX의 추가 측정항목을 확인하는 데 유용합니다.
CrUX를 사용하지 않아야 하는 경우
CrUX는 Chrome 사용자만을 나타내며, 심지어는 일부 Chrome 사용자만을 나타냅니다. 완전한 RUM 솔루션은 Web Vitals 측정항목을 지원하는 Chrome 및 다른 브라우저 전반의 더 많은 환경을 포함할 수 있습니다.
트래픽이 충분하지 않은 웹사이트는 CrUX 데이터 세트에 표시되지 않습니다. 이 경우 CrUX를 사용할 수 없으므로 자체 현장 데이터를 수집하여 웹사이트의 현장 실적을 파악해야 합니다. 또는 실험실 데이터를 사용해야 하지만 앞서 설명한 대로 대표성이 없다는 제한사항이 있을 수 있습니다.
CrUX가 제공하는 데이터는 지난 28일 동안의 이동 평균이므로 개선이 CrUX 데이터 세트에 반영되려면 상당한 시간이 걸리기 때문에 개발 중에는 이상적인 도구가 아닙니다.
마지막으로, 공개 데이터 세트인 CrUX는 제공할 수 있는 정보의 양과 이 데이터를 쿼리할 수 있는 방법으로 제한됩니다. 자체 RUM 데이터를 캡처하면 LCP 요소 같은 추가 세부정보를 수집하고 데이터를 더 세분화하여 문제를 식별할 수 있습니다. 로그인한 사용자가 로그아웃한 사용자보다 Core Web Vitals를 더 좋게 또는 나쁘게 경험하나요? LCP가 느린 사용자에게 특정 LCP 요소가 있나요? 어떤 상호작용으로 인해 높은 FID 및 INP 값이 발생하나요?
PageSpeed Insights (PSI)
PSI는 특정 페이지에 대해 Lighthouse의 CrUX 및 실험실의 필드 데이터를 보고하는 도구입니다. 자세한 내용은 개별 섹션을 참고하세요.
PSI를 사용해야 하는 경우
PSI는 모바일 및 데스크톱 사용자 모두 페이지 수준 또는 출처 수준에서 CrUX 성능을 평가하는 데 유용합니다. 페이지 또는 사이트의 Core Web Vitals를 처음 살펴보는 데 적합합니다. 또한 경쟁업체와 같은 다른 사이트의 Core Web Vitals 데이터를 확인할 수도 있습니다.
또한 PSI에서는 Lighthouse 데이터도 제공합니다. 이 데이터는 측정항목이 일치하는 경우 Core Web Vitals를 개선하는 데 유용한 권장사항을 제공합니다. 일치하지 않는 경우 Lighthouse 추천의 관련성이 떨어질 수 있습니다.
Lighthouse는 서버에서 실행되므로 DevTools에서 Lighthouse를 실행하는 것보다 더 일관된 기준을 설정할 수 있습니다.
PSI를 사용하지 않아야 하는 경우
PSI는 공개 URL에만 사용할 수 있습니다. 공개적으로 액세스할 수 없는 개발 사이트에서는 사용할 수 없습니다.
CrUX 데이터는 사이트 인기도 기준을 비롯한 특정 자격 기준을 충족하는 경우에만 사용할 수 있습니다. PSI는 페이지 또는 출처에 CrUX 데이터를 사용할 수 없는 경우에는 Lighthouse 실험실 데이터만 표시할 수 있으므로 덜 유용합니다.
마찬가지로, 테스트 중인 특정 URL이 아닌 출처 수준의 CrUX 데이터만 있는 경우 출처 수준 필드 데이터를 페이지 수준 실험실 진단에 연결하는 것의 유용성도 제한됩니다. 출처 수준 필드 데이터가 있으면 사이트 성능 요약으로 매우 유용한 정보이며 Lighthouse 감사가 도움이 될 수 있지만 이 경우 특히 주의해야 합니다.
마지막으로 CrUX에서 페이지 수준 데이터를 사용할 수 있지만 Lighthouse 실험실 데이터와는 다른 경우 Lighthouse의 권장사항이 제한적일 수 있습니다. 특히 로드 후 CLS 문제, 그리고 실험실 기반 감사가 유용하지 않은 대화형 Core Web Vitals (FID 및 INP)에서 이러한 상황이 발생할 수 있습니다.
Search Console
Search Console은 Core Web Vitals를 포함한 사이트의 검색 트래픽과 실적을 측정합니다. 사이트의 소유권을 확인한 사이트 소유자만 사용할 수 있습니다.
Search Console의 중요한 기능은 유사한 페이지 (예: 동일한 템플릿을 사용하는 페이지)를 단일 그룹 평가로 그룹화한다는 것입니다. Search Console에는 CrUX 필드 데이터를 기반으로 한 Core Web Vitals 보고서도 포함되어 있습니다.
Search Console을 사용해야 하는 경우
Search Console은 다른 Google 도구와는 하지 않는 방식으로 검색 및 페이지 실적을 평가할 수 있는 개발자 및 비개발자 역할 모두에 적합합니다. CrUX 데이터를 제시하고 유사성을 기준으로 페이지를 그룹화함으로써 성능 개선이 페이지 카테고리 전체에 미치는 영향에 대한 새로운 통찰력을 얻을 수 있습니다.
Search Console을 사용하지 않아야 하는 경우
유사성별로 페이지를 그룹화하는 다른 서드 파티 도구를 사용하거나 웹사이트가 CrUX 데이터 세트에 표시되지 않는 프로젝트에는 Search Console이 적합하지 않을 수 있습니다.
또한 그룹 내 예시 페이지의 특성이 나머지 그룹과 다른 경우 페이지 그룹화가 다소 혼란스러울 수 있습니다. 예를 들어 그룹이 특정 Core Web Vitals를 통과하지 못하지만 예시 페이지는 모두 동일한 Core Web Vitals를 통과하는 것으로 보이는 경우가 이에 해당합니다. 이 문제는 그룹에 롱테일 페이지 또는 방문 빈도가 낮은 페이지가 포함되어 있으면 캐시될 가능성이 낮기 때문에 로드 속도가 느려질 수 있습니다. 롱테일에서 이러한 페이지의 양이 충분하면 그룹의 전반적인 통과율에 영향을 미칠 수 있습니다.
등대
Lighthouse는 페이지 성능을 개선할 수 있는 특별한 기회를 제공하는 실험실 도구입니다. Lighthouse 사용자 흐름을 사용하면 개발자가 페이지 로드 외에도 성능 테스트를 위한 상호작용 흐름을 스크립트로 작성할 수도 있습니다.
Lighthouse-CI는 프로젝트 빌드 및 배포 중에 Lighthouse를 실행하여 성능 회귀 테스트를 지원하는 관련 도구입니다. pull 요청과 함께 Lighthouse 보고서를 제공하고 시간 경과에 따른 성능 측정항목을 추적합니다.
Lighthouse를 사용해야 하는 경우
Lighthouse는 개발 중에 로컬 환경과 스테이징 환경 모두에서 성능 개선 기회를 찾는 데 매우 유용합니다. Lighthouse CI는 빌드 및 배포 단계에서 스테이징 및 프로덕션 환경에도 유용합니다. 이러한 환경에서는 우수한 사용자 환경을 유지하기 위해 성능 회귀 테스트가 필요합니다.
Lighthouse를 사용하지 않아야 하는 경우
Lighthouse (또는 Lighthouse CI)는 필드 데이터를 대체할 수 없습니다. Lighthouse는 주로 사전 정의된 페이지 로드를 통해 잠재적인 문제와 모범 사례를 나열하는 진단 도구입니다. 표시되는 추천이 사용자가 경험하는 실적과 항상 일치하지는 않습니다.
Lighthouse는 PageSpeed Insights와 같은 도구를 통해 프로덕션 사이트를 진단하는 데 사용할 수 있지만, 개발 및 지속적 통합 환경에서 프로덕션 단계에 도달하기 전에 성능 문제를 해결하는 용도로 Lighthouse를 사용하는 것이 이상적입니다.
Web Vitals 확장 프로그램
웹 바이탈 Chrome 확장 프로그램은 웹을 탐색할 때 Core Web Vitals 측정항목을 표시하는 진단 도구입니다. 또한 현재 페이지가 CrUX 데이터 세트에 표시되는 경우 해당 페이지의 CrUX 데이터를 포함하며, Core Web Vitals 성능 문제를 식별하는 데 도움이 되는 디버깅 정보를 제공합니다.
Web Vitals 확장 프로그램을 사용해야 하는 경우
Web Vitals 확장 프로그램은 역할과 관계없이 누구나 페이지 수명 주기의 모든 지점에서 페이지의 Core Web Vitals를 평가하는 데 사용할 수 있습니다. '실시간'으로서 성능 문제를 찾기 위해 페이지와 상호작용할 때 성능을 확인합니다. 특히 CLS 및 INP 측정항목과 관련하여 발생할 수 있는 로드 후 문제의 경우 더욱 그렇습니다.
Web Vitals 확장 프로그램을 사용하지 않아야 하는 경우
Web Vitals 확장 프로그램은 페이지 실적을 전체적으로 평가하는 것은 아닙니다. 게다가 이 회사에서 보고하는 측정항목은 실행 환경에 따라 크게 달라지며, 개발자들은 종종 고성능 컴퓨터를 사용하거나 보다 빠른 네트워크에 액세스할 수 있습니다.
Chrome DevTools의 Performance 패널
Chrome DevTools는 Performance 패널을 비롯하여 브라우저 내 개발 도구 모음입니다. 실적 패널은 페이지 로드 중 또는 기록된 기간의 모든 페이지 활동을 프로파일링하는 실험실 도구입니다. 페이지의 코어 웹 바이탈뿐만 아니라 네트워크, 렌더링, 페인팅, 스크립팅 활동과 같은 측정기준 전반에 걸쳐 관찰한 모든 항목에 대한 심층적인 통계를 제공합니다.
성능 패널을 사용해야 하는 경우
개발자는 개발 중에 Performance 패널을 사용하여 페이지 성능에 대한 자세한 정보를 얻어야 합니다. 이는 FID 또는 INP에 영향을 미치는 응답성 문제를 디버그하는 데 특히 유용합니다. 반응이 좋지 않은 상호작용이 식별되고 반복 가능한 경우 Performance 패널에서는 브라우저에서 발생하는 상황에 관한 풍부한 데이터를 제공하여 기본 스레드 차단에서 JavaScript 호출 스택, 렌더링 작업에 이르기까지 문제를 파악하는 데 도움을 줄 수 있습니다.
성능 패널을 사용하지 않아야 하는 경우
성능 패널은 실험실 데이터만 제공하는 개발자 도구입니다. 필드 데이터를 대체하지는 않습니다. 여기에는 많은 디버깅 정보가 포함되어 있지만 초보 개발자나 개발자가 아닌 개발자가 이해하기 어려울 수 있습니다.
웹사이트의 Core Web Vitals를 정상 상태로 유지하기 위한 3단계 워크플로
사용자 경험을 개선하기 위해 노력할 때는 이 과정을 연속적인 주기로 생각하는 것이 좋습니다. Core Web Vitals 및 기타 성능 측정항목을 개선하기 위한 한 가지 접근 방식은 다음과 같습니다.
- 웹사이트 상태를 평가하고 문제점을 파악합니다.
- 디버그 및 최적화
- 지속적 통합 도구로 모니터링하여 회귀를 파악하고 방지합니다.
</ph>
1단계: 웹사이트 상태 평가 및 개선 기회 파악
웹사이트 상태를 평가하려면 필드 데이터로 시작하는 것이 가장 좋습니다.
- PageSpeed Insights를 사용하여 출처에 관한 전반적인 Core Web Vitals 환경 측정항목과 개별 URL의 구체적인 정보를 확인하세요.
- Search Console은 페이지 그룹화 기능이 사이트에서 잘 작동하는 경우 개선이 필요한 페이지를 파악하는 데 유용할 수 있습니다.
- RUM 데이터가 있는 경우 이 옵션은 문제가 있는 특정 페이지 또는 트래픽 세그먼트를 식별하는 데 가장 좋은 옵션인 경우가 많습니다.
직접 수집한 현장 데이터를 분석하든 CrUX 데이터를 분석하든 이 첫 번째 단계는 매우 중요합니다. 현장 데이터를 수집하지 않는 경우에도 웹사이트가 데이터 세트에 표시되어 있다면 CrUX 데이터로도 충분할 수 있습니다.
PageSpeed Insights로 사이트 성능 분석하기
PageSpeed Insights는 지난 28일간의 사용자 경험 데이터를 아우르는 CrUX 데이터를 75번째 백분위수로 표시합니다. 즉, 사용자 경험의 75% 가 특정 측정항목에 설정된 기준을 충족하면 사용자 경험이 '양호'한 것으로 간주됩니다.
실적을 살펴볼 특정 페이지가 있다면 그 페이지를 사용합니다. 홈페이지는 일반적으로 여러 사이트에서 가장 인기 있는 페이지 중 하나이므로 최적화를 처음 시작할 때 사이트를 전반적으로 파악할 때는 홈페이지부터 살펴보는 것이 좋습니다.
처음에는 PSI의 실제 사용자가 경험하는 문제 섹션에 집중하세요. 최대 4개의 데이터 보기(입력한 URL은 모바일 및 데스크톱)와 전체 출처가 표시됩니다. 각 유형을 비교해 보고 어떻게 다른지 확인하세요. 모바일은 네트워크 안정성이 떨어질 수 있는 상황에서 리소스가 제한된 기기로 작동하기 때문에 일반적으로 데스크톱보다 성능이 떨어집니다. URL과 원본 데이터가 크게 다른 경우, 그 이유를 파악해 보세요. 홈페이지가 가장 먼저 방문하는 페이지 (즉, 방문 페이지)인 경우가 많으므로 원본 사용자가 프라임 없이 브라우저 캐시를 처리하는 것보다 속도가 느릴 수 있습니다. 공유 애셋이 캐시되므로 이후 페이지가 더 빠르게 로드되어 집계된 출처 수준의 데이터가 줄어듭니다.
PSI에는 세 가지 Core Web Vitals (LCP, CLS, FID)와 대기 중인 INP 측정항목과 진단 TTFB 및 FCP 측정항목도 모두 표시됩니다. Core Web Vitals가 실패하고 그 비율은 어느 정도인가요? 이를 통해 어떤 노력을 집중해야 하는지 알 수 있습니다.
이러한 수치 간의 관계를 이해하세요(특히 LCP의 경우). 이 예시에서처럼 LCP가 느린 경우 해당 측정항목의 마일스톤인 TTFB와 FCP를 모두 살펴보세요. 이 예시에는 1.8초의 TTFB가 있으므로 양호한 LCP를 위한 2.5초 권장 기준점을 충족하기가 매우 어렵습니다. 이는 백엔드가 느리거나 (서버 문제 또는 CDN 부족), 네트워크가 느리거나, 리디렉션이 첫 HTML 바이트를 지연시키는 것일 수 있습니다. 자세한 내용은 TTFB 최적화 가이드를 참고하세요. 이에 더해 FCP에 1초가 더 걸릴 수 있으며, 이는 마찬가지로 네트워크가 더 느리다는 의미일 수 있습니다. 이 예에서 LCP는 FCP로부터 얼마 지나지 않아 페이지 자체가 로드된 후 LCP 리소스가 효과적으로 최적화되었음을 알 수 있습니다.
CLS의 경우 CrUX CLS와 Lighthouse CLS 점수를 살펴보고 이 문제가 Lighthouse에서 포착하고 알려 주는 로드 CLS 문제인지 아니면 Lighthouse에서 포착하지 못하는 로드 후 CLS 문제인지 확인합니다. 자세한 내용은 최적화 도구 CLS 가이드를 참고하세요.
응답성을 확인하려면 FID 및 INP 점수를 확인하세요. Lighthouse의 TBT 감사를 통해 초기 페이지 로드 중에 INP에 영향을 줄 수 있는 많은 JavaScript 처리가 발생하는지 확인합니다. INP는 개선하기 어려운 측정항목일 수 있으므로 INP 최적화 가이드에서 자세한 내용을 확인하세요.
Search Console에서 실적이 저조한 페이지 파악
PSI는 테스트하려는 특정 URL이나 사이트 전체가 있을 때 유용하지만 Search Console을 사용하면 특정 페이지 유형에 노력을 타겟팅할 수 있습니다. 여러 페이지에서 공통 주제나 기술을 공유하고 Search Console에서 이를 식별할 수 있는 경우 특히 유용합니다.
Search Console의 코어 웹 바이탈 보고서는 웹사이트의 성능을 개괄적으로 보여주지만 주의가 필요한 특정 페이지를 자세히 살펴볼 수 있습니다. Search Console을 사용하면 다음 작업도 할 수 있습니다.
- 개선이 필요한 개별 페이지 그룹과 우수한 사용자 환경을 제공하는 페이지 그룹을 파악합니다.
- 상태, 측정항목, 유사한 웹페이지 그룹 (예: 전자상거래 웹사이트의 제품 세부정보 페이지)을 기준으로 그룹화된 URL별 실적에 관한 상세 데이터를 확인할 수 있습니다.
- 모바일과 데스크톱 모두에서 각 사용자 환경 품질 카테고리의 URL을 버케팅하는 상세 보고서를 확인할 수 있습니다.
확인해야 할 특정 페이지가 있으면 앞서 설명한 대로 PSI를 사용하여 해당 페이지의 문제를 더 자세히 파악할 수 있습니다.
2단계: 디버그 및 최적화
1단계에서 성능 개선이 필요한 페이지와 개선이 필요한 Core Web Vitals 측정항목을 파악했습니다. Google 도구를 사용하면 추가 정보를 얻어 근본 원인을 파악하여 문제를 식별할 수 있습니다.
- Lighthouse 감사를 실행하여 페이지 수준 안내 확인하기
- 웹 바이탈 확장 프로그램을 사용하여 코어 웹 바이탈을 실시간으로 분석합니다.
- Chrome DevTools의 Performance 패널을 사용하여 성능 문제를 디버그하고 코드 변경사항을 테스트합니다.
자세한 안내는 다음 가이드를 참고하세요.
Lighthouse로 기회 찾기
PageSpeed Insights는 Lighthouse를 자동으로 실행하지만, 로컬 개발의 경우 Chrome DevTools에서 Lighthouse를 실행할 수도 있습니다. 이 방법은 로컬에서 수정사항을 확인하는 데 유용합니다.
핵심은 Lighthouse 감사가 해결하려는 문제 (예: 느린 LCP 또는 CLS 문제)를 복제하는지 확인하는 것입니다. Lighthouse는 처음부터 페이지 로드 중에만 사용자 환경을 평가합니다. 실습 도구이므로 FID와 INP가 제외되고 TBT가 우선 적용됩니다.
Lighthouse 측정항목이 해결하려는 문제와 유사한 문제를 제시하는 경우 감사를 통해 제공되는 풍부한 정보를 통해 문제를 파악하고 해결책을 제안할 수 있습니다.
원하는 Core Web Vitals로 감사를 필터링하여 특정 측정항목과 관련된 문제의 해결에 집중할 수 있습니다.
FID 및 INP의 경우 TBT 감사를 사용하여 이러한 측정항목에 잠재적으로 영향을 미칠 수 있는 문제를 식별하지만 상호작용이 없으면 Lighthouse가 진단할 수 있는 정도가 제한된다는 점에 유의하세요.
Web Vitals 확장 프로그램을 사용한 실시간 분석
Web Vitals Chrome 확장 프로그램은 페이지 로드 중 및 페이지를 탐색하는 동안 실시간으로 Core Web Vitals를 표시합니다. 따라서 로드 후에 발생하는 레이아웃 변경은 물론 FID 및 INP를 캡처할 수 있습니다. 디버깅 옵션은 각 측정항목에 관한 자세한 정보를 표시합니다.
Web Vitals 확장 프로그램은 성능 문제를 찾기 위한 부분 검사 도구이지 종합적인 디버깅 도구가 아닌 Chrome DevTools의 성능 패널을 위한 작업으로 생각하는 것이 좋습니다.
성능 패널을 사용하여 상세히 살펴보기
Chrome DevTools의 Performance 패널은 기록된 기간 동안 모든 페이지 동작을 프로파일링합니다.
LCP와 같은 주요 타이밍은 타이밍 트랙에 표시됩니다. 자세한 내용을 보려면 클릭하세요.
Layout Shifts 트랙은 레이아웃 변경을 강조 표시하고 이를 클릭하면 CLS 디버깅을 위해 변경된 요소에 관한 세부정보를 확인할 수 있습니다.
긴 작업 (FID 및 INP 문제를 일으킬 수 있음)도 빨간색 삼각형으로 강조 표시됩니다.
이러한 기능과 성능 패널의 다른 부분에 있는 정보를 통해 수정사항이 페이지의 Core Web Vitals에 영향을 미치는지 확인할 수 있습니다.
현장에서 Core Web Vitals 디버그
실습 도구가 사용자에게 영향을 미치는 모든 Core Web Vitals 문제의 원인을 파악하지 못할 수도 있습니다. 이것이 실험실 데이터를 수집할 수 없다는 점을 고려하기 때문에 자체 현장 데이터를 수집하는 것이 중요한 이유 중 하나입니다.
자세한 내용은 필드의 디버그 성능을 참고하세요.
3단계: 변경사항 모니터링
문제를 해결한 후에는 필요한 효과가 있는지, 새로운 문제로 인해 Core Web Vitals가 중단되지 않는지 확인하는 것이 좋습니다. 이를 위해서는 성능 문제가 프로덕션에 배포되지 않도록 하기 위해 개발자 워크플로의 일부로 성능 문제를 모니터링하고, 정기적으로 현장 데이터를 모니터링하여 이러한 상황이 맞는지 확인해야 합니다.
지속적 통합 (CI) 환경에서 성능 요청 모니터링
Lighthouse-CI를 사용하면 코드 커밋에서 Lighthouse 감사를 자동으로 실행하여 코드 입력 성능 저하를 방지할 수 있습니다. 이를 통해 성능 타이밍 (변동에 영향을 줄 수 있음)을 확인하거나 성능 감사만 확인할 수 있으며, 이는 코드의 잘못된 관행을 방지하는 린트 작업 도구로 사용할 수 있습니다.
현장 데이터로 웹사이트 상태 추세 보기
프로덕션에 반영되기 전에 모든 성능 문제를 포착하고 해결하는 것을 목표로 해야 하지만, RUM을 사용하여 필드 데이터를 모니터링하는 것이 중요합니다. 이 작업에 도움이 되는 상용 RUM 제품이 많이 있습니다. web-vitals JavaScript 라이브러리는 웹사이트의 필드 데이터 수집을 자동화할 수 있으며, 선택적으로 이 데이터를 사용하여 커스텀 대시보드 및 알림 시스템을 강화할 수 있습니다.
RUM 솔루션이 없는 사이트의 경우 CrUX Dashboard를 현장 데이터의 기본 트렌드 분석으로 사용할 수 있습니다. CrUX 사이트에 대해 다음과 같은 사항이 보고됩니다.
- 사이트 개요: Core Web Vitals를 데스크톱과 휴대기기 유형으로 분류합니다.
- 측정항목 유형별 이전 추세: CrUX 보고서 데이터의 월별 출시별로 시간 경과에 따른 측정항목의 분포를 보여줍니다.
- 사용자 인구통계: 기기 및 효과적인 연결 유형을 포함하여 인구통계별 사용자의 전체 출처에서 페이지 조회수의 분포를 보여줍니다.
</ph>
CrUX 대시보드는 한 달에 한 번 업데이트되는 CrUX BigQuery 데이터세트를 기반으로 합니다. Core Web Vitals를 정기적으로 확인하는 좋은 알림이 될 수 있습니다.
결론
빠르고 만족스러운 사용자 경험을 보장하려면 성능을 우선시하는 마음가짐과 진행을 보장하는 워크플로 도입이 필요합니다. 감사, 디버그, 모니터링을 위한 적절한 도구와 프로세스를 사용하여 우수한 사용자 환경을 구축하고 우수한 Core Web Vitals에 정의된 기준을 충족할 수 있습니다.