티스토리 HTML, CSS 압축해서 블로그 속도 높이기
블로그 운영에 속도는 중요한 요소 중 하나입니다. 블로그 로딩 속도가 느리면 내용이 늦게 표시되기 때문에 그 사이에 방문자들은 뒤로 가기를 누르게 되죠. 보통 로딩 속도가 3초가 지연되면 느린 블로그에 속하는데 그만큼 3초 동안 많은 사람들이 이탈한다는 증거겠죠. 이 속도는 상대적인 것이기 때문에 다 같이 속도가 느리면 크게 개의치 않겠지만 속도 빠른 페이지를 보다가 속도가 느린 페이지를 방문하게 되면 밀려오는 답답함에 페이지를 나가버리는 경우가 생기게 됩니다.
구글 웹마스터도구에서도 블로그 속도를 통계로 제공하고 있죠. 특히 모바일이 대세인 만큼 PC보다 모바일 속도에 더 민감하게 준비해야 합니다. 요즘 점점 속도 빠른 블로그들이 많아지는 추세이기 때문에 블로그 로딩 속도가 느리면 이탈률이 늘어나고 블로그 지수가 나빠져서 점점 검색 순위가 밀리면서 입지가 좁아지게 될 것입니다. 물론 속도보다 블로그 내용의 질이 순위에 막대한 영향을 끼치긴 하지만 속도가 빠르면 다른 블로그보다 한 단계라도 더 위로 올라갈 확률이 높을 겁니다.
블로그 속도를 높이는 방법은 여러가지가 있는데 티스토리 블로그는 한계가 있습니다. 카카오에서 제공하기 때문에 기본적으로 세팅되어 있는 코드들은 어쩔 수 없이 안고 가야 하는 부분이죠. 그 와중에 속도를 높일 수 있는 방법은 속도가 빠른 스킨을 사용하는 것과 블로그의 이미지를 최적화 하는 것, 그리고 html과 css, 자바스크립트 등의 코드를 압축하는 것입니다.
지금 보시는 저의 블로그 같은 경우에는 이미지가 다른 블로그보다 아주 많이 들어갑니다. 포토샵 강좌와 디자인 자료들이 주제라서 어쩔 수 없이 이미지나 사진들이 많이 들어가게 되는데 이것 때문에 블로그 속도면에서 아주 느립니다. ㅠㅠ.. 눈물이 나지만 어쩔 수 없는 부분이라 몇 달 전부터 이미지는 최적화시켜서 업로드하고 있습니다.
그리고 또 하나 속도를 줄일 수 있는 것이 HTML, CSS 압축인데 이제 그것에 대해 포스팅해 보도록 하겠습니다. 코드 압축은 간단합니다. 코드 압축 사이트에서 압축한 후 그대로 다시 복사해서 붙여넣기하시면 끝납니다. 문제는 압축한 코드로 인해 오류가 발생할 수 있기 때문에 적용전에 반드시 기존 스킨을 저장해 놓으신 후 진행해 주시기 바랍니다.
1. 먼저 아래의 코드 압축 사이트로 들어가 줍니다.
2. 사이트로 들어가면 Input 화면이 나오는데 이곳에 내 티스토리 블로그의 코드를 복사해서 붙여 넣기를 하시면 됩니다.
3. CSS를 붙여 넣기 하면 오른쪽 위에 CSS 버튼이 자동으로 활성화됩니다. CSS 버튼을 클릭해 주세요.
4. CSS 버튼을 누르면 위 화면처럼 공백이 사라지고 압축이 됩니다. 화면 상에서 그대로 전체 복사해서 티스토리 블로그에 붙여 넣기 하시 거나 오른쪽 위에 있는 "Save" 버튼을 누르면 css 파일을 다운로드하실 수 있습니다. 오른쪽 아래에 보시면 압축률이 나옵니다.
5. 티스토리 편집 화면입니다. 위 코드를 압축시키면 아래의 화면처럼 바뀌게 됩니다.
6. 오른쪽 코드 화면이 압축되었습니다. "적용" 버튼을 누르기 전에 "새로고침" 버튼을 먼저 눌러서 미리 보기 화면이 제대로 나오는지 확인하시고 "적용"을 눌러 주세요. 미리보기에서 오류가 나면 기존 코드로 사용하셔야 합니다.
일단 저는 CSS를 압축해서 잘 저장하였는데 HTML은 코드 특성상 압축이 안 된다고 하네요. 그래서 다른 압축 사이트에서도 압축해 봤는데 오류가 나서 HTML은 그대로 사용할 수밖에 없었습니다. 그래도 조금이나마 블로그 속도가 줄었을 테니 위안을 삼아야겠네요.
댓글