[온라인 쇼핑몰 속도 최적화] 상호작용까지의 시간(TTI)

 

목차

 

💡 상호 작용까지의 시간(TTI)는 무엇입니까?

💡 상호 작용까지의 시간(TTI)는 어떻게 측정하나요?

💡 상호 작용까지의 시간(TTI)이 중요한 이유는 무엇입니까?

           -    상호 작용까지의 시간(TTI)에 대한 임계값

💡상호 작용까지의 시간(TTI)을 향상시키는 방법은 무엇입니까?

 

---

 

 

 

상호 작용까지의 시간(TTI)은
 웹 페이지가 로드되고 사용자와 상호 작용 가능한 상태가 되는데 걸리는 시간을 나타내는
중요한 성능 지표입니다. 

 

 

이것은 사용자가 페이지를 열었을 때 페이지가 얼마나 빨리 대화식으로 사용 가능한 상태가 되는지를 측정합니다. TTI는 웹 페이지 또는 애플리케이션의 전반적인 사용자 경험을 반영하며, 빠른 TTI는 사용자가 페이지를 빠르게 이용하고 상호 작용할 수 있도록 도와줍니다.

TTI 측정은 첫 번째 콘텐츠 로딩 시간(FCP)이후 가장 빨리 페이지가 사용자와의 상호 작용을 가능하게 하는 시간을 나타냅니다. 즉, FCP가 표시된 후 사용자가 페이지 내의 버튼을 클릭하거나 어떤 동작을 수행하는 데 걸리는 시간입니다.

 

Google은
좋은 사용자 경험을 위해 모바일 하드웨어를 평균적으로 테스트할 때 TTI가 5초 미만이어야 한다고 제안합니다.

이는 사용자가 페이지를 열자마자 즉시 상호 작용을 시작할 수 있어야 함을 의미합니다. 빠른 TTI는 사용자가 기다리지 않고 편리하게 웹 페이지 또는 애플리케이션을 사용할 수 있게 하므로, 사용자 만족도를 향상시키고 웹사이트 또는 애플리케이션의 성능을 향상시키는 데 중요합니다.

 

 

---

 

💡 상호 작용까지의 시간(TTI)는 무엇입니까?

상호 작용까지의 시간(TTI)는 웹 페이지의 사용자 경험을 측정하는 중요한 지표로, 사용자가 웹 페이지를 열고 실제로 해당 페이지가 사용자와 상호 작용할 수 있는 상태가 되기까지 걸리는 시간을 의미합니다.

TTI는 사용자 중심의 성능 지표로, 다음과 같은 세 가지 주요 이벤트에 따라 결정됩니다.

 

1. First Contentful Paint (FCP)
페이지가 가장 중요한 콘텐츠를 로드하고 첫 번째 콘텐츠가 사용자에게 표시되는 시간을 나타냅니다. 이것은 페이지 로드의 시작에서 가장 중요한 콘텐츠가 화면에 나타날 때까지 걸리는 시간을 의미합니다.
2. 시각적으로 눈에 띄는 상호 작용 가능한 요소
사용자가 페이지에서 상호 작용할 수 있는 중요한 요소(예: 버튼 또는 링크)가 클릭
가능하거나 활성화되는 시간입니다. 이것은 사용자가 페이지에서 어떤 동작을 수행할 수 있는 상태가 되는 시점을 의미합니다.
3. 사용자 입력에 대한 반응 시간
페이지가 사용자의 입력(예: 클릭 또는 탭)에 얼마나 빠르게 반응하는지를 측정합니다. 사용자 입력에 대한 응답 시간이 50밀리초 이내인 것이 이상적입니다.

TTI의 목표는 사용자가 페이지를 열자마자 빠르게 상호 작용하고 즉시 정보를 얻을 수 있는 웹 페이지를 제공하는 것입니다.
Google은 모바일 하드웨어를 평균적으로 테스트할 때 TTI가 5초 미만이어야 한다고 권장하며, 이는 사용자가 웹 페이지와 애플리케이션을 빠르게 활용할 수 있어야 함을 강조합니다.

 

 

 

