티스토리 블로그 속도 높이는 방법

티스토리 블로그를 운영하면서 방문자가 나의 블로그에 방문했을 때 로딩 속도가 오래 걸린다면 방문자는 뒤로 가기를 누르게 될 것입니다.

이러한 이유 때문에 모바일에서 속도가 느리다면 많은 방문자들이 방문을 하지 않을 것입니다. 그래서 구글 PageSpeed Lisights 사이트를 통해 웹페이지의 속도를 개선하는 방법에 대해 알아보도록 하겠습니다.

먼저 웹페이지에 방문을 해야합니다.  https://developers.google.com/speed/pagespeed/insights/를 통해 웹페이지에 접속할 수 있습니다. 웹페이지에 접속하여 블로그에 주소를 입력하고 분석을 클릭합니다.

결과가 상당히 충격적입니다. 모바일 상황에서는 점수가 10점이 나왔습니다. 하지만 데스크톱에서는 71점이 나왔습니다.

모바일에서 점수가 좋지 않기 때문에 어떤 점을 개선해야 하는지 알아보겠습니다.

 

스크롤을 아래로 내리면 어떤 것을 개선해야 하는지 개선할 경우 어느 정도 단축되는지를 확인할 수 있습니다. 이중 우리가 할 수 있는 것은 많이 없습니다. 그럼 우리가 할 수 있는 점을 개선해보도록 하겠습니다.

 

이미지 로딩속도 높이기

사실 티스토리에서 로딩이 가장 오래 걸리는 것은 이미지입니다. 그래서 이미지의 로딩 속도를 높이는 것만으로 모바일에서 로딩 속도를 개선할 수 있습니다.

구글에서는 오프스크린 이미지 지연하기 등 다양한 개선책이 있습니다. 오프 스크린 이미지 지연하기가 무엇이냐면 중요한 리소스의 로드를 완료한 후 오프 스크린 및 숨겨진 이미지를 로딩함으로써 로딩 속도를 개선하는 것입니다. 하지만 매우 복잡하고 건들어야 하는 코드도 많기 때문에 넘어가도록 하겠습니다.

이미지의 로딩속도를 높이기 위해서는 높은 압축률의 형식을 사용하는 것입니다. 현재 필자에 블로그에 업로드된 이미지는 JEPG형식이 대부분입니다. 처음에는 PNG로 올렸지만 모든 이미지를 JEPG형식으로 변경하였습니다.

구글에서도 차세대 형식을 사용해 이미지 제공하기를 확인하면 PNG, JEPG 형식보다는 압축률이 높은 JEPG 2000, JEPG XR, WebP형식을 사용하는 것을 권장합니다.

그리고 웹에서 볼 수 있는 이미지의 크기이면 되기 때문에 굳이 이미지의 크기를 크게 인코딩하여 업로드할 필요가 없습니다.

https://imagecompressor.com/ko/를 통해 이미지를 최소사이즈로 줄여 업로드하거나 위에서 말한 형식을 사용하여 업로드하는 것이 좋을 것 같습니다.

 

스크립트 제거하기

렌더링 차단 리소스 제거하기를 클릭하면 로딩을 방해하는 리소스를 확인할 수 있습니다. 이 리소스를 확인하여 티스토리의 스킨 편집에서 삭제를 해주면 됩니다.

하지만 중요한 리소스일 수 있기 때문에 잘 확인하고 삭제하시는 것을 추천드립니다. 하지만 필자는 이미지의 로딩속도를 개선하는 것만으로도 큰 효과를 볼 수 있다고 생각됩니다.

 

이렇게 티스토리 블로그의 속도를 높이는 방법에 대해 알아보았습니다. 블로그에서 가장 큰 로딩은 이미지가 차지하고 있기 때문에 이미지를 압축률이 높은 형식을 사용하고 이미지의 사이즈를 줄요 업로드하는 것이 좋을 것 같습니다.