프롤로그
블로그를 운영하다 보면 속도의 중요성을 깨닫게 됩니다. 이 번 글에서는 티스토리 스킨 몇 개에 대한 속도를 비교해 보았습니다. 블로그 홈페이지 속도가 느리면 어렵게 방문한 사람들은 기다리지 않고 바로 다른 사이트로 이탈하며 광고 내용의 로딩이 느려지므로 방문자가 광고를 보거나 클릭할 기회도 적어지기 때문입니다.
티스토리 스킨 속도 비교 조건
애드센스 인증 후 잘 운영 중인 블로그로 스킨 변경 테스트를 하는 것은 여러 가지 문제 발생 가능성이 있으므로 신규 개설된 블로그로 비교 테스트를 진행하였습니다. 진행 조건은 아래 테이블과 같습니다.
테스트 블로그에는 5개의 글이 포스팅되어 있으며 각 포스팅 글의 크기는 평균 글자 수가 약 1500 글자 정도에 30 kB 용량의 이미지가 하나씩 포함되어 있었습니다.
티스토리 스킨 속도 비교 테스트 조건
| 테스트 블로그 | 신설 블로그 (광고없음) |
| 블로그의 포스팅 글수 | 5개 |
| 포스팅 글 1개 크기 | 평균 1,500글자 / 이미지 30 kB 1개 |
| 각 스킨의 설정 | 초기 상태의 기본 설정 |
| 비교 스킨 | 북클럽, #1, #2, 레터, 매거진 |
| 속도 측정 도구 | PageSpeed Insights |
비교 테스트했던 북클럽(Book Club), #1, #2, 레터(Letter), 매거진(Magazine) 등 5개의 스킨은 개인적 취향 기준으로 다양한 속도 평가가 있는 스킨들을 선택한 것이며 블로그에 적용한 후 다른 변경 없이 초기 상태 그대로의 기본 설정으로 테스트하였습니다.
고용량 이미지를 과도하게 삽입하거나 불필요한 기능을 무수히 넣는 등의 문제만 없다면 데스크톱 속도는 대부분 블로그에서 문제가 없으므로 방문 비중이 크면서도 속도가 상대적으로 느린 휴대전화에 대한 속도만 분석하였습니다.
속도 측정은 사용이 상대적으로 간편한 구글의 PageSpeed Insights를 활용하였습니다. 해당 사이트를 모르시는 분들은 아래 링크를 참조하시기 바랍니다.
티스토리 스킨 속도 비교 조건
각 스킨 적용 후 3번을 PageSpeed를 통해 측정하고 가장 높거나 낮은 값은 제외 한 중간 값을 정리하였습니다. 아래의 이미지는 북클럽 속도 측정 결과에 대한 예시 화면입니다. 각 스킨에 대한 자세한 결과는 하단의 테이블에 정리되어있습니다.
아래 테이블에서와 같이 #1 스킨의 속도가 가장 빠르게 측정되었습니다. 그다음이 #2 스킨, 레터 스킨, 매거진 스킨, 북클럽 스킨 순이었습니다. 북클럽이 구글 애드센스 광고와도 비교적 잘 매칭 되고 전체적인 구성에 대해서도 호평이 많은 스킨이지만 속도 측면은 느립니다.
#1, #2 스킨은 불필요한 기능을 대폭 줄이고 CSS 스타일 파일과 HRML 파일도 슬림하게 압축하여 속도가 많이 개선됩니다. 포스팅이 글이 많고 광고까지 게재되면 속도가 어떻게 될지는 시간을 좀 더 두고 봐야 하겠습니다. 추 후 이에 대한 결과도 나오면 공유하도록 하겠습니다.
티스토리 스킨 속도 테스트 결과 테이블
| 테스트 스킨 | 북클럽 | #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 |
이미 잘 운영하고 있는 블로그의 스킨을 변경하는 것은 여러 가지 문제가 있을 수 있다는 의견들도 많고 저도 아직 경험하지 못하였습니다. 새로 시작하는 신규 블로그의 스킨 선정 시에 이 결과를 참조하시면 좋을 것 같습니다.
애드센스 승인된 블로그의 스킨을 변경한 후기도 참조하시면 좋을 것 같습니다.
'디지털노마드 > 블로그' 카테고리의 다른 글
| 애드센스 결제 수단 등록 방법 - 광고 수익 지급 (0) | 2022.11.26 |
|---|---|
| 티스토리 리스트 글 제목 모두 보이도록 수정 하기 (0) | 2022.10.13 |
| 애드센스 승인 블로그, 스킨 변경 후기 (1) | 2022.08.24 |
| 티스토리 개인 도메인 연동 - 블로그 설정과 구글 등록 방법 (0) | 2022.07.26 |
| 티스토리 개인 도메인 연동 - 구입 및 레코드 설정 방법 (0) | 2022.07.23 |