안녕하세요?
티스토리에 Readiz님이 제작하신 Fastboot 반응형 스킨을 사용하는 사람이 많습니다.
Fastboot 반응형 스킨의 장점은 말 그대로 반응형 스킨이기에, 화면 크기에 따라 다른 레이아웃으로 뿌려주어 휴대폰, 타블렛, PC 등 그 어떤 기기에서도 알맞게 정보를 표현해줍니다.
지금 제 블로그만 봐도 창을 작게만들면 모바일 버전으로 자동전환 되고있습니다.
그러나 Fastboot 스킨을 사용하면 메인화면에 티에디션을 사용할 수 없게되고 (사용하더라도 티에디션은 반응형이 작동안합니다)
Fastboot 고유의 메인화면을 사용해야합니다. 이 고유의 메인화면은 큰 단점이 한가지 있습니다.
바로 메인화면에 띄우는 이미지와 글에서 이미지가 전혀 압축되지 않는다는 점입니다.
아래 사이트는 PageSpeed Insights 라는 구글에서 제공하는 페이지 속도를 체크할 수 있는 사이트입니다.
제가 알기로 저곳에서 측정했을때 페이지 속도가 낮게 나오면, 구글 검색에서 우선순위가 낮아져 뒤로 밀린다고 알고있습니다. (블로그에 유입되는 숫자가 적어진다는 얘기죠)
Fastboot 스킨의 메인화면을 디폴트 옵션 그대로 사용했을때
충격적인 속도가 나왔습니다.
PC에서 접속해봐도, 모바일에서 접속해봐도 빠른데.. 왜??
사이트에서 알려주는 !수정 필요 부분의 이미지 최적화 부분을 보니까
(68% 감소) (98% 감소) (92% 감소) 등등..
이미지파일들의 용량을 거의 절반 가까이 다이어트 할 수 있는데 왜 하지 않았느냐고 구글이 저에게 지적(?)하는 내용이었습니다.
Fastboot 스킨의 메인화면에서는 RSS로 등록되는 글의 이미지를 긁어오는 방식인데, 여기서 original 이미지를 긁어와서 띄워버립니다.
즉, 원본파일을 긁어와서 작게 리사이징해서 메인화면에 띄워주는 방식이었던거죠.
Fastboot 스킨의 메인화면을 관장하는 파일은 'fastboot_index.js'
메모장으로 열어서 한번 분석해봅시다.
(여러분들하고 내용이 살짝 다를 수 있는데, 왜냐하면 저는 Readiz님이 올리셨던 "메인화면 구성 마음대로 바꾸기"를 먼저 해서 그렇습니다. 먼저 하고 따라하길 추천합니다.)
여기서 우리가 중요하게 봐야할 부분은
a = a.replace('original', 'C80x80');
tmpMediaImages+='<a href="'+link+'"><img src="' + a + '"/></a>';
이 부분입니다.
이미지 링크파일에서 image와 original 부분을 C80x80으로 변환하는부분이죠. C80x80이 뭐냐면 80x80 크기로 잘라냅니다.
그런데 여기서 C80x80부분은 무조건 같은숫자(정사각형)여야 하며 모든 숫자가 존재하지는 않습니다.
각자 블로그 이미지 파일 주소 "http://cfileXX.uf.tistory.com/image(or original)/이미지코드"
파란색 부분에 [C숫자x숫자]로 숫자를 일일이 넣어주면서 있는 숫자, 없는 숫자를 갈라낼수 밖에 없어요.
(직사각형으로 자르는 방식은 'P숫자x0'이 있습니다)
하여튼 적당한 값으로 C숫자x숫자로 두부분을 다 변경해줍니다.
제 블로그 메인에서는 현재 C200x200으로 잘라내고 있습니다.
그리고 a = a.replace 아래에있는
부분은 메인 화면에 글을 쭈욱 나열한 이후, 가장 아래에 이미지만 나열하는 부분입니다.
이 부분이죠. 저는 사용하지 않아 주석처리 했습니다.
다음으로 가장 중요한 부분!
두번째 tmpMediaImages를 찾아봅시다. 위에서 봤던 replace 부분보다 살짝 아래부분에 있습니다.
여기서 <a href="' + link + '"><img src="'+img+'"/> 대신 <a href="'+link+'"><img src="' + a + '"/>를 넣어줍시다.
script.txt
그럼 이렇게 되겠죠?
그리고 이건 해도 그만 안해도 그만입니다만, 하지 않을경우 위에서 본 "가장 아래에 이미지만 나열하는 부분"에 이미지만 없고 공간만 남아서 페이지를 보기에 미관상 좋지않습니다.
가장 아랫부분에
라는 부분이 있는데, 빨간색 글씨부분을 모조리 지워버립니다.
지우면 이렇게 됩니다. 그렇다면 아래 이미지만 나열하는 부분에 나올 공간마저 지워버렸습니다.
여기까지 했다면 저장하고 fastboot_index.js 파일을 HTML/CSS-파일업로드에 업로드 합니다.
이제 블로그 메인화면을 보시면 더 이상 original파일을 불러오지 않습니다.
그 대신 C200x200 파일을 불러옵니다. 그러므로 이미지 용량이 자동적으로 압축되어 사이트 속도가 올라가게 됩니다.
참고로 skin.html에 fastboot_index.js 뒤에 ?임의숫자를 입력해주면 브라우저가 캐쉬파일을 불러오지 않고 새로운 파일로 인식해서 바로 적용됩니다.
(그렇지 않으면 수정해도 캐쉬파일(수정 전 js파일)을 불러와서 바뀌지 않은것처럼 보여요 - 자신의 컴퓨터에서만 그렇게 보입니다.)
다시 PageSpeed Insights 에서 속도를 측정해봅시다.
아까보다 속도가 월등하게 올랐습니다.
(너무 속도에 연연하지마세요. 측정하는 기준 시간마다 다르게 나온답니다)
이제 구글 검색에서 밀려날 확률이 줄어들었습니다.
여기까지입니다. 수고하셨습니다.
추가로 제가 사용하고있는 C200x200으로 자르고 있는 fastboot_index.js파일도 같이 올립니다.
fastboot_index.js ----- C200x200으로 자른 이미지를 띄우는 fastboot_index.js파일
댓글