티스토리 기본스킨 성능 테스트

티스토리 무료 스킨들을 돌아가며 적용시켜 보다가, 이번에는 내가 스킨을 한번 만들어 보기로 했다. 

 

스킨을 제작하는 과정에서 구글의 pagespeed insight에서 점수를 계속 테스트 했는데, 아무리해도 점수가 50점을 넘기기가 힘들었다.

 

미리 최적화 되어 있는 스킨을 골라, 그 스킨의 css를 고치는 편이 더 쉬울 것 같다는 생각에 기본 스킨들의 성능을 테스트 해보기로 했다.

 

1. 테스트 환경

테스트 환경이 일정해야 하기에, 블로그를 하나 새로 팠다.

 

해당 포스팅에는 중간중간 약간의 글, 10개의 사진, 1개의 지도가 포함되어 있다.

 

사용하는 플러그인은 youtube, 반응형 웹스킨 이미지 최저화, 이전 발행글 넣기, 카테고리 글 더보기로 총 4개를 이용했다.

 

모든 스킨 테스트용 이미지

 

테스트는 구글의 pagespeed insights로 했다. 

 

해당 주소의 성능, 검색 지표 등 다양한 내용을 확인할 수 있다.

 

PageSpeed Insights

 

2. hello world

스킨의 html과 css를 제외하고 기본 서버이 응답 시간을 테스트 해보고 싶어졌다.

 

아무리 스킨을 최적화 시켜도, 기본적으로 서버에서 오는 응답 시간이 느리면 어쩔수 없다.

 

그래서 스킨편집에서 모든 html, css를 지우고 태그가 <h1>인 hello world만 출력해보기로 했다.

 

아래처럼....

 

 

이렇게 하고 해당 주소로 들어가면 아무것도 없이 hello world!가 출력되는 것을 확인할 수 있다.

 

그리고 이 주소를 pagespeed insights에 넣어봤다.

 

 

1) 모바일 환경

모바일 환경에서의 성능점수는 78점이었다. 

 

문제는 이 페이지가 단순하게 h1 태그의 hello world!만을 출력한다는 것.

 

이 말은 아무리 사이트를 최적화 해봤자 티스토리 서버를 이용한다면 모바일 환경에서 78점을 넘기긴 불가능하다는 것을 의미한다.

 

 

아래는 측정 항목의 세부 내용이다.

 

첫번째 컨텐츠가 그려지는 것과 마지막 컨텐츠가 그려지는데 까지 3.3~4.2초가 걸렸다.

 

 

단순하게 서버에서 css, min.js등 자바스크립트를 불러오는데 1.7초, 그냥 hello world 출력에만 4.1초이다.

 

모바일에서의 최적화는 한수 접고 들어가는 수밖에 없는 것 같다.

 

 

2) 데스크탑 환경

데스크탑에서의 점수는 거의 100점에 근접한 점수가 나왔다.

 

 

아마 헤더값이 모바일일 경우, 모바일 환경을 제공하기 위해 더 많은 자바스크립트를 전송하는게 아닌가 싶기도 하다.

 

구체적인건 별로 알고싶지 않아서 넘겼다.

 

 

그럼 이제 스킨들을 하나씩 테스트 해서 점수를 보기로 하자.

 

주의할 점은, 아래의 점수들이 절대적인 수치가 아니라는 것.

 

테스트 당시의 서버 환경, 네트워크 환경에 따라 점수의 변동이 있을수는 있다.

 

2. Letter

 

3. Magazin

 

4. Book Club

 

5. #1

 

6. #2

 

7. Odyssey

 

8. Poster

 

9. Portfolio

 

10. Square

 

11. Whatever

 

12. 결과 정리

1) 스킨별 단순 점수비교

모바일 및 데스크탑에서 점수가 가장 높은 것은 square로 나왔다.

 

아마 기본 스킨들 중 가장 심플하기 때문인 것으로 보인다.

 

스킨 종류	모바일 점수	데스크탑 점수
hello world!	78	98
Letter	51	77
Magazine	49	71
Book Club	49	73
#1	53	81
#2	51	65
Odyssey	52	76
Poster	55	79
Portfolio	52	80
Square	55	93
Whatever	49	82

 

2) 모바일 세부 점수항목

스킨 종류	성능	접근성	권장사항	검색엔진 최적화
hello world!	78	89	96	100
Letter	51	72	82	92
Magazine	49	69	82	92
Book Club	49	72	82	92
#1	53	75	82	85
#2	51	76	82	85
Odyssey	52	65	79	92
Poster	55	72	82	92
Portfolio	52	65	82	92
Square	55	68	79	92
Whatever	49	72	79	92

 

3) 데스크탑 세부 점수항목

스킨 종류	성능	접근성	권장사항	검색엔진 최적화
hello world!	98	89	96	100
Letter	77	74	81	92
Magazine	71	68	81	92
Book Club	73	72	81	92
#1	81	76	81	85
#2	65	76	78	85
Odyssey	76	71	78	92
Poster	79	72	81	92
Portfolio	80	65	81	92
Square	93	68	74	92
Whatever	82	72	78	92

 

13. 결과 분석 및 결론

결론적으로 티스토리 기본 스킨들의 성능은 고만고만한 수준이었다.

 

성능 점수가 높은 Square는 오히려 접근성과 권장사항에서 다소 낮은 점수를 보였으며, 접근성과 권장사상에서는 #1 스킨이 가장 높은 점수를 받았다. 검색엔진 최적화는 대부분 이미지 alt값의 부재로 92점이 나왔다.

 

자신이 프론트엔드에 대한 이해도가 있는편이라면 기본스킨 중 Square를 변형해 접근성과 권장사항을 수정하는 것이 좋을 것이고, 그게 아니라면 다른 스킨들 중 그 무엇을 골라도 성능 한계치는 비슷할 것이다.

 

모바일 최적화의 목표는 78~50점 사이, 데스트탑 최적화의 목표는 70~90 사이로 잡는 것이 적절할 듯 하다.

 

그럼, 건승하길 빈다.