상호 작용까지의 시간

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

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

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

# TTI로 측정되는 내용

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

• 페이지에 첫 번째 콘텐츠풀 페인트에 의해 측정되는 유용한 콘텐츠가 표시됩니다.
• 가장 많이 보이는 페이지 요소에 이벤트 핸들러가 등록됩니다.
• 페이지가 50밀리초 이내에 사용자 상호 작용에 응답합니다.

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

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

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

# TTI 점수를 높이는 방법

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

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

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

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

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

# 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:

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

# 리소스

• 상호 작용까지의 시간 감사에 대한 소스 코드
• Lighthouse 스코어링 가이드
• 첫 상호 작용 및 지속적 상호 작용
• JavaScript 시작 최적화
• 트리 쉐이킹으로 JavaScript 페이로드 줄이기
• 타사 리소스 최적화