속도 도구에 대한 이해

Google은 성능 데이터 및 성능 도구에 관한 많은 가이드를 제공했습니다. 이 인포그래픽의 목표는 개발자와 마케터가 성능에 대해 생각하는 방법을 이해하고 Google의 모든 성능 도구 제품을 탐색하는 데 도움이 되도록 이 가이드를 통합하는 것입니다.

PDF 버전 다운로드

실적에 관한 일반적인 오해

오해 1

선 그래프가 그려진 종이

사용자 경험을 단일 측정항목으로 포착할 수 있습니다.

우수한 사용자 경험은 한 시점에만 포착되지 않습니다. 사용자 여정의 일련의 주요 마일스톤으로 구성됩니다. 다양한 측정항목을 이해하고 사용자 경험에 중요한 측정항목을 추적합니다.

오해 2

다양한 기기와 네트워크 상태를 나타내는 네트워크 아이콘 모음입니다.

사용자 환경은 단일 '대표 사용자'로 캡처할 수 있습니다.
실제 성능은 사용자의 기기, 네트워크 연결, 기타 요인의 차이로 인해 매우 다양합니다. 실험실 및 개발 환경을 보정하여 다양한 조건을 테스트합니다. 필드 데이터를 사용하여 기기 유형(예: 모바일과 데스크톱), 네트워크 연결(예: 3G 또는 4G), 기타 주요 변수와 같은 다양한 요인에 따라 달라집니다.

오해 3

다양한 유형의 사용자를 묘사한 이미지 모음입니다.

내 웹사이트가 나에게는 빠르게 로드되므로 사용자에게도 빠르게 로드될 것입니다.
개발자가 로드 성능을 테스트하는 기기와 네트워크는 사용자가 실제로 경험하는 것보다 훨씬 빠른 경우가 많습니다. 필드 데이터를 사용하여 사용자가 어떤 기기와 네트워크를 사용하는지 파악하고 성능을 테스트할 때 이러한 조건을 적절하게 반영합니다.

실험실 데이터와 필드 데이터의 차이점 이해하기

실험실 데이터

추상적인 기술 개념과 아이콘 앞에
서 있는 남성의 모습

실험실 데이터는 사전 정의된 기기 및 네트워크 설정이 있는 제어된 환경 내에서 수집된 성능 데이터입니다. 이를 통해 재현 가능한 결과와 디버깅 기능을 제공하여 성능 문제를 식별, 격리, 해결할 수 있습니다.

권장사항

강점

  • 성능 문제 디버깅에 유용함
  • UX에 대한 엔드 투 엔드 및 심층적인 가시성
  • 재현 가능한 테스트 및 디버깅 환경
금지사항

제한사항

  • 실제 병목 현상을 포착하지 못할 수 있음
  • 실제 페이지 KPI와 연관시킬 수 없음

필드 데이터

공공장소에서 휴대기기를 사용하는 사람들을 보여주는 그림

(실제 사용자 모니터링 또는 RUM이라고도 함)

필드 데이터는 사용자가 실제로 경험하는 실제 페이지 로드에서 수집된 성능 데이터입니다.

권장사항

강점

  • 실제 사용자 환경을 포착함
  • 비즈니스 핵심성과지표와의 상관관계 사용 설정
금지사항

제한사항 {: .compare-worse }

  • 제한된 측정항목 집합
  • 제한된 디버깅 기능

실적 도구에는 어떤 것들이 있나요?

등대

Lighthouse

성능, 접근성, PWA, SEO, 기타 권장사항 전반에 걸쳐 웹사이트를 개선하는 방법에 관한 맞춤 조언을 제공합니다.

WebPageTest

WebPageTest

제어된 실험실 환경에서 하나 이상의 페이지 성능을 비교하고 성능 통계를 심층 분석하며 실제 기기에서 성능을 테스트할 수 있습니다. WebPageTest에서 Lighthouse를 실행할 수도 있습니다.

TestMySite

