티스토리 블로그 속도 최적화를 위한 12가지 방법

티스토리 블로그 속도 최적화 방법

티스토리 블로그를 검사하고 최적화를 할 수 있는 방법은 많다. 그러나, 이곳에서는 Think with Google을 통해서 확인할 수 있는 최적화 방법들을 통해 웹페이지의 속도를 빠르게 하고, 전환율을 높이는 것에 목적이 있다. 대한민국 기준으로 사이트 속도는 4G로 측정되며, 기본적으로 모바일 기준으로 속도를 검사할 수 있다.

맞춤 권장사항이 담긴 전체 보고서를 통해서 나의 웹사이트의 문제점들을 쉽게 찾을 수 있는 것이다. 가능하다면 평균 등급을 빠르게 할 수 있으면 좋지만, 웹사이트의 볼륨이 클 경우에는 한계가 있으므로 과한 투자를 할 필요는 없다. 일반적으로 2.5초 이내에 모바일 페이지 로드가 되면 웹사이트 속도가 빠른 것이다. 이는 티스토리 블로그도 마찬가지다.

웹사이트의 첫인상은 매우 중요하다. 고객은 기다려주지 않기 때문이다. 사이트의 속도에 따라 전환율과 이탈률은 크게 달라진다. 콘텐츠가 풍부하지만, 이탈률이 높다면 웹사이트를 이용하는데 어려움을 겪는 것이므로, 이를 해결해줘야 한다. 통계에 의하면, 로드 시간을 0.1초 줄이면 전환율을 8% 늘릴 수 있다고 한다.(Goole/Deloitte - Milliseconds Make Millions) 따라서, 가능하다면 사이트 속도 개선을 위한 권장 사항들을 확인하고 개선하는 것이 좋다.

공통적으로 대부분의 웹사이트나 티스토리 블로그에서 속도 개선 방법에서 효과가 큰 것은 이미지 용량을 줄이고, 애니메이션 콘텐츠(Gif)를 사용하지 않는 것이다. 따라서, 티스토리에서 제공하고 있는 치환자를 통해서 네트워크 용량을 쉽게 줄일 수 있다. 이미지만 잘 수정하더라도 사이트 속도가 크게 개선되기 때문에 반드시 수정해주는 것이 좋다. 이와 별개로 아래의 권장사항 중에서 수정이 가능한 항목을 체크하여 직접 티스토리 블로그 속도를 최적화할 수 있을 것이다.

1. DOM 크기가 지나치게 크지 않도록 주의

DOM 트리가 크면 페이지 성능이 저하될 수 있다. 필요할 때만 DOM 노드를 만들고, 더 이상 필요하지 않은 DOM 노드는 삭제한다.

2. 사용하지 않는 CSS 지연 실행

사용하지 않는 CSS가 포함된 스타일시트 때문에 콘텐츠가 화면에 나타날 때까지의 대기 시간이 대폭 증가할 수 있다. 불필요한 CSS는 삭제한다. 

3. 웹 글꼴 로드 중에 텍스트 표시

글꼴 표시 CSS 기능을 이용해 웹 글꼴이 로드되는 동안 텍스트가 사용자에게 표시되게 한다. 기본적으로 티스토리 블로그의 글꼴을 수정하지 않았다면, 돋움이나 맑은 고딕이 기본 로컬 폰트로 설정되어 있다.

4. 화면을 벗어난 이미지 지연 표시

페이지가 로드될 때 화면을 벗어난 이미지는 사용자에게 표시되지 않으므로 처음에는 이러한 이미지를 로드하지 않아도 된다. 지연 로드를 활용해 페이지 로드 속도를 높일 수 있다.

5. 정적 애셋 제공에는 효율적인 캐시 정책 활용

HTTP 캐싱을 사용하면 재방문자의 페이지 로드 시간이 줄어들 수 있다. 페이지 재방문 시 속도를 높일 수 있도록 캐시 수명을 늘릴 수 있다.

6. 이미지 크기 조정

사용자의 화면에 렌더링 되는 크기보다 큰 이미지가 페이지에 있으면 좋지 않다. 디스플레이 크기에 맞게 이미지 크기를 조정하면 페이지 로드가 빨라진다.

7. 애니메이션 콘텐츠는 동영상 형식 사용

애니메이션의 경우 MPEG4/WebM 동영상을, 정적 이미지는 PNG/WebP를 사용한다. 네트워크 사용량을 줄이기 위해 GIF는 사용하지 않는 것이 좋다.

8. CSS 최소화

파일 실행에 필요하지 않은 데이터를 코드 파일에서 모두 삭제할 수 있다. 이렇게 하면 응답 시간이 단축되고 인터넷 통신 비용이 감소한다. 압축을 하기 위한 방법은 온라인 도구를 통해서 CSS를 쉽게 압축할 수 있다.

9. 자바스크립트 실행 시간 단축

자바스크립트가 비효율적으로 작동하면 페이지가 느려질 수 있다. 코드 파싱, 컴파일링 및 실행 시간을 줄여야 한다.

10. 적절한 네트워크 전송량 유지

페이지 로드 시간 단축을 위해 네트워크 요청의 전체 크기를 줄여야 한다. 다만, 꼭 필요한 구조라면 당장 개선할 수 있는 것은 없다.

11. 렌더링을 지연시키는 리소스 제거

페이지 스타일이나 기능에 활용되는 리소스 때문에 페이지의 기본 콘텐츠가 느리게 표시되고 있다. 중요한 JS/CSS는 인라인으로 제공하고, 중요하지 않은 JS/스타일은 모두 나중에 표시되게 한다. 속도를 지연시키는 JS의 경우에는 하단에 배치한다.

12. 효율적인 이미지 인코딩

인터넷 트래픽이 적을수록 브라우저에서 화면에 콘텐츠를 다운로드하고 콘텐츠를 렌더링 하는 시간이 빨라진다. 이미지를 최적화하면 웹사이트의 성능이 향상될 수 있다.