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