상호 작용까지의 시간

Published on Updated on

Translated to: English, Español, Português, Pусский

상호 작용까지의 시간(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 작업을 줄일 수 있는 추가 기회를 제공합니다.

실제 사용자의 장치에서 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.

리소스

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.