CCZ-CROSS 스킨, 로딩 속도 개선 (썸네일 치환코드

 

안녕하세요.

현재 제 블로그에 적용된 블로그 스킨은 대세로 자리잡고 있는 CCZ-CROSS입니다.

 

CCZ-CROSS 스킨의 원본 배포 링크

http://webdir.tistory.com/491

 

 

아직 스킨 제작 이라던가 하는 건 아직 보고 따라하는 정도의 초보 수준이지만, 블로그를 운영하는 사람이라면, 나 자신보다는 블로그를 보러 온 방문객을 위한 배려를 항상 생각 해야겠죠.

CCZ-CROSS 의 인터페이스는 편안하고 직관적이라 많은 블로그 분들이 사용 하시는데요, 단점으로는 블로그의 로딩속도가 느리다는 점이있습니다.

 

이를 개선하기 위한 방법을 알아보다 샐리님의 블로그 http://sallykim.tistory.com/1780 를 통해서 해결방법을 알게 되었습니다.

 

우선 해당 방법을 적용하기 위해서 기존의 CCZ-CROSS 가 가진 단점이 왜 그랬는지를 파악할 필요가 있습니다.

그 이유는 코코소프트 페이지의 http://cocosoft.kr/349 해당 글에서 찾아볼 수 있습니다.

 

기존의 스킨 제작자들은 스킨 썸네일을 이용한 이미지 추출에서 Ajax를 이용한 이미지 추출로 페이지를 제작. 이 방식을 사용하면 블로그 로딩에 오랜 시간이 소요.

 

이 후 티스토리에서 썸네일 이미지 주소의 스킨 치환자를 추가.

<img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F2746AB4557E513FE18">

 

그러나 이 방식도 단점이 존재. – 썸네일의 이미지 크기가 가로 750px 로 고정되어 제공. 이를 불러오기(다운로드) 위한 시간 및 데이터 소모.

(거의 본문의 이미지 크기를 그대로 썸네일로 사용)

 

 

의 문제였다고 하네요.

 

즉. 기존의 썸네일은 본문에 사용된 것과 크게 다르지 않는(혹은 750px 이하의 이미지일 경우 원본 그대로!!)용량의 이미지를 로딩 해서 보여줬기에 다운로드 용량 과 시간이 그대로 적용되어 사용자. 방문객들에게 속도가 느린 페이지를 제공했던 것이라 생각됩니다.

 

그러던 와중에

 

티스토리에서 제작하여 배포하는 티스토리 반응형 스킨 #2 에서 이를 해결 할 수 있는 방법이 공개.

기존의 <img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F2746AB4557E513FE18"> 에 비하여 썸네일의 사이즈를 직접적으로 수정이 가능한 치환자(소스)로

<img src="//i1.daumcdn.net/thumb/C210x150/?fname=https://t1.daumcdn.net/cfile/tistory/2746AB4557E513FE18"> 로 구체적인 소스가 공개 됨.

위에 체크된 부분의 치환코드를 기존의 CCZ-CROSS 스킨의 Html 에서 변환을 해줌으로써, 눈에 띌 정도의 블로그 속도 개선을 확인 할 수 있습니다.

썸네일 이미지의 로딩과 관련한 소스이기 때문에 해당 치환자는 어떠한 반응형 스킨, 혹은 고정 스킨에 적용하여도 빠른 이미지 로딩을 볼 수 있을 거라 생각됩니다.

 

 

CCZ-CROSS 스킨의 블로그 속도 개선을 위해서 해야 할 일은?

 

기존의 소스를 검색 후

<img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F2746AB4557E513FE18">

 

썸네일 치환자 html 소스를 새로이 붙여 넣어 준다.

<img src="//i1.daumcdn.net/thumb/C200x150/?fname=https://t1.daumcdn.net/cfile/tistory/2746AB4557E513FE18">

 

 

특히 부분을 주목하시면 됩니다.

해당 부분의 숫자는 가로 x 세로 를 나타냅니다. 그럼 앞에 있는 알파벳의 기능은?

 

P0x0 업로드 한 파일의 기존 원본 비율을 살리고 썸네일 이미지로 그대로 불러온다.

C0x0 업로드 한 파일의 원본 비율을 무시하고 설정한 값 (0x0)으로 썸네일 이미지를 잘라서 불러온다

S0x0 원본 비율 무시하고 썸네일을 잘라서 불러온다 (Gif 파일 정지

  

보다 자세한, 어떠한 변화가 생기는지 코코소프트의 해당 링크 글에서 확인이 가능합니다. http://cocosoft.kr/349

다양한 상황에 맞춰 각각의 이미지가 어떠한 상황에서 어떻게 용량 변화가 생기는지를 직접 분석하셨네요.

 

현재 블로그에는 CCZ-CROSS에서 가장 예쁜 썸네일의 비율이라는 4:3 사이즈, C200x150 의 썸네일 치환자 사이즈를 적용 하였습니다.

   

본 게시글은 블로그의 로딩 현상 개선을 해결하기 위해

CCZ-CROSS 제작자 흉내쟁이 님, 코코소프트, 샐리 님의 블로그 게시글을 참고하여 작성되었습니다.