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