블로그를 운영할 때 페이지 로딩 속도의 관리는 검색 엔진들이 빠른 사이트를 선호한다는 사실을 제외하더라도 매우 중요합니다.
블로그 홈페이지 속도가 느리면 어렵게 방문한 사람들은 기다리지 않고 바로 다른 사이트로 이탈하며 광고 내용의 로딩이 느려지므로 방문자가 광고를 보거나 클릭할 기회도 적어지기 때문입니다.
이 번 글에서는 티스토리 블로그의 대표적인 무료 스킨(Skin) 5 종에 대해 페이지 로딩 속도를 정량적으로 측정하고비교해 보았습니다.
티스토리 스킨과 속도 측정 조건
애드센스 승인 후 실제 운영 중인 블로그에서 각 스킨의 페이지 로딩 속도 테스트를 하는 것은 여러 가지 문제 가능성이 있고 광고 송출 상황에 따라 속도도 크게 다릅니다.
따라서 속도 비교 테스트에는 애드센스 승인 전의 신규 개설된 블로그에서 비교 테스트를 진행하였습니다. 진행 조건은 아래 테이블과 같습니다.
테스트 블로그에는 모두 5개의 글이 포스팅되어 있으며 각 포스팅 글의 크기는 평균 글자 수가 약 1500 글자 정도에 30 KB 용량의 이미지가 하나씩 삽입되어 있었습니다.
또한 블로그 스킨을 적용한 후에는 플러그인이나 자바스크립트 등의 다른 변경 없이 초기 상태 그대로의 기본 설정으로 테스트하였습니다.
티스토리 스킨의 페이지 로딩 속도 측정 조건
| 테스트 블로그 | 신설 블로그 (광고없음) |
| 블로그의 포스팅 글수 | 5개 |
| 포스팅 글 1개 크기 | 평균 1,500글자 / 이미지 30 KB 1개 |
| 각 스킨의 설정 | 초기 상태의 기본 설정 |
| 비교 스킨 | 북클럽, #1, #2, 레터, 매거진 |
| 속도 측정 도구 | PageSpeed Insights |
비교 테스트했던 북클럽(Book Club), #1, #2, 레터(Letter), 매거진(Magazine) 5개의 무료 스킨은 페이지 로딩 속도에 대한 다양한 평가가 있는 스킨 중에서 선정하였습니다.
고용량 이미지를 많이 삽입하거나 다양한 기능을 추가하지 않는다면 데스크톱 속도는 대부분 큰 문제가 없으므로 방문 비중이 크고 속도가 상대적으로 느린 모바일에 대한 속도만 분석하였습니다.
속도 측정은 사용 방법이 상대적으로 간편한 구글의 PageSpeed Insights(페이지 스피드 인사이츠)를 활용하였습니다.
이 측정 사이트 주소를 모르는 분들은 아래 링크를 참조하시기 바랍니다.
티스토리 스킨 속도 측정 방법
5개의 각 스킨을 적용한 후 PageSpeed Insights에서 3번을 측정하고 가장 높거나 낮은 값은 제외 한 중간 값으로 비교 정리하였습니다.
아래의 이미지는 북클럽 스킨의 실제 속도 측정 결과를 보여주는 PageSpeed Insights의 화면입니다. 각 스킨에 대한 속도 측정 결과는 하단의 테이블에 정리되어있습니다.
 |
