티스토리 뷰

티스토리 로딩 속도를 살펴보면 사실 그다지 느리지는 않다. 하지만 구글 페이지 스피드에서 성능 검사를 해 보면 모바일의 경우 낮은 성능 점수가 나온다.

참고로 구글 페이지 스피드의 성능 점수가 실제 로딩 속도의 성능을 말하는 것은 아니며 이 것을 가지고 다른 플랫폼과 상대적으로 평가하는 것은 바람직하지 않다. 가령 구글 블로그 스팟과 티스토리를 구글 페이지 스피드 점수로 비교해서는 절대 안 된다.

티스토리 로딩 속도

티스토리 로딩 속도를 느리게 하는 대표적인 요인 4가지

  1. 광고
  2. 고화질 대용량 이미지와 동영상 첨부
  3. 티스토리 리소스
  4. 사용자가 추가한 리소스

구글 SEO를 염두에 두지 않는 다면 로딩 속도는 큰 의미가 없다. 대체적으로 대부분의 티스토리 블로그들은 사람의 눈으로 보았을 때 느리다는 것을 절대 느끼지 못한다.

로딩 속도가 느려 로딩되는 동안 화면에 아무것도 표시되지 않는 시간이 길 경우 방문자가 이탈하기 때문이다.

티스토리의 경우 대용량의 이미지와 동영상까지 마구 넣은 경우가 아니라면 로딩이 지연되는 현상을 잘 느끼지 못한다.

하지만 구글 유입과 구글 검색 엔진 최적화(SEO)를 원한다면 상황이 좀 달라진다. 사람의 눈이 아니라 AI 같은 컴퓨터가 로딩 속도를 밀리세컨드까지 계산하니 신경을 쓰지 않을 수가 없다.

게다가 요즘 구글 유입에 각별히 신경 쓰고 있고 똑같은 양질의 글이라면 최적화가 잘 된 블로그가 더 유리할 것 같다는 생각을 한다.

애드센스를 비롯한 광고들

티스토리 로딩 속도에 가장 크게 악영향을 주는 것이 광고이다. 이 것은 티스토리뿐만 아니라 모든 웹사이트는 동일하다.

애드센스 광고를 달고 있는 이상 로딩 속도를 빠르게 할 수 없다. 구글 페이지 스피드 모바일 점수를 보면 광고가 있는 경우 대략 30 ~ 40점 정도 점수가 하락하게 된다.

애드센스 광고가 로딩 속도를 저하시키는 문제로 몇 가지 꼼수들을 사용하기도 한다.

하지만 광고 수익이 낮아 지거나 자칫 잘 못하면 애드센스 계정을 정지당할 수도 있다는 해외 사례들을 볼 수 있다.

수익을 내야 하는 블로그라면 광고 부분은 어쩔 수 없는 부분이다.

고화질 대용량 이미지와 동영상 첨부

사용자에 따라 광고보다 더 로딩 속도에 악영향을 미치는 것이 이미지와 동영상일 수 있다.

간혹 PC로 접속해도 로딩이 엄청 느린 티스토리 블로그를 볼 수 있다. 살펴보면 고화질의 사진을 용량을 줄이지 않고 수십 장씩 업로드한 경우가 대부분이다.

참고로 대용량의 이미지를 많이 넣게 되면 포스팅 용량이 커지게 되며 검색엔진이 해당 포스팅을 수집해 가지 않을 수 있다.

네이버의 경우 4메가 이상의 페이지는 수집해 가지 않는다고 가이드하고 있다.

아래는 티스토리 스킨 중 가장 빠른 #1 스킨으로 이미지가 있는 경우와 없는 경우를 구글 페이지 스피드에서 비교한 결과이다.

구글 페이지 스피드

여기에 광고까지 있다면 점수는 더 낮아진다.

구글 페이지 스피드에서는 아래와 같이 성능을 개선할 수 있는 방법을 제안하고 있다.

이미지 문제 개선

이미지 크기를 줄이고 차세대 형식의 이미지를 사용하고 오프 스크린 이미지 지연을 하면 로딩 속도가 대략 10초 이상 줄어들게 된다고 한다.

누구나 할 수 있는 이미지 크기와 차세대 형식 이미지 사용만으로도 좋은 결과를 얻을 수 있다.

오프 스크린 이미지 지연은 티스토리의 경우 100% 가능한 것도 아니고 일반 블로그가 할 수 있는 문제도 아니다.

이 블로그의 경우 이미지를 지연 로딩시키고 있지만 100% 완벽하다 할 수 없다. 서버 측에서 해 주지 않는 이상 100% 완벽하게 구현할 수는 없다.

