상호작용 시작 시간 (TTI)은 로드 응답성을 측정하기 위한 실험실 측정항목입니다. 페이지가 대화형인 것처럼 보이지만 실제로는 그렇지 않은 경우를 식별하는 데 도움이 됩니다. TTI가 빠르면 페이지를 사용할 수 있습니다.
TTI란 무엇인가요?
TTI 측정항목은 페이지 로드가 시작된 시점부터 기본 하위 리소스가 로드되어 사용자 입력에 빠르고 안정적으로 반응할 수 있는 시점까지의 시간을 측정합니다.
웹페이지의 성능 추적을 기반으로 TTI를 계산하려면 다음 단계를 따르세요.
- 콘텐츠가 포함된 첫 페인트 (FCP)부터 시작합니다.
- 최소 5초의 조용한 시간대를 앞으로 탐색합니다. 여기서 조용한 시간대는 긴 작업이 없고 진행 중인 네트워크 GET 요청이 2개 이하인 것으로 정의됩니다.
- 조용히 하는 시간 전에 마지막으로 실행된 긴 작업을 뒤로 탐색합니다. 긴 작업이 없으면 FCP에서 중지합니다.
- TTI는 조용히 하는 시간 전에 실행된 마지막 긴 작업의 종료 시간입니다 (긴 작업이 발견되지 않은 경우 FCP와 동일한 값).
다음 다이어그램을 통해 위 단계를 시각화할 수 있습니다.
이전에는 개발자가 렌더링 시간을 단축하기 위해 페이지를 최적화하면서 TTI를 희생하는 경우가 많았습니다.
서버 측 렌더링 (SSR)과 같은 기법을 사용하면 페이지가 상호작용적으로 보이지만 (즉, 링크와 버튼이 화면에 표시됨) 기본 스레드가 차단되었거나 이러한 요소를 제어하는 JavaScript 코드가 로드되지 않아 실제로는 상호작용적이지 않은 시나리오가 발생할 수 있습니다.
사용자가 상호작용이 가능한 것처럼 보이지만 실제로는 그렇지 않은 페이지와 상호작용하려고 하면 다음 두 가지 방법 중 하나로 응답할 가능성이 높습니다.
- 최선의 경우 페이지가 느리게 응답하여 불편을 끼칠 수 있습니다.
- 최악의 경우 페이지가 손상되었다고 가정하고 떠날 수 있습니다. 브랜드 가치에 대한 자신감이나 신뢰를 잃을 수도 있습니다.
이 문제를 방지하려면 FCP와 TTI의 차이를 최소화하도록 최선을 다하세요. 눈에 띄는 차이가 있는 경우 시각적 표시기를 통해 페이지의 구성요소가 아직 상호작용이 불가능하다는 점을 명확히 합니다.
TTI 측정 방법
TTI는 실험실에서 가장 잘 측정되는 측정항목입니다. TTI를 측정하는 가장 좋은 방법은 사이트에서 Lighthouse 성능 감사를 실행하는 것입니다. 사용 세부정보는 TTI에 관한 Lighthouse 문서를 참고하세요.
실험실 도구
좋은 TTI 점수는 얼마인가요?
우수한 사용자 환경을 제공하기 위해 사이트에서는 평균적인 모바일 하드웨어에서 테스트할 때 5초 미만의 Time to Interactive를 달성하도록 노력해야 합니다.
페이지의 TTI가 Lighthouse 성능 점수에 미치는 영향에 관한 자세한 내용은 Lighthouse에서 TTI 점수를 결정하는 방법을 참고하세요.
TTI를 개선하는 방법
특정 사이트의 TTI를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정 기회에 주의를 기울이세요.
일반적으로 모든 사이트의 TTI를 개선하는 방법을 알아보려면 다음 성능 가이드를 참고하세요.