| PageSpeed Insights에서 티스토리 북클럽 스킨 속도를 측정한 결과 화면 |
아래 테이블에서 볼 수 있듯이, 많은 블로거들의 사용 후기와 유사하게 #1 스킨의 속도가 가장 빠른 것으로 측정되었습니다.
그다음이 #2 스킨, 레터 스킨, 매거진 스킨, 북클럽 스킨 순이었습니다. 북클럽이 구글 애드센스 광고와도 비교적 잘 매칭 되고 전체적인 구성에 대해서도 호평이 많은 스킨이지만 페이지 속도는 느립니다.
#1, #2 스킨은 불필요한 기능을 대폭 줄이고 CSS 스타일 파일과 HTML 파일도 슬림하게 축소하여 페이지 로딩 속도가 많이 개선됩니다.
포스팅 글이 늘어나고 광고까지 게재되면 경우에 따라 속도가 달라질 수 있겠지만 큰 틀에서의 속도 순위는 바뀌지 않을 것이라는 의견입니다.
티스토리 스킨의 페이지 로딩 속도 측정 결과
| 테스트 스킨 | 북클럽 | #1 | #2 | 레터 | 매거진 |
| 전체 성능 (점수) | 55 | 86 | 76 | 60 | 52 |
| First Contentful Paint (초) | 6.1 | 2.9 | 3.0 | 3.8 | 7.0 |
| Time to Interactive (초) | 6.8 | 4.6 | 15.5 | 7.3 | 7.7 |
| Speed Index (초) | 7.2 | 4.2 | 4.1 | 5.7 | 8.2 |
| Total Blocking Time (밀리초) | 10 | 100 | 180 | 180 | 40 |
| Largest Contentful Paint (초) | 6.9 | 2.9 | 3.0 | 5.6 | 9.0 |
| Cumulative Layout Shift (초) | 0.000 | 0.000 | 0.000 | 0.012 | 0.000 |
First Contentful Paint (FCP, 최초 콘텐츠 페인트)
- 의미: 사용자가 페이지에서 텍스트, 이미지 등 첫 번째 콘텐츠를 볼 수 있게 된 시점까지 걸린 시간
- 예시: 흰 화면만 보이다가 처음으로 로고나 글씨가 뜨는 순간
- 적정 수준: 1.8초 이내
Time to Interactive (TTI, 상호작용 가능 시간)
- 의미: 페이지가 완전히 반응 가능해진 시점까지의 시간
- 예시: 버튼이나 메뉴를 눌렀을 때 실제로 반응하기 시작하는 시점
- 적정 수준: 3.8초 이내
Speed Index (속도 지수)
- 의미: 화면이 얼마나 빨리 시각적으로 채워지는지를 종합적으로 측정한 수치
- 예시: 화면이 빠르게 꽉 차는 페이지일수록 Speed Index가 낮음
- 적정 수준: 3.4초 이내
Total Blocking Time (TBT, 총 차단 시간)
- 의미: 페이지가 완전히 반응하기까지 사용자 입력을 무시한 총 시간 (밀리초)
- 예시: 버튼을 눌러도 반응하지 않는 구간의 누적 시간
- 적정 수준: 200ms 이하
Largest Contentful Paint (LCP, 최대 콘텐츠 페인트)
- 의미: 페이지에서 가장 큰 콘텐츠 요소(이미지/텍스트 등)가 나타날 때까지 걸린 시간
- 예시: 기사 제목, 메인 이미지 등이 뜨는 시점
- 적정 수준: 2.5초 이내
Cumulative Layout Shift (CLS, 누적 레이아웃 이동)
- 의미: 페이지 로딩 중에 레이아웃이 얼마나 많이 튀었는지 측정하는 지표
- 예시: 글 읽고 있는데 갑자기 이미지가 떠서 글이 밀리는 현상
- 적정 수준: 0.1 이하
결론
이미 잘 운영하고 있는 블로그의 스킨을 중간에 변경하는 것은 여러 가지 문제가 있을 수 있다는 의견들도 많지만 필자의 의견은 다소 다릅니다.
블로그 초기에 잘 모르고 선정한 스킨이라면 페이지 로딩 속도와 블로그/광고 특성을 고려하여 최적의 스킨으로 변경하는 것도 좋은 전환점이 될 수 있기 때문입니다.
물론 검색 엔진 소유권 인증 관련 코드나 광고 코드, 개인적으로 추가한 스크립트 등은 모두 수동으로 잘 이전하고 확인하는 과정이 필요합니다.
이번 글에서 공유한 티스토리의 대표적인 무료 5종 스킨의 페이지 로딩 속도 비교 결과를 변경에 참조하시되 더 좋은 성능을 원한다면 불가피하게 유료 스킨을 사용해야 합니다.
%EC%99%80%EC%8A%A4%ED%83%80%ED%8A%B8%ED%95%98%EC%9A%B0%EC%8A%A4%EC%95%9E%EC%A0%84%EA%B2%BD(%EC%95%84%EB%9E%98).webp)