Skip to content
배우기 측정 블로그 Case studies 정보
이 페이지에서
  • TTI로 측정되는 내용
  • Lighthouse가 TTI 점수를 결정하는 방법
  • TTI 점수를 높이는 방법
  • 실제 사용자의 장치에서 TTI 추적
  • How to improve your overall Performance score

상호 작용까지의 시간

May 2, 2019 — 업데이트됨 Oct 10, 2019
Available in: Español, Português, Русский, English
Appears in: 성능 감사
이 페이지에서
  • TTI로 측정되는 내용
  • Lighthouse가 TTI 점수를 결정하는 방법
  • TTI 점수를 높이는 방법
  • 실제 사용자의 장치에서 TTI 추적
  • How to improve your overall Performance score

상호 작용까지의 시간(TTI)은 Lighthouse 보고서의 성능 섹션에서 추적하는 6가지 메트릭 중 하나입니다. 각 메트릭은 페이지 로드 속도의 일부 측면을 캡처합니다.

일부 사이트에서는 상호 작용을 희생하면서 콘텐츠 가시성을 최적화하기 때문에 TTI 측정이 중요합니다. 이로 인해 실망스러운 사용자 경험이 생길 수 있습니다. 즉, 사이트가 준비된 것처럼 보이지만 사용자가 사이트와 상호 작용하려고 하면 아무 일도 일어나지 않습니다.

Lighthouse는 TTI를 초 단위로 표시합니다.

Lighthouse 상호 작용까지의 시간 감사를 보여주는 스크린샷

TTI로 측정되는 내용 #

TTI는 페이지가 완전히 상호 작용 가능하게 되는 데 걸리는 시간을 측정합니다. 다음과 같은 경우에 페이지가 완전한 상호 작용 가능한 것으로 간주됩니다.

  • 페이지에 첫 번째 콘텐츠풀 페인트에 의해 측정되는 유용한 콘텐츠가 표시됩니다.
  • 가장 많이 보이는 페이지 요소에 이벤트 핸들러가 등록됩니다.
  • 페이지가 50밀리초 이내에 사용자 상호 작용에 응답합니다.
첫 번째 CPU 유휴 및 TTI는 모두 페이지가 사용자 입력에 준비되는 시기를 측정합니다. 첫 번째 CPU 유휴는 사용자가 페이지와 상호 작용을 시작할 수 있을 때 발생합니다. TTI는 사용자가 페이지와 완전히 상호 작용할 수 있을 때 발생합니다. 각 메트릭에 대한 정확한 계산에 관심이 있다면 Google의 첫 상호 작용 및 지속적 상호 작용을 참조하세요.

Lighthouse가 TTI 점수를 결정하는 방법 #

TTI 점수는 HTTP 아카이브의 데이터를 기반으로 페이지의 TTI와 실제 웹사이트의 TTI를 비교한 것입니다. 예를 들어, 99번째 백분위수에서 작동하는 사이트는 약 2.2초만에 TTI를 렌더링합니다. 웹사이트의 TTI가 2.2초라면 TTI 점수는 99입니다.

다음 표는 TTI 점수를 해석하는 방법을 보여줍니다.

TTI 메트릭
(초)
색상 코딩
0–3.8녹색(빠름)
3.9–7.3주황색(보통)
7.3 이상빨간색(느림)
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

TTI 점수를 높이는 방법 #

TTI에 특히 큰 영향을 미칠 수 있는 한 가지 개선 사항은 불필요한 JavaScript 작업을 연기하거나 제거하는 것입니다. JavaScript를 최적화할 수 있는 기회를 찾아보세요. 특히, 코드 분할로 JavaScript 페이로드를 줄이고 PRPL 패턴을 적용하는 방법을 고려하세요. 타사 JavaScript를 최적화해도 일부 사이트에서 상당한 개선이 이루어집니다.

다음 두 가지 진단 감사는 JavaScript 작업을 줄일 수 있는 추가 기회를 제공합니다.

  • 메인 스레드 작업 최소화
  • JavaScript 실행 시간 단축

실제 사용자의 장치에서 TTI 추적 #

TTI가 실제로 사용자의 기기에서 발생하는 시점을 측정하는 방법을 알아보려면 Google의 사용자 중심 성능 메트릭 페이지를 참조하세요. TTI 추적 섹션에서는 프로그래밍 방식으로 TTI 데이터에 액세스하고 이를 Google Analytics에 제출하는 방법을 설명합니다.

TTI는 실제 상황에서 추적하기 어려울 수 있습니다. 첫 번째 입력 지연을 추적하면 TTI를 간접적으로 가늠해볼 수 있습니다.

How to improve your overall Performance score #

Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.

Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:

Lighthouse: Opportunities section

See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.

리소스 #

  • 상호 작용까지의 시간 감사에 대한 소스 코드
  • Lighthouse 스코어링 가이드
  • 첫 상호 작용 및 지속적 상호 작용
  • JavaScript 시작 최적화
  • 트리 쉐이킹으로 JavaScript 페이로드 줄이기
  • 타사 리소스 최적화
마지막 업데이트: Oct 10, 2019 — 기사 개선하기
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 웹 기초
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.