블로그 속도 측정 - Google PageSpeed Insights에서 javascript를 압축하고 위치를 조절하면 블로그 속도가 빨라진다고 했어요. 어떻게 압축하고 어떻게 위치 조절을 하는 지 간단하게 소개할께요.

압축이라는 게 zip 파일같은 압축이 아니고 공백, 주석 등을 삭제해서 용량을 줄이는 거예요.

HTML이나 CSS도 같은 방법을 이용할 수 있는데 HTML이나 CSS는 수정을 많이 하기때문에 압축을 하는 것이 불편하죠. 그에 반해 javascript는 수정을 별로 하지 않으니 압축하는 게 효과적이고요.

블로그 로딩 속도 빠르게 - javascript 압축

Online Javascript compressor

이름에서 알 수 있듯이 javascript를 압축해주는 사이트입니다. 크게 두 부분으로 나눠져 있는데, 위에는 압축할 javascript, 아래는 압축된 javascript입니다.

블로그 로딩속도를 빠르게 - javascript 압축

Base62 encode와 Shrink variables 두 가지 옵션이 있는데, Shrink variables는 변수를 알파벳처럼 그냥 단순 문자로 바꾸는 걸 말해요. 보통 변수는 그 의미를 담은 단어들을 조합해서 만드는데, 이마저도 줄이고 싶을 때 사용하는 겁니다. 대게 블로거들은 javascript를 수정할 일이 없으니 이 옵션을 선택하는 것도 나쁘지는 않아요.

<script type="text/javascript"> 와 </script> 사이에 있는 내용을 윗칸에 입력하고 "compress"를 누르세요.

그러면 아래에 압축된 javascript가 나와요. 이걸 그대로 가져다 쓰시면 돼요.

그림 제일 아래에 보면 376/852 = 0.441 이 나오는데, 압축률이에요. 44%로 줄었다는 뜻이죠.

참고로 압축된 스크립트는 js 파일로 만들어서 사용하면 로딩속도가 더 빨라져요. 각 스크립트를 하나의 파일로 만들 지 않고 여러 javascript를 모아서 파일 하나로 합치면 효과 만점이지요.

js 파일을 스킨에 업로드 한 다음에 html/css 편집에서 맨 아래에 있는 </s_t3> 바로 위에 호출하시면 됩니다. 위치와 방법은 아래 그림을 참고하세요. 

블로그 로딩속도를 빠르게 - javascript 파일을 스킨 마지막에

블로그 html/css 편집에 바로 붙여넣을 때는 <script type="text/javascript"> 와 </script> 사이에 넣고, js 파일로 만드려면 그냥 복사한 내용만 파일로 만들면 됩니다.

함께 보면 좋은 글

W3C CSS 유효성 검사, CSS Validation Service
블로그 재방문자 비율을 높여야하는 이유
애드센스를 본문 상단 오른쪽에 넣기
이탈률, 반송률, 종료율이란? 이탈률 낮추는 방법
애드센스 수익 향상 팁 - A/B 테스트
본문 검색창 설치로 블로그 페이지뷰 늘리기
애드센스 최적화 배치 도움되는 곳
블로그 속도 측정 - Google PageSpeed Insights