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