웹 페이지 로딩 속도 단축시키기, Time to Interactive 해결 방법

 

웹 페이지 로딩 시간 단축시키기 2탄, 오늘은 Time to Interactive 문제 해결 방법에 대해 알아보겠습니다. 아래 그림은 PageSpeed Insights를 통해 제 웹 페이지를 속도 결과 값인데요. 웹 페이지 로딩 속도를 하나도 생각하지 않고 오로지 포스팅에만 몰두 한 결과를 보고 계십니다. 앞에 포스팅에서 언급했듯이 웹 페이지 로딩 속도는 구글 노출에 영향을 끼치는데요. 그렇기 때문에 본인의 블로그의 속도를 측정해보시고 문제가 되는 요소를 해결하시길 바랍니다. 

 

 

그 중 오늘은 제 블로그에서 시간이 가장 오래 걸리는 Time to Interactive 시간 단축에 대해 알아보겠습니다.  

 

 

Time to Interactive

Time to Interactive(TTL)는 페이지가 완전히 상호 작용 하는 데 걸리는 시간을 의미합니다. 쉽게 말해 여러분들이 '웹 페이지 로딩 속도 단축시키기'라는 글을 보기 위해 이 페이지를 클릭했을 때 페이지를 구성하는 텍스트, 그림, 광고 등의 요소들이 완전히 노출될 때까지 걸리는 시간을 의미합니다.

 

0 ~ 3.8 : 녹색 (빠름) / 3.9 ~ 7.3 : 주황색 (보통) / 7.3 : 이상빨간색 (느림)

 

 

페이지 속도를 결정하는 요소는 Time to Interactive는 First Contentful Paint(FCP)과 First Meaningful Paint(FMP)와 직접적으로 관련이 있습니다. 

 

First Contentful Paint(FCP)

FCP는 화면에 텍스트나 이미지가 출력되기 시작하는 시점을 뜻합니다. FCP 역시 페이지 로딩 속도 값을 측정 중요한 요소 중 하나인데요. 요즘은 인터넷에서 고화질의 사진을 손 쉽게 많이 사용하는데요. 이는 곧 페이지 속도에 영향을 끼칠 수 있습니다. 더 자세한 내용은 하단에 링크를 걸어두었으니 참고하시길 바랍니다.

 

 

 

First Meaningful Paint(FMP)

FMP는 말 그대로 정보를 얻으러 온 사용자에게 의미 있는 정보와 그림이 출력하기 시작하는 시점을 뜻합니다. FCP와 큰 차이가 없어보이나 실질적으로 FMP 속도에 따라 이탈율에 큰 영향을 미칠 수 있습니다.

 

 

아래 사진으로 통해 TTI, FCP, FMP를 정리해 보겠습니다. A라는 사람이 제 블로그를 방문했다고 가정합니다. 화면에 첫 글자 혹은 이미지가 뜨는 것이 FCP며 소요시간이 총 5초가 걸린다는 의미입니다. FMP 역시 사용자에게 의미 있는 내용이나 그림이 뜨는데 걸리는 시간이 총 10초가 걸린다 것을 의미하겠죠. 페이지 로딩 시간이 길수록 페이지 이탈율이 높은 것은 누구나 아는 사실입니다. 하지만 FMP 로딩 속도 단축을 통해 의미 있는 내용과 그림을 노출시킴으로써 사용자에게 신뢰를 주고 이탈율을 낮추는데 도움을 줄 수 있습니다.

 

 

마지막으로 TTI는 페이지의 상호 작용이 완료 될 때 까지 총 20초가 걸리는 것을 의미합니다. 일반적으로  TTI 값을 통해 페이지 속도를 측정하기 때문에 페이지 속도가 느리다면 Time to Interactive를 의심해 볼 필요가 있습니다.

  

 

 

Time to Interactive 최적화 

TTI를 개선하는 가장 효과적인 방법은 웹 사이트의 중요한 렌더링 경로를 최적화하는 것입니다. Time to Interactive 시간을 줄이는데 도움이 될 수있는 몇 가지 방법은 다음과 같습니다.

 

 

–JavaScript에 불필요한 요소는 TTI에 가장 큰 영향을 미칠 수 있는 요소입니다. 네트워크, 컴파일, 메모리 비용 등은 많은 코드를 실행하면 페이지가 불안정하거나 지연될 수 있으므로 설정-스킨편집-html 편집을 통해 불필요한 요소는 삭제하시길 바랍니다.

 

–빠른 로딩 속도를 제공하는 글꼴, 이미지 등 시각적 요소를 이용해 페이지 구조를 설정합니다. 이는 렌더링 속도에 유리한 스킨이나 용량이 작은 이미지 등을 사용해 로딩 속도를 단축 시키는데 도움이 됩니다.

 

– 스크롤없이 볼 수있는 부분에 우선 순위를 둡니다. 이미지는 페이지 로딩에 큰 영향을 미칩니다.이는 스크롤없이 볼 수있는 콘텐츠가 그 아래에있는 콘텐츠보다 먼저 로드 된다는 것을 의미합니다. 이는 CSS 요소의 우선 순위를 지정하여 수행 할 수 있으며,이를 통해 사용자는 전체 페이지가 로딩 될 때까지 기다릴 필요없이 페이지를 읽을 수 있다는 의미입니다.

 

 

[IT 인터넷 관리 방법] - 티스토리 페이지 로딩 속도 분석하기, 구글에게 이쁨 받는 방법

[IT 인터넷 관리 방법] - 웹 페이지 로딩 속도 단축시키기, First Contentful Paint 해결 방법