방문자에게 느린 상호 작용까지의 시간(TTI)는 웹 페이지가 응답하지 않거나 고장났다고 느껴지는 상황을 초래할 수 있습니다.

 

예를 들어, 

웹 페이지의 요소가 빠르게 로드되지만 사용자가 클릭하거나 상호 작용하려고 할 때 아무런 반응이 없는 상황이 발생할 수 있습니다. 이러한 상황은 주로 타사 스크립트 등의 요소가 메인 스레드를 차단하고 TTI가 길어지는 결과입니다.
이로 인해 방문자는 웹 페이지를 떠나거나 좌절할 가능성이 높아지며, 이는 사용자 이탈과 페이지의 성능 저하로 이어질 수 있습니다. 특히 모바일 기기에서 TTI의 영향이 더욱 두드러지며, 사용자 경험을 향상시키기 위해서는 TTI를 최적화하는 것이 중요합니다. 페이지가 빠르게 상호 작용 가능한 상태가 되면 사용자는 더욱 즐거운 경험을 얻을 것이며, 웹 페이지의 성능과 유용성이 향상될 것입니다.

 

 

---

 

💡 상호 작용까지의 시간(TTI)는 어떻게 측정하나요?

 

이 측정은 마지막 "long-task"의 시점을 사용합니다. 마지막 long-task는 다음과 같은 경우에 결정됩니다.

▶ 이미 First Contentful Paint(FCP)가 트리거되었을 때
▶ 5초 이상의 중단이 없는 유휴 상태 창이 있는 경우

 

여기서 유휴 상태 창은 CPU 및 네트워크 유휴 상태가 겹치는 시간을 나타냅니다.
CPU 유휴 상태는 긴 작업이 없는 짧은 시간을, 네트워크 유휴 상태는 최대 2개의 요청이 처리 중인 짧은 시간을 나타냅니다.
TTI는 유휴 상태 창이 시작되기 전에 마지막 long-task가 끝나는 시점을 기준으로 하며, long-task가 없는 경우에는 FCP로 간주됩니다.

 

이 측정은 우리 쇼핑몰 속도에게 사용자에게 표시된 콘텐츠가 그려지고, 브라우저가 스크립트 처리나 요청 다운로드를 처리하지 않고 있는 시점을 알려줍니다. 즉, 웹 페이지가 상호 작용 가능한 상태로 안정화된 시점을 나타냅니다.
만약 CPU 및 네트워크 유휴 상태가 (예를 들어, 스크립트 실행이나 새로운 요청에 의해 인터럽트되는 경우) 중단된다면, TTI는 마지막 long-task의 종료 시점까지 연장되며, 양쪽의 5초 유휴 상태 창이 충족될 때까지 TTI가 지연될 수 있습니다.

TTI는 웹 페이지가 상호 작용 가능한 상태로 안정화되는 데 걸리는 시간으로, 이 때 마지막으로 실행되는 긴 작업의 종료 시간으로 측정됩니다. 이 측정은 사용자에게 페이지가 완전히 상호 작용 가능한 상태가 되기 전의 중단이 없어야 함을 의미합니다. 중단이 없는 5초 동안의 유휴 시간 이후 마지막 긴 작업의 종료 시간이 TTI로 정의됩니다.

 

 

---

 

 

💡 상호 작용까지의 시간(TTI)이 중요한 이유는 무엇입니까?

 

상호 작용까지의 시간(TTI)은 웹 페이지 성능을 평가하는 중요한 지표인 이유가 몇 가지 있습니다.

