안녕하세요. 취미 사진가 나라입니다.
지난 주말에 블로그 스킨을 변경하게 되어 이렇게 포스팅을 올리게 되었는데요..
제 블로그의 스킨은 2019년 6월에 티스토리 Portfolio(포트폴리오) 반응형 스킨을 적용하여 첫 시작을 하였고, 틈틈이 최적화 작업을 하며 블로그를 꾸며왔었습니다.
그런데 SPEED STAR 스킨을 만드신 쓰윔님께서 아무 조건 없이 SPEED STAR 스킨을 사용할 수 있도록 해주셔서...
이참에 저의 티스토리 블로그 스킨을 변경하게 되었습니다. (쓰윔님 감사합니다. ^^)
티스토리 SPEED STAR 스킨에 대한 자세한 정보는 speedstarskin.tistory.com/3 에서 확인해 주세요.
저는 장점 및 간단한 총평, 그리고 개선했으면 하는 것만 이야기하도록 할게요. ^^
1. 장점 및 간단한 총평
A. 쉬운 커스터마이징 편집 툴
티스토리 블로그는 사용자가 HTML/CSS를 직접 수정할 수 있어 커스터마이징이 가능하여 자신만의 블로그를 제작할 수가 있는데요. 이러함이 초보자에겐 너무나 두렵고 어렵게 느껴지는 것이 사실입니다.
그런데, SPEED STAR 스킨은 초보 사용자에게 그러한 점들을 조금이나마 덜어 주게끔 설계가 되어 있습니다.
초보분들이 많이 어려워하시는 티스토리 관리자 페이지의 스킨 편집... 보통은 정말 HTML과 CSS를 직접 수정해야 하기에 거부감이 생기기 마련인데, 이 스킨은 그냥 스킨 편집 페이지에서 마우스 하나로 클릭만 하면 수정이 되게끔 쉽게 되어 있습니다.
|
위와 같은 편집 옵션들은 스킨의 색상까지 하나하나 편하게 마우스 하나로 변경이 가능하고, 일부 단추들로 기능을 on/off 할 수 있어 편합니다.
그리고, 애드센스 광고의 경우도 옵션으로 넣어져 있어서 애드센스 광고 적용도 쉽습니다.
물론 티스토리 자체에 애드센스 관리 페이지가 있기도 하지만, 스킨에 내장된 기능으로 하면 훨씬 빨리 광고가 뜨는 장점이 있습니다.
B. Image Lazy Loading (이미지 지연 로딩) 기능 적용
일전에 저도 포스팅으로 오프스크린 이미지 지연하기 글을 올린 적이 있습니다.
그때 티스토리 자체가 구현이 어렵다는 것으로 추가 결론을 내기도 하였는데요.
SPEED STAR 스킨은 이 기능을 구현합니다.
단, 에디터로 작성한 글을 HTML로 변환하여 스킨을 만드신 쓰윔님의 레이지 로드 주입기를 이용해야 합니다.
레이지 로드 주입기는 이곳 에 있습니다.
레이지 로드로 변환하여 다시 저장하면 이미지 지연 로딩이 구현이 됩니다.
(스킨 업데이트로 현재는 자동 Lazy 로딩 설정과 alt 자동주입이 되고 있습니다. )
블로그를 찾아오는 방문자에겐 이미지가 화면에 보이는 것부터 읽게 되니 속도도 빠르고 데이터 절약도 되는 거죠. ^^
C. PageSpeed Insights에서 높은 점수를 자랑합니다.
블로그 최적화를 하기 위해서 확인해봐야 하는 사이트 중 하나가 구글의 PageSpeed Insights 입니다.
이것은 설명보다 눈으로 확인하시는 것이 이해가 될 것 같습니다.
기존의 제 블로그 스킨을 최적화했던 것과 비교해 보겠습니다.
좌측이 기존 Portfolio(포트폴리오) 스킨을 최적화해놓은 것이고, 오른쪽이 SPEED STAR 스킨입니다.
수치가 높을수록 좋다고 하는데요. 기존 스킨은 사이드바에 어떠한 광고가 있지 않은 상태이고, SPEED STAR 스킨의 경우 사이드바에 애드센스 광고가 2개가 달려 있는 상태로 측정한 것입니다.
거기다 SPEED STAR스킨은 애니메이션 기능이 구현되고 있기 때문에..... 이 만큼의 수치가 나온다는 건 최적화가 너무나 잘 되어 있다는 이야기가 됩니다.
D 기타 최적화 검증
저는 기존 스킨을 지우고 합치고 압축하고 하면서 최적화를 했었는데,
이번에 바꾼 스킨은 오히려 기능을 다 켜고 애드센스도 더 설치한 것임에도 동등한 등급이 나옵니다.
Dareboost의 이슈들은 스킨보다 티스토리 자체의 영향이 더 큽니다. 스킨으로는 수정 불가 한 사항이죠.
그리고 구글에서 측정하는 모바일 페이지 속도에서는 3.2초가 나왔는데요.. 이 부분은 변동이 있는 부분으로 기존 제 블로그 스킨의 경우는 페이지 속도가 5.8초 나왔었습니다.
E. 간단한 총평
이렇게 스킨 편집 툴과 함께 최적화 측정도구로 스킨의 능력치를 살펴봤는데요..
SEED STAR 스킨을 만드신 쓰웜님이 엄청 공들여 꼼꼼하게 만드셨다는 걸 잘 알 수 있었습니다.
[기본* 블로그를 좀 더 빠르게 로딩. 사용자 편의는 최대한 쉽게*]
로딩이 빠른 건 이미지 지연 로딩이 구현되는 것 외에 중요 CSS를 먼저 읽게 하고 덜 중요한 CSS를 나중에 읽게 해서 블로그가 좀 더 빠르게 표출이 되도록 설계가 되어 있기 때문인 것 같습니다.
그래서 블로그를 찾는 분들에겐 빠르게 첫 페이지를 접할 수 있게 되는 것이고, 블로그의 애니메이션 효과 등이 클릭률을 높여 세션과 이탈률 점수도 좋게 개선되는 것 같습니다.
그리고 이건 비밀이지만...
20일에 SPEED STAR 스킨 변경 작업을 한 후 애드센스 수익이 상승했습니다.
최근에 무슨 이유에서인지 방문 유입도 줄었고 블로그 지수도 하락하였는데, 스킨 변경 이후로 이렇게 개선되어 수익도 좋아지고 있습니다.
아직은 버전 1.0이기 때문에 점점 더 개선될 것으로 기대한다면....
분명 좋은 스킨임에 틀림없을 것 같습니다.. 이건 뭐 혁명이죠 혁명~
2. 개선했으면 하는 사항 → 현재 업데이트를 통해 모두 해결 되었습니다.
A. 스킨의 기능이 처음 접했을 때 너무 방대하다 라는 느낌이 들었습니다.
그래서.. 간단하게 세팅 1, 2, 3으로 이미 만들어진 셋팅을 골라 사용자가 약간의 수정을 할 수 있다면 좋겠다는 생각이 들었습니다. 물론 최초 설치 시 기본 세팅값은 존재 하지만......
근데 이건 티스토리에서 지원을 안하는것 같아요..ㅠㅠ
B. 스킨을 2단으로 하였을 때 프로필란에 SNS 표시가 총 5개입니다.
저의 경우는 카카오톡은 공개하고 싶지 않아서 빼고 싶은데... 그렇게 할 경우
이렇게 이가 빠지듯 보입니다.. 자동으로 칸이 붙게끔 하면 좋겠습니다.
C. 제 블로그의 특성상 사진갤러리를 메인 페이지에 노출시키고 싶은데, SPEED STAR 스킨에서는 "Masonry 섬네일" 이 딱 좋은 것 같습니다. 한데 이것도 선택적으로 정사각형이나, 세로 직사각형으로 고정된 것이 있으면 좋겠습니다.
현재의 masonry 썸네일은 사진 모양별로 표출이 되다 보니 들쑥 날쑥 보입니다.. 이것도 매력적이긴 하지만...^^;
D. 제 컴퓨터 디스플레이는 1920*1080의 해상도에 최적화되어 있습니다. 하지만 해상도가 낮아지거나 혹은 브라우저 창 크기가 작아지면 메인 페이지에 있는 썸네일들이 밀리는 현상이 있습니다.
이런 식으로 말이죠.. 1920*1080 해상도에서는 썸네일이 가로 4개가 딱 맞습니다만, 브라우저 크기가 작아지거나 하면 이렇게 밀리는 현상이 있는 거죠. 각 게시물 썸네일들이 줄어들 경우 가독성이 떨어지는 이유가 있기도 하니 어느 정도 크기까지는 고정이 된다던가.. 아니면 짝수로 썸네일들이 보여준다면 공란도 크게 보이지 않고 좋을 것 같습니다.
이렇게 좋은 스킨을 쓰윔님께서 공개하시고 유료구매로 누구나 사용하실 수 있게 하셨어요.
자세한 사항은 아래 링크 참조해주세요.
'Review (리뷰와 생활정보) > 티스토리 블로그' 카테고리의 다른 글
| 구글애널리틱스 이탈률 오류 해결방법 (티스토리 블로그) (2) | 2021.06.11 |
|---|---|
| 티스토리 네이버 색인 문제 해결 (네이버 고객센터 답변 공개) (8) | 2021.04.09 |
| 구글 애드센스 미국 세금 정보 등록하기 (21) | 2021.03.14 |
| 티스토리에 웹폰트 적용하여 최적화 해보기 (Noto Sans KR) (17) | 2021.02.24 |
| 네이버 서치 어드바이저의 HTML 구조 오류 해결 (티스토리) (20) | 2021.02.22 |