이 문제 관련해 티스토리 측에 건의도 했지만 답이 없다. 이미지 지연 로딩은 블로거만의 이익뿐만 아니라 티스토리 이익 또한 크다 할 수 있다.

티스토리 로딩 속도를 개선하고 싶다면 최소한의 이미지를 사용하되 용량을 줄이고 이미지 형식 또한 차세대 형식의 이미지를 사용하는 것이 중요하다.

티스토리 시스템 문제

티스토리 블로그에는 티스토리 운영에 필요한 각종 파일들이 내 의지와 상관없이 내 블로그에 로드된다.

그중에서도 렌더링을 차단시키는 리소스와 사용하지 않는 자바스크립트 파일들이 로딩 속도를 저하시키고 있다.

우선 렌더링을 차단시키는 리소스들을 살펴보자.

렌더링 차단 리소스들

테스트에 사용된 스킨은 #1 스킨으로 붉은색 박스로 표시된 것만 제외하면 모든 티스토리는 동일하다.

결과를 보면 가장 큰 문제가 웹폰트 사용과 제이쿼리 그리고 카카오톡 SDK(카카오톡 공유 버튼)이다.

웹폰트가 로딩 속도를 저하시킨다는 것은 다들 잘 알고 있을 것이다.

티스토리에서 웹폰트가 사용되는 곳은 몇 군데 안되며 글 자 수 또한 몇 글 자 되지 않는다.

대표 적으로 본문 하단 공감 버튼 표시와 구독 표시를 하는 글자이다. 이 몇 글자 때문에 웹폰트를 사용해야 하는가.

그리고 제이쿼리 이젠 그만 사용해도 되지 않나 싶다.

마지막으로 카카오 공유 버튼이다.

난 공유 버튼을 선호하지 않지만 티스토리에서는 강제로 적용시키고 있다. 이 것은 사용자 선택에 맡겨야 하지 않나 싶다.

티스토리가 강제 적용시키고 있는 것 중 라이트박스도 있다. 본문 이미지를 클릭하면 이미지가 팝업 되는 것 말이다.

얼마 전까지만 해도 라이트박스는 티스토리 플러그인으로 사용자가 선택해 사용할 수 있었다.

그런데 언제부터인지 무조건 적용되기 시작해서 지금은 아예 플러그인에서 사라지고 강제 적용되고 있다.

내 경우 라이트박스 기능이 불필요하기 때문에 제거해 버렸다.

이렇게 티스토리에서 제공되고 있는 리소스들은 일반 사용자가 어떻게 할 수가 없다.

해결 방법이라고는 티스토리 측에서 사용하지 않는 자바스크립트 파일과 렌더링을 차단하는 리소스를 제거하든 개선하 든 해 주어야만 한다.

사용자가 추가한 리소스

일반적인 사용자가 추가하는 대표적인 리소스들을 보면 구글 애널리틱스와 태그 매니저 그리고 티스토리 플러그인과 개별적으로 설치한 목차 플러그인 등이 있다.

사용자가 직접 추가하는 리소스들은 잘 알고 쓴다면 약이 될 수 있지만 단순히 이뻐서 또는 남들이 좋다고 하니 사용한다면 자칫 독이 될 수 도 있다.

티스토리 스킨에 무언가를 추가할 때는 꼭 나에게 필요한 것인지 악영향은 없는지 잘 살펴보고 결정해야 한다. 티스토리에서 제공하는 플러그인도 예외는 아니다.

가급적이면 있는 그대로 사용하는 것을 권장한다. SEO에 도움이 된다고 공유되는 것 중 실제 도움이 되는 것은 아마 없지 않나 싶다.

확신이 없다면 있는 그대로 사용하는 것이 바람직하다.

개인적으로 제말 아래 코드 좀 넣지 말았으면 한다.

<meta name="NaverBot" content="All"/?>
<meta name="NaverBot" content="index,follow"/>
<meta name="Yeti" content="All"/>
<meta name="Yeti" content="index,follow">

누가 저 메타태그를 사용하라고 했는지 모르겠지만(아마 전자책?) 참 의미도 없고 쓸모도 없고 구문도 안 맞고 티스토리에서는 사용하지 않는 것이 좋은 저 태그를 왜 사용하는지 모르겠다.

꼭 사용하고 싶다면 아래 코드를 사용하면 되지만 티스토리는 각 페이지 별로 컨트롤할 수없기 때문에 되려 좋지 않을 것 같다.

<meta name="robots" content="index, follow">

티스토리 로딩 속도에 영향을 미치는 4가지 사항을 알아보았다. 로딩 속도 개선을 위한 다면 최소한 이미지만 신경 써도 유관으로 로딩 속도가 느리다는 것을 느끼지 못할 것이다.