티스토리 패스트부트(fastboot) 스킨 애드센스 속도 느릴때 최적화의 모든 것

블로그를 다시 시작하면서 반응형 웹을 찾다가 패스트부트(Fastboot)라는 티스토리 스킨을 발견하게 되었습니다. 

부트스트랩 기반으로 만든 스킨으로 티스토리의 반응형 웹에 적합한 거 같고 애드센스 붙이기에도 상당히 좋아 보였습니다.

처음에는 글을 모두 비공개로 한 상태였기 때문에 속도도 무척 빨랐습니다.
하지만 문제가 발생!
애드센스를 붙이고 몇가지 설정을 하고 나서부터 메인 화면은 20초 이상 걸리고 블로그 글을 조회해도 10초 이상의 무반응이 발생했습니다.
애드센스를 붙여서인지 애드센스 최적화도 해보았고 애드센스를 완전히 제거도 해보았고 가능한 방법은 다 사용해 봤지만 속도 개선이 되지가 않더군요.
크롬, 엣지 등의 웹 브라우저에서는 문제가 없지만 IE(Internet Explorer)에는 어떤 PC에서 접속해도 무척 느렸습니다.

애드센스 최적화 관련글은 티스토리&애드센스 메뉴에서 보실 수 있습니다.

티스토리 애드센스 광고 최적화하기

가장 큰 문제는 바로 이녀석이였습니다. ajax로 블로그의 "/rss"를 항상 가져가는 부분이 있었던 거였습니다. 혹시 제가 스킨에 잘못된 버전의 파일을 업로드해서인지 fastboot를 사용하는 다른 블로그들도 검사해 봤지만 동일한 문제가 있더군요. 제 블로그가 다른 블로그보단 특히 느렸던 부분은 rss를 50개로 설정하였기 때문에 더 느렸던 거였습니다.

느린 원인을 찾기 위해 개발자모드를 F12 키를 눌려 활성화 해줍니다.
그리고 네트워크 부분에서 "네트워크 트래픽 캡처 사용(F5)"를 눌려 트래픽 캡처를 사용합니다.

트래픽 캡처를 사용하고 F5로 리프레쉬를 해보았습니다.

편집을 잘못해서 자세히 부분에 "/rss"가 잘려버렸네요. 아무튼 "받음"이라는 부분을 보시기 바랍니다. 2.11MB라는 어마어마한 데이터를 받아왔습니다. IE에서는 패스트부트와 애드센스등이 조합되서 그런건지 IE에서는 비동기 jquery ajax(fastboot에서 ajax를 정확하게 동기/비동기, jquery가 버전업되어 사용하지 않는 비동기 방식을 사용했는지 확인을 못해봤네요)가 비정상적으로 동작 되어 화면이 먹통되는 현상이 발생한 듯 합니다.

원인을 찾았으니 fastboot에서 기능을 제거하기로 했습니다.
화이트스페이스를 모두 제거한 min.js 파일이라 제거하는데 약간의 시간이 걸렸습니다.
단 중요한 주의 할 부분이 있습니다.
패스트부트 1.6.2 버전입니다! 1.6.2 버전을 사용중인 분만 봐주세요.
패스트부트의 기본 메인화면을 제거해 주어야 할 듯 합니다. 정확한 테스트는 안해봤지만 아마 메인화면 글 목록에서 이미지를 출력해주기 위해서 rss로 출력된 정보를 활용하는게 아닌가 상상해 봅니다.

ajax로 "/rss"를 호출하는 부분을 제거했습니다.
아래 파일은 다운 받은 후에 "fastboot.min.js"로 파일명을 수정하고 티스토리 HTML/CSS 편집에서 "파일 업로드"로 가서 "images/fastboot.min.js"에 올리면 됩니다.

fastboot.min.js.txt

패스트부트 기본 메인화면 제거하기
티스토리의 HTML/CSS 편집에서 HTML을 수정을 합니다.
var f_enableTedition = false; 부분을 찾아서 var f_enableTedition = true; 로 고쳐 티에디션을 사용하도록 합니다.

관리자 화면설정으로 가서 티에디션 "사용하기"를 누릅니다. 그러면 화면 모양의 부분에 "티에디션 시작하기" 버튼을 생길 겁니다.
티에디션 화면 설정으로 들어가서 기본으로 되어 있는 패스트부트 메인화면 글 목록 영역을 삭제합니다.
삭제를 하게 되면 패스트부트의 기본 메인화면은 HTML에서 완전히 삭제 되기 때문에 티스토리 화면설정으로는 복구 불가능합니다.

티에디션을 사용해 주시면 되겠습니다. 아무것도 추가하지 않으면 블로그의 최신 글이 표시 될겁니다.
마음에 드는 모양을 선택하여 사용해 주시면 되겠죠?

[FastBoot] 티스토리 반응형 애드센스 스킨 적용하기