● 사용자 경험 개선
느린 TTI를 갖는 웹 페이지는 사용자가 페이지와 상호 작용하려고 할 때 응답이 늦어져 사용자들은 기다림에 좌절할 수 있습니다. 빠른 TTI는 페이지가 실제로 상호 작용 가능한 상태로 빨리 전환되어 사용자에게 좋은 경험을 제공합니다.
● 고객 유지 및 재방문률 향상
느린 TTI로 인해 사용자들이 웹 페이지를 떠나거나 재방문하지 않을 수 있습니다. 빠른 TTI를 갖는 웹 페이지는 사용자가 만족할 확률이 높아지며, 그 결과로 웹 페이지의 성공률과 고객 유지율이 향상됩니다.
● 검색 엔진 순위 향상
검색 엔진은 웹 페이지의 성능을 평가하여 순위를 결정합니다. TTI는 웹 페이지가 사용자에게 얼마나 빨리 상호 작용 가능한 상태가 되는지를 나타내므로, 검색 엔진 순위에도 영향을 미칩니다.
● 비즈니스 목표 달성
느린 TTI는 온라인 비즈니스에 부정적인 영향을 미칠 수 있으며, 상호 작용이 중요한 행동을 수행하는 데 필요한 시간을 증가시킬 수 있습니다. 빠른 TTI는 비즈니스 목표를 달성하기 위한 경로를 개선할 수 있습니다.
● 모바일 사용자 고려
모바일 기기에서의 웹 사용이 계속 증가하고 있으며, 이러한 기기에서의 빠른 TTI는 특히 중요합니다. 모바일 사용자는 종종 느린 네트워크 속도와 제한된 하드웨어 리소스로 인해 페이지가 빠르게 로딩되고 상호 작용 가능한 상태로 전환되는 것을 원합니다.
　

 

상호 작용까지의 시간(TTI)에 대한 임계값

 

상호 작용까지의 시간(TTI)에는 일반적으로 지정된 임계값이 없습니다. 그러나 빠른 TTI를 위해서는 일반적으로 3초 이내를 목표로 합니다.
TTI(전체 상호작용 시간) 지표는 페이지가 완전히 상호작용 가능해지는 데 걸리는 시간을 측정하여 초 단위로 표시합니다.
TTI가 어떻게 계산되는지 자세히 알아보려면 여기를 클릭하세요.

TTI 임계치는 다음과 같습니다.
▶ 좋음 - 아무 조치 없음 = 2468 밀리초 이하의 TTI.
▶ 괜찮으나 개선을 고려해 볼만 함 = 2468 밀리초에서 3280 밀리초 사이의 TTI.
▶ 권장 시간보다 더 길게 소요됨 = 3280 밀리초에서 4500 밀리초 사이의 TTI.
▶ 권장 시간보다 훨씬 더 길게 소요됨 = 4500 밀리초보다 높은 TTI.

 

 

 

---

 

 

 

💡상호 작용까지의 시간(TTI)을 향상시키는 방법은 무엇입니까?

웹 페이지의 로드 속도를 최적화하고, 리소스의 효율적인 사용, 렌더링 최적화 등의 방법을 사용하여 상호 작용까지의 시간(TTI)을 향상시킬 수 있습니다.

 

1) JavaScript 실행 최적화
페이지의 주 스레드 차단 시간을 줄여 사용자 입력에 빠르게 응답하도록 JavaScript 실행을 최적화하세요. 다음과 같은 작업을 수행할 수 있습니다.
a) JavaScript 실행 시간 줄이기
b) 메인 스레드 작업 최소화
c) 사용하지 않는 JavaScript 제거
d) Third-party 코드 영향 줄이기

 

2) 최소한의 요청 처리
의도된 애플리케이션을 위해 요청 수를 가능한 한 최소화하세요. 또한, 중요한 요청을 연결하지 않는 것은 핵심 리소스의 로딩 속도를 높일 수 있습니다.

 

3) 초기 연결 설정을 위한 리소스 힌트 사용
preconnect와 dns-prefetch 리소스 힌트를 사용하여 타사 서버와의 초기 연결을 설정하고 리소스를 더 빨리 가져오세요.
또한, 핵심 요청 사전로드를 사용하여 방문자들이 페이지 로드 타임라인에서 더 빨리 페이지를 사용할 수 있도록 해주세요.
지속적으로 모니터링하고 관리하세요