웹사이트 성능 최적화 – TTI(Time to Interactive) 개선 방법

1. 개요

웹사이트 성능 최적화는 사용자 경험(UX)과 검색 엔진 최적화(SEO)에 중요한 영향을 미친다. 특히, 사용자가 웹사이트를 방문했을 때 얼마나 빨리 상호작용할 수 있는지를 나타내는 **TTI(Time to Interactive)**는 성능 지표 중 하나로 중요하게 다뤄진다.

TTI는 웹사이트가 처음 로드된 후, 사용자가 버튼 클릭이나 스크롤 등의 상호작용을 할 수 있을 때까지 걸리는 시간을 의미한다. TTI가 길어지면 사용자는 웹사이트가 느리다고 인식하고 이탈할 가능성이 높아진다. 이는 트래픽 감소 및 전환율 하락으로 이어질 수 있기 때문에, 웹 개발자는 TTI를 최적화하는 방법을 반드시 고려해야 한다.

이 글에서는 TTI의 개념과 중요성을 살펴보고, 이를 개선하기 위한 실질적인 방법들을 정리한다.

---

2. TTI(Time to Interactive)란?

1) TTI의 정의

TTI(Time to Interactive)는 웹사이트가 완전히 로드된 후 사용자가 원활하게 상호작용할 수 있는 상태까지 걸리는 시간을 측정하는 지표이다.

Google Lighthouse 등에서 측정하는 성능 지표 중 하나이며, TTI가 짧을수록 사용자는 빠르게 웹사이트를 이용할 수 있다.

2) TTI가 중요한 이유

• 사용자 경험(UX) 향상: 웹사이트가 빨리 반응할수록 방문자의 만족도가 높아짐
• SEO 최적화: 검색 엔진은 빠른 웹사이트를 선호하며, TTI가 개선되면 검색 순위에도 긍정적인 영향을 줌
• 전환율 증가: 빠른 웹사이트는 사용자 이탈률(Bounce Rate)을 낮추고, 구매나 가입 같은 전환율(Conversion Rate)을 높임

---

3. TTI(Time to Interactive) 개선 방법

TTI를 줄이기 위해서는 브라우저가 주요 콘텐츠를 렌더링하는 속도를 높이고, 불필요한 자원 로드를 줄이는 것이 핵심이다.

1) 렌더링 차단 리소스 최소화

렌더링 차단 리소스(Render-Blocking Resources)는 웹페이지가 완전히 로드되기 전에 실행되어야 하는 스크립트나 스타일시트를 의미한다. 이를 최소화하면 페이지가 더 빠르게 로드될 수 있다.

✅ 최적화 방법

• 필요한 CSS만 로드: 중요한 스타일을 인라인(Inline)으로 삽입하고, 나머지 스타일은 비동기 로드
• JavaScript 비동기 처리: <script async> 또는 <script defer> 속성을 활용하여 JavaScript 실행을 최적화
• CSS 및 JS 파일 최소화: minify를 사용하여 불필요한 공백 및 주석을 제거하여 파일 크기를 줄임

2) 웹폰트 최적화

웹사이트에서 웹폰트(Web Fonts)를 사용할 경우, 초기 로딩 속도에 영향을 미칠 수 있다. 폰트가 완전히 로드될 때까지 텍스트가 보이지 않는 경우(FOIT, Flash of Invisible Text) 사용자가 불편함을 느낄 수 있다.

✅ 최적화 방법

• 폰트 서브셋 생성: 실제 사용되는 글자만 포함된 폰트 파일을 생성하여 용량을 줄임
• 폰트 로딩 방식 변경: font-display: swap 속성을 사용하여 기본 폰트로 먼저 표시한 후 웹폰트를 로드

3) 불필요한 JavaScript 제거 및 코드 스플리팅

JavaScript 파일이 많거나 크기가 크면 브라우저가 실행하는 데 시간이 오래 걸려 TTI가 증가할 수 있다.

✅ 최적화 방법

• 사용하지 않는 코드 제거(Tree Shaking): Webpack과 같은 번들러에서 사용되지 않는 코드를 제거하여 최적화
• 코드 스플리팅(Code Splitting): 필요한 페이지에서만 특정 JavaScript 파일을 로드하여 초기 로딩 속도를 향상

4) 이미지 및 미디어 최적화

이미지와 동영상 파일이 크면 페이지 로딩 속도가 느려지고, 이는 TTI에도 영향을 미친다.

✅ 최적화 방법

• 최적화된 이미지 포맷 사용: JPEG, PNG 대신 WebP, AVIF 등의 차세대 이미지 포맷 활용
• Lazy Loading 적용: loading="lazy" 속성을 추가하여 화면에 표시되는 이미지만 우선 로드
• CDN(Content Delivery Network) 활용: 전 세계 여러 서버에서 이미지를 빠르게 제공

5) 서버 응답 시간 단축(TTFB 최적화)

서버 응답 시간(TTFB, Time to First Byte)이 길면 웹사이트의 초기 로딩이 지연되므로 TTI에도 부정적인 영향을 미친다.

✅ 최적화 방법

• HTTP/2 및 HTTP/3 적용: 최신 프로토콜을 적용하여 네트워크 성능 향상
• 캐싱(Cache) 활용: 브라우저 및 서버 캐시를 활용하여 불필요한 네트워크 요청을 최소화
• 빠른 호스팅 서비스 사용: 성능이 좋은 서버 또는 클라우드 기반 솔루션(AWS, Vercel, Cloudflare 등) 활용

---

4. Lighthouse를 활용한 TTI 측정 및 개선

TTI를 분석하고 최적화하기 위해 Google Lighthouse를 활용할 수 있다.

1) Google Lighthouse 사용 방법

1. Chrome DevTools에서 실행
   • Chrome 브라우저에서 F12 또는 Ctrl + Shift + I를 눌러 개발자 도구를 엶
   • Lighthouse 탭 선택 후, Performance(성능) 분석 실행
2. TTI 확인
   • 분석 결과에서 Time to Interactive(TTI) 값을 확인
   • TTI가 3초 이상이면 최적화가 필요함

2) 개선 권장 사항

• 렌더링 차단 리소스 감소
• JavaScript 및 CSS 최적화
• 이미지 최적화
• 서버 응답 속도 개선

---

5. 결론

TTI(Time to Interactive)는 웹사이트 성능을 평가하는 중요한 지표로, 사용자 경험과 SEO에 직접적인 영향을 미친다. 이를 최적화하기 위해 렌더링 차단 리소스 최소화, 웹폰트 최적화, JavaScript 코드 최적화, 이미지 압축, 서버 응답 속도 개선 등의 전략을 적용할 수 있다.

Google Lighthouse 등을 활용하여 현재 웹사이트의 TTI를 측정하고, 지속적인 성능 최적화를 통해 빠르고 쾌적한 웹사이트를 제공하는 것이 중요하다.