본 티스토리 블로그에는 CCZ-CROSS 스킨이 적용되어 있습니다. CCZ-CROSS 스킨은 깔끔하고 카테고리 분류가 잘 보이게 되어 있어서, 주로 IT 쪽 블로그에서 많이 사용되고 있는 것 같습니다.
그런데 스킨의 사용 후기를 보면, "로딩 타임이 느리다"라는 평가가 있기도 합니다. 이를 극복하기 위한 방안도 많이 나와있고요. 이번 글에서는 검색과 소스 분석을 통해서 수집한 CCZ-CROSS 스킨의 속도 향상을 위한 여러 가지 방안에 대해서 알아보도록 하겠습니다.
#1. CCZ-CROSS 스킨을 적용하다.
처음 티스토리 블로그를 개설한 후, 티스토리의 스킨 방식에 대해서 살펴보고 있었습니다.
티스토리의 기본 스킨들도 나쁘지는 않은데, 현재 블로그가 IT · 웹 쪽이다 보니 약간 어울리지는 않는 것 같습니다. 기본 스킨은 왠지 사진 위주의 일상, 여행, 후기 등의 포스트에 어울릴 것 같더군요. 결정적으로 카테고리 쪽에 접근하기가 쉽지 않게 되어 있어서 이리저리 스킨을 찾아다니기 시작했습니다.
그러던 중 CCZ-CROSS 스킨을 발견!
CCZ-CROSS 스킨 배포
티스토리의 관리자 페이지 업데이트 이후로 로그인/로그아웃이 정상작동하지 않는 경우에는 환경설정(블로그관리) > 꾸미기 - 설정에서 블로그 메뉴바를 표시합니다.로 설정을 변경해 주시길 바랍니다. CCZ-CROSS..
webdir.tistory.com
- 무난하게 깔끔하고
- 카테고리도 화면에 같이 나와있고
- 뭔가 IT 분위기에 맞는 것 스킨 같아서
일단 적용해 보았습니다. 약간 커스터마이징만 하면 괜찮아 보일 것 같습니다.
다만, 공통적으로 지적되던 문제가 있었으니...
로딩 속도가 느리다
특별히 크게 느려야 할 이유는 없을 것 같은데...
검색과 분석을 통해서 한번 반응 속도를 올려보겠습니다.
#2. 스킨 속도 향상을 위한 팁
2.1. 썸네일 치환자 변경
기존의 썸네일 치환자는 꽤 큰 사이즈의 이미지를, 원본 비율대로 불러오는 것 같습니다. 만약 썸네일 이미지로 꽤 무거운 이미지를 사용했다면 글 목록을 불러오는 데 있어서 큰 로딩이 걸리게 됩니다.
이를 방지하기 위해서 썸네일은 작게 변환된 이미지를 불러오도록 skin.html에서 썸네일 치환자를 변환해줍니다.
스킨의 초기상태 그대로 사용하고 있다면 C240x180으로 설정하면 됩니다. 만약 목록 부분의 이미지 크기를 변경했다면, 본인의 설정에 맞춰주면 됩니다.
썸네일 관련 내용은 아래 블로그에 자세한 설명이 되어있는지 참조하시면 좋을 것 같습니다.
썸네일 치환자 자체의 다양한 옵션은 아래 블로그에 아주 친절하게 정리되어 있습니다.
여기서는 썸네일 치환자에 따른 차이를 한번 살펴보겠습니다.
[테스트 파일 : 3.94MB PNG image (1200 X 1794)]
Photo by eberhard grossgasteiger on Unsplash
🅰 기존 Thumbnail 치환자 사용.
아래 목록 화면을 보면 썸네일 반응이 조금 느려 보입니다. (아래 캡처는 FOUC에 대한 처리를 한 상태의 스킨으로 확인한 것으로 썸네일이 늦게 로딩되는 것을 확인할 수 있습니다.)
크롬 개발자 툴로 보면 첫 번째 썸네일 이미지는 750 X 1121 px 그림으로부터 그려지고 있는 것을 알 수 있습니다.
해당 썸네일 이미지의 용량은 무려 1.4MB입니다. (물론 티 내려고 PNG 포맷으로 해서 그렇습니다. 😅 )
🅱 변경된 Thumbnail 치환자 사용
변경된 치환자로 로드할 때 썸네일 이미지가 상대적으로 빠르게 화면에 나타나는 것을 확인할 수 있습니다.
크롬 개발자 툴로 보면 썸네일 이미지는 240x180 px로 crop 된 상태로 그려지고 있는 것을 알 수 있습니다.
해당 썸네일 이미지의 용량은 96.5KB로, 용량이 대폭 줄어든 걸 확인할 수 있습니다.
만약 목록이 길고 고용량의 썸네일 이미지가 많이 있다면 확실히 차이가 보일 것으로 생각됩니다. 티스토리의 트래픽 부담도 줄어줄 겸(!) 위의 치환자는 적절히 적용하는 게 꼭 필요할 것 같습니다.
애초에 Thumbnail 이미지들의 크기나 용량을 작게 설정한 상태라면 크게 눈에 띄는 효과는 없습니다.
2.2. FOUC 클래스 삭제
CCZ-CROSS 스킨의 경우 스크립트로 화면이 변경되는 부분에는 기본적으로 fouc 클래스가 적용되어 있습니다. Fouc 클래스가 적용된 부분은 이미지, CSS, JS 등, 모든 asset이 로딩된 후에야 화면에 표시하도록 설정되어 있습니다. 따라서 이미지가 용량이 크다거나, 개수가 많다거나, 네트워크가 느리거나 하는 경우에 화면에 표시되는 부분이 매우 느리게 나타날 수도 있습니다. 구글 애드센스가 있다면 더 느릴 수도 있을 것 같습니다.
아래는 fouc가 있는 상태에서 글을 보는 화면입니다. 약간 느려 보이긴 합니다.
이를 방지하기 위해서 skin.html에서 fouc가 나타난 부분을 제거하거나, 지우기가 찜찜하시면 fouc2와 같이 이름을 임의로 변경해 놓으면 됩니다. fouc가 여러 개가 존재하는데, 하나씩 변경해 가면서 효과가 느껴지는 부분만 제거해나가는 것도 좋겠습니다.
자세한 내용은 아래 블로그를 참조하세요!
아래는 fouc 클래스를 제거한 후의 로딩 화면입니다.
제거 후에는 로딩이 비교적 빨라집니다. 같은 글을 두 번째 들어갈 때는 캐시 덕분에 더욱 반응이 빠르게 보입니다. 다만, 일부 부분(리스트 제목의 스타일. 시간 표시 변환, 이미지 로딩 등)은 화면이 변하는 모습을 사용자에게 보입니다.
2.3. FOUC 클래스를 유지한 상태에서 속도 향상
앞에서 fouc를 제거해서 반응은 빨라지긴 했는데...
뭔가 중간에 변하는 내용들이 눈에 보입니다.
시간 변환되는 순간
제목에 style이 적용되는 모습
등등.
중간에 변경되는 모습이 뭔가 마음에 안들수도 있겠죠. 이러한 현상을 완화시키기 위해서 FOUC를 사용하면서도 빠른 반응을 보일 수 있도록 처리를 해보겠습니다.
변경1: loading opacity 관련 css 변환 (reset.css)
현재 구현된 상태를 보면 fouc가 반영된 부분은 loading이 완료된 후에도 0.6초 동안 기다렸다가 0.6초 동안 opacity를 변경하면서 화면이 보이도록 합니다. 로딩이 완료된 후에도 총 1.2초가 더 걸리는 구조입니다. 아마 javascript에 의해 보이는 부분을 감추기 위해서인 것 같습니다.
예전 스킨이라 브라우저 성능이 떨어지던 경우를 대비해서 그랬을 것 같긴 한데, 최근의 브라우저는 성능이 좋아서 시간을 대폭 줄여버려도 됩니다.
reset.css에서 ".6s"로 검색해보면 다음과 같은 부분이 있습니다. (minify 된 상태라 보기는 어렵지만 변경은 쉽습니다.)
-webkit-transition-delay:.6s;-webkit-transition-duration:.6s;transition-property:opacity;transition-delay:.6s;transition-duration:.6s;
이 부분을 다음과 같이 변경하고 다시 업로드해줍니다.
transition delay: 0, duration은 0.2초 (이 값은 입맛에 맞게 변경하시면 됩니다.)
-webkit-transition-delay:0s;-webkit-transition-duration:.2s;transition-property:opacity;transition-delay:0s;transition-duration:.2s;
Minify 된 부분을 원 상태로 복구해서 보면 아래와 같은 내용입니다.
변경2: (window).load => $(document).ready로 변경 (main.js)
Fouc 클래스가 적용된 부분을 화면에 보이기 시작하는 시점을 체크(body에서 loading class를 제거) 하기 위해 $(window).load를 사용합니다. 문제는 $(window).load는 이미지, JS 등 모든 항목이 로드될 때까지 기다리게 되는데...
이미지가 크다거나, 느리게 로딩되거나 하는 경우, 다 받기 전까지 fouc가 적용된 부분은 화면이 표시되지 않게 됩니다.
전체 load를 기다리기 보다는 DOM 로드만으로 조금 빠르게 처리하기 위해서 $(document).ready로 변경해보겠습니다.
main.js에서 아래 부분을 찾습니다. (파일의 가장 하단 부분에 있습니다.)
$(window).load 대신 $(document).ready를 사용하여 다음과 같이 변경해줍니다.
참고로 $(window).load()와 $(document).ready()가 트리거링 되는 시간 비교를 위해서 console로 시간을 표시해 봤습니다. PC 성능과 캐시 상황에 따라서 다르겠지만 제 구형 PC에서는 800 msec 까지도 차이가 나네요.
문제는, 구글 애드센스가 붙는 경우에는 두 경우 모두 시간이 증가하는데, $(window).load()의 경우 체감 시간이 급격히 늘어납니다. 디폴트 상태의 CCZ-CROSS 스킨에서는, 광고가 붙는 경우라면 스킨 로딩 타임이 더욱 느리게 느껴질 것 같습니다.
변경사항 반영한 결과 화면
reset.css와 main.js를 업로드한 후의 화면을 한번 보겠습니다. Javascript까지 변경하였으므로 브라우저에서 Ctrl+Shif+R 또는 Ctrl + F5 (윈도우, 크롬 기준)로 강제 refresh를 한번 해줍니다.
아래는 변경 후의 화면입니다.
약간 빨라졌나요? 아래 캡처는 구글 애드센스 광고가 없는 상황이라 티가 조금 덜 날 수도 있겠습니다. 체감상 처음 상태보다는 화면이 빠르게 나타나는 것 같습니다. 그리고 FOUC를 제거한 경우에 보이던 스타일이나 텍스트가 변하는 부분은 잘 보이지 않습니다.
취향에 맞춰서 선택해서 결정하시면 될 것 같네요!
4. Category 스타일 변경 (style.css)
사이드바의 카테고리 스타일은 로딩 후에 javascript를 통해 클래스가 추가되고 이를 통해서 설정됩니다. 따라서 스킨을 살펴보면 카테고리 변환 시마다 카테고리의 디자인이 변하는 모습이 보입니다.
분석해 본 결과 굳이 자바스크립트로 변경할 필요 없이 아래와 같이 변경하면 스타일을 바로 반영할 수 있는 것 같습니다. (아직 별다른 문제는 발견하지 못했습니다.)
style.css 2498 라인 근처
/* 변경전 */
.module-category .tt-cate-name,
.module-category .tt-ul-two>li>a {
font-weight: bold;
}
.module-category .tt-ul-two>li>a {border-top: 1px solid #999999;}
.module-category .tt-ul-three li {border-top: 1px dashed #e0e0e0;}
.module-category .tt-ul-three a {margin-left: 0; padding-left: 30px;}
/* 변경 후 */
.module-category a.link_tit,
.module-category a.link_item {
font-weight: bold;
}
.module-category a.link_item {border-top: 1px solid #999999;}
.module-category ul.sub_category_list li {border-top: 1px dashed #e0e0e0;}
.module-category .sub_category_list li a {margin-left: 0; padding-left: 30px;}
변경 후를 살펴보면 서브 카테고리의 위치나 라인 등이 변하는 모습은 보이지 않습니다. 아이콘 쪽은 어쩔 수 없네요 -.-;
맺음말
이번 글에서는 CCZ-CROSS 스킨의 반응 속도를 높이기 위한 여러 가지 사항에 대해서 살펴보았습니다.
개인적으로 이 블로그의 스킨은 다음과 같이 반영하였습니다.
① Thumbnail C260X260 사용 (정사각형으로 변경)
② fouc 삭제
③ Javscript로 변경하는 부분은 대부분 제거
④ 카테고리 변경 반영 + 화살표 아이콘 제거
CCZ-CROSS 스킨은 무료이면서도 완성도도 있고, IT 쪽 블로그에 잘 맞는 스킨 같습니다.
참으로 고맙게 사용하고 있습니다. 😃
나중에 시간이 된다면 티스토리 스킨도 한번 공부해서 만들어보고 싶네요.
'블로그 > 티스토리' 카테고리의 다른 글
| 티스토리에서 이모지를 사용하자! (4) | 2020.07.14 |
|---|---|
| [티스토리] 드디어 사이트맵을 지원하네요! (0) | 2020.05.09 |
| [티스토리] 애드센스 본문 광고 안나오는 문제 완벽 해결 (14) | 2020.02.11 |
| 티스토리 블로그에 리디바탕체를 적용하였습니다. (2) | 2020.01.22 |
| 티스토리 구글 애드센스 승인 성공! (내용 분석) (0) | 2020.01.20 |