TestMySite

기기 전반에서 웹페이지 성능을 진단할 수 있으며 Webpagetest 및 PageSpeed Insights에서 환경을 개선하기 위한 수정사항 목록을 제공합니다.

PageSpeed Insights

PageSpeed Insights

사이트의 속도 필드 데이터와 함께 이를 개선하기 위한 일반적인 최적화 제안을 표시합니다.

속도 스코어카드

속도 스코어카드

10개국 이상의 동종업체와 모바일 사이트 속도를 비교할 수 있습니다. 모바일 사이트 속도는 Chrome 사용자 환경 보고서의 실제 데이터를 기반으로 합니다.

개선 효과 추정 도구

개선 효과 추정 도구

Google 애널리틱스의 벤치마크 데이터를 기반으로 모바일 사이트 속도를 개선할 경우 얻을 수 있는 잠재적 수익 기회를 추정할 수 있습니다.

Chrome 개발자 도구

Chrome 개발자 도구

페이지의 런타임을 프로파일링하고 성능 병목 현상을 식별하고 디버그할 수 있습니다.

그러니까…

차트와 그래프를 보여주는 책 아이콘

웹사이트의 사용자 환경을 개선하기 위한 비즈니스 케이스를 구축하려는 마케팅 담당자 또는 개발자. 기회비용과 예상 상승률을 정량화하는 데 도움이 되는 금전적 수치를 찾고 있습니다.

  • 속도 스코어카드를 사용하여 10개 이상의 국가에서 내 모바일 사이트 속도를 동종업체와 비교해 보세요. 점수는 Chrome 사용자 경험 보고서의 실제 데이터를 기반으로 합니다.
  • 개선 효과 추정 도구를 사용하여 모바일 사이트 속도 개선으로 얻을 수 있는 잠재적 수익 기회를 추정합니다. 영향은 Google 애널리틱스의 벤치마크 데이터를 기반으로 합니다.
  • TestMySite를 사용하여 업계 벤치마크와 함께 페이지의 모바일 로드 시간을 테스트하고 간단한 수정으로 사이트 속도를 높이고 방문자 손실을 줄이는 방법을 알아보세요. TestMySite는 현재 WebPageTest 및 PageSpeed Insights를 기반으로 합니다.
노트북 아이콘 뒤에 Chrome 로고가 약간 위에 표시되어 있습니다.

실제 Chrome 사용자가 경험하는 사이트의 현재 성능을 이해하고 업계 주요 트렌드 및 가이드라인에 대한 감사 권장사항을 찾으려는 개발자

PageSpeed Insights는 Chrome 사용자가 경험하는 사이트의 실제 성능을 이해하는 데 도움이 되며 최적화 기회를 추천합니다.

Lighthouse 감사 결과 페이지 아이콘

최신 웹 성능 권장사항에 따라 웹사이트를 이해하고 감사하려는 개발자

Lighthouse에는 포괄적인 성능 개선 기회가 포함되어 있습니다. 페이지에서 누락된 성능 개선 기회 목록과 각 최적화를 구현하여 절약한 시간을 제공하므로 무엇을 해야 하는지 이해하는 데 도움이 됩니다.

버그 위에 돋보기가 있는 아이콘

사이트 성능을 디버깅/심층 분석하는 방법에 관한 기술 가이드를 찾는 개발자

Chrome 개발자 도구(CDT)에는 맞춤설정된 구성으로 사이트를 프로파일링하여 사이트의 성능 문제를 자세히 살펴보고 성능 병목 현상을 추적할 수 있는 성능 패널이 포함되어 있습니다. 웹사이트의 프로덕션 버전 또는 개발 버전에서 CDT를 사용할 수 있습니다.

WebPageTest에는 고급 측정항목 및 trace 뷰어 모음이 포함되어 있습니다. 이를 통해 네트워크 조건이 있는 실제 모바일 하드웨어에서 사이트 성능을 심층 분석할 수 있습니다.