티스토리 최적화 과정 - 라이트 하우스

최적화 개요

티스토리 블로그를 최적화하기 위한 여러 가지 방법들을 통해 조금씩 개선해나가고 있다. 분명한 것은 내가 개선할 수 있는 요소가 있고, 그렇지 않은 요소가 있다는 것이다. 특히, 서버 사이드에서 요청되는 리소스는 내가 제어할 수 없다. 내 티스토리 블로그에 필요하지 않은 스크립트 또한 처리할 수 없다는 의미가 된다.

기본적으로 라이트 하우스를 통해서 티스토리 블로그의 개선점을 찾아가고 있다. 어느 정도 First Contentful Paint나 Time to Interactive, Total Blocking Time등의 개선을 이뤄냈다. 그러나, 여전히 Speed Index나 Cumulative Layout Shift, Largest Contentful Paint는 해결하지 못하고 있다.

어차피 대부분의 트래픽은 랜딩페이지가 아닌 콘텐츠 페이지에 생성되므로 Use video formats for animated content의 요소는 당장 해결할 문제는 아니다. 움직이는 이미지의 경우(Gif)는 랜딩 페이지에만 적용되어 있기 때문이다. Properly size images의 경우에도 랜딩페이지에만 적용되는 요소이기 때문에 콘텐츠 페이지와 랜딩 페이지의 개선점이 다르다. 따라서, 콘텐츠 페이지에서 발생하는 문제점을 해결하기 위해 콘텐츠 페이지에서 발생하는 Network의 로딩 속도를 Lighthouse를 통해 개선하고자 했다.

1. 자동 광고가 적용된 상태에서의 최적화 작업

구글 애드센스 수익을 위해서 최소한의 광고 단위 배치는 필요하다. 다만, 수동 광고의 경우에는 당장의 수익적인 이익은 있을지 몰라도 장기적으로 봤을 때는 웹 페이지의 코어 웹 바이탈 심사에 탈락할 수 있다. 바로 이 점이 내가 개선의 필요성을 느낀 부분이다.

데스크톱에 비해 모바일의 리소스 부담이 큰 것을 알 수 있었다. 단순히, 자동 광고의 문제였다면 광고를 해제함으로써 문제를 해결할 수 있었겠지만, 원인은 다른 곳에 있었다. 모바일의 경우에는 리소스 부담이 상당했다. 가장 문제가 되는 항목으로는 Eliminate render-blocking resources였다. 이 문제를 해결하기 위해서는 JS/CSS의 문제를 해결해야만 했다. 그러나, 서버에서 요청되는 스크립트는 제어할 수 있는 방법이 없었다. 티스토리 블로그의 속도를 저하시키는 요소로는 lightbox.min.css, font.css, dialog.css, jquery-3.2.1.min.js, base.js, kakao.min.js등이 있다.

콘텐츠 페이지에서 사용하지 않는 자바 스크립트만이라도 제어할 수 있다면 퍼포먼스 점수를 높일 수 있을 것이다. reaction-button-container.min.js, tiara.min.js와 같은 스크립트는 모바일 리소스에 큰 부담을 주고 있었다. 이외에 이미지 사이즈를 줄이거나 Ensure text remains visible during webfont load와 같은 항목은 개선할 수 있을 것이다. 즉, 크게 보면 속도 저하의 원인이 되는 것은 자바스크립트와 웹 폰트라고 할 수 있을 것이다.

2. 자동 광고가 적용되지 않은 상태의 퍼포먼스

자동 광고가 적용되지 않을 때는 다른 티스토리 블로그보다 속도가 빠른 것을 확인했다. 최소한의 자바스크립트와 CSS 압축 등의 작업의 결과라고 할 수 있다. 그럼에도 불구하고 많은 DOM 구조는 다은 웹페이지보다 많은 리소스를 부담하기 때문에 최대한 용량이 큰 요소들을 줄여나가는 것이 중요한 개선 포인트라고 할 수 있을 것이다.

특히, 웹폰트의 경우에는 <link>로 가져온 것들을 @font-face로 전환해주는 것이 속도 절감에 매우 중요한 포인트가 됐다. 이러한 개선점들이 결과가 정확하게 나오기 위해서는 28일 뒤에 확인해야 하기 때문에 모바일의 코어 웹 바이탈 점수가 높아지는지 확인하고 대응해야 할 것으로 보인다.