속도 도구에 관한 생각

속도 도구에 관해 생각하는 법

Google은 성능 데이터와 성능 도구에 관한 다양한 지침을 내놓았습니다. 이 인포그래픽의 목표는 개발자와 마케팅 담당자가 이 가이드를 통합하여 성능을 고려하고 Google의 모든 성능 도구를 탐색하는 방법을 이해할 수 있도록 하는 것입니다.

PDF 버전 다운로드

선 그래프가 그려진
종이입니다.

사용자 경험은 하나의 측정항목으로 파악할 수 있습니다.

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

오해 2

여러 기기 및 네트워크 조건을 나타내는 네트워크 아이콘의 모음입니다.

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

오해 3

다양한 유형의 사용자를
다양한 방식으로 묘사합니다.

웹사이트가 빠르게 로드되므로 사용자가 볼 때도 빠르게 로드됩니다.
개발자가 부하 성능을 테스트하는 기기와 네트워크는 사용자가 실제로 경험하는 것보다 훨씬 빠른 경우가 많습니다. 필드 데이터를 사용하여 사용자가 사용 중인 기기와 네트워크를 파악하고 성능을 테스트할 때 이러한 조건을 적절하게 미러링하세요.

실습 데이터와 필드 데이터 이해하기

실험실 데이터

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

실험실 데이터는 사전 정의된 기기 및 네트워크 설정으로 통제된 환경에서 수집된 성능 데이터입니다. 이는 성능 문제를 식별, 격리하고 수정하는 데 도움이 되는 재현 가능한 결과와 디버깅 기능을 제공합니다.

권장사항

강점

  • 성능 문제 디버깅에 도움이 됨
  • UX에 대한 포괄적이고 심층적인 가시성 확보
  • 재현 가능한 테스트 및 디버깅 환경
금지사항

제한사항

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

필드 데이터

공공장소에서 휴대기기를 사용하는 사람들을 묘사한 이미지

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

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

권장사항

강점

  • 실제 사용자 경험 포착
  • 비즈니스 핵심성과지표와의 상관관계 파악
금지사항

제한사항 {: .compare-worse }

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

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

등대

등대

성능, 접근성, PWA, 검색엔진 최적화, 기타 권장사항 전반에서 웹사이트를 개선하는 방법에 관한 맞춤 조언을 제공합니다.

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 뷰어 모음이 포함되어 있습니다. 네트워크 조건으로 실제 모바일 하드웨어에서 사이트의 성능을 자세히 살펴볼 수 있습니다.