블로그 로딩 속도 UP! (1) - JavaScript 최적화 (CompressorRater)
2011. 3. 28. 23:02ㆍIT/Tistory Tips
JavaScript는 웹상에서 특정 명령을 수행하는 명령어다. 블로그에 어떤 효과를 추가할 때 JavaScript를 많이 사용한다. 내가 티스토리 스킨에서 봤던 JavaScript는 스킨의 날짜 표시 형식을 바꾼다든지 사이드바의 분류 항목을 접고 편다든지 화면을 스크롤 하면 맨 위로 이동하는 버튼이 생긴다든지 이미지 크기가 글 영역을 벗어나지 않게 한다든지 하는 기능을 수행했다. 스킨을 수정하다 보면 아래와 같은 문구가 보일 때가 있다. (티스토리는 [설정] - [스킨] - [HTML/CSS 편집] - [skin.html]에 있음.)
이 부분이 JavaScript를 사용하는 부분이다. <script type="text/javascript"></script> 사이에 있는 내용 또는 지정된 위치의 js 파일이 바로 JavaScript다. 블로그에 다양한 효과를 적용하려고 욕심을 내다보면 많은 JavaScript를 사용할 수 있다. 필연적으로 웹페이지 로딩 시간이 길어진다. 이럴 때 HTTP 요청을 줄이기 위해 JavaScript를 합치기도 하지만, js 파일을 통합했을 때 정상적으로 기능을 사용할 수 없는 것들이 꽤 많다. 웹페이지 로딩 시간을 단축하기 위해 사용할 수 있는 다른 방법의 하나는 JavaScript 자체를 최적화하는 것이다.
JavaScript가 뭔지도 잘 모르는데 어떻게 최적화를 하냐고? 아주 간단하다. 이미 다양한 최적화 프로그램이 개발되어 있다. JSMin, YUI Compressor, Dojo, Packer 등 다양한 프로그램이 있지만, CompressorRater를 방문하면 한 방에 모든 귀찮음을 날려버릴 수 있다.
▶ CompressorRater 방문하기
CompressorRater는 앞에서 이야기한 네 가지 유명한 최적화 프로그램의 최적화 결과를 비교해서 가장 빠른 결과 값을 갖는 스크립트를 알려주는 웹사이트다.
CompressorRater를 방문하면 사이트에 관한 설명이 나오고, 그 아래를 보면 위 그림과 같은 입력란이 있다. 여기에 <script type="text/javascript"></script> 태그 사이의 내용을 복사하거나 js 파일을 메모장으로 연 다음 전체 내용을 복사해서 붙여넣는다. 그다음 [CompressorRate It!]을 클릭하면 잠시 후 최적화 비교 결과가 나온다.
프로그램 이름, 옵션, 크기 등의 정보가 제공되고, 가장 크기가 작은 순서대로 차례로 나열된다. [View]를 클릭하면 새 창에 최적화된 JavaScript 내용을 보여준다. 이 내용을 복사해서 메모장에 붙여넣기 한 다음 XXX.js 파일로 저장해서 사용하거나 <script type="text/javascript"> </script> 사이에 붙여넣기 해서 적용하면 된다.
그런데 한 가지 주의할 점이 있다. 최적화된 소스가 제 기능을 하지 못할 수도 있다. 그래서 제 기능을 하는지 직접 확인해야 한다. 위 그림과 같은 결과에서 1위, 2위인 Packer 3.1의 결과 값은 최적화 전 JavaScript가 수행하던 기능을 제대로 수행하지 못했다. 그럴 땐 3위인 YUI Compressor의 결과 값을 사용하는 등의 방식으로 사용하면 된다. 용량이 적은 파일에선 큰 차이가 없지만, 잘 사용하면 수 KB까지도 크기를 줄일 수 있다.
| <인라인 스크립트> |
|
|
| <외부 js 파일> |
이 부분이 JavaScript를 사용하는 부분이다. <script type="text/javascript"></script> 사이에 있는 내용 또는 지정된 위치의 js 파일이 바로 JavaScript다. 블로그에 다양한 효과를 적용하려고 욕심을 내다보면 많은 JavaScript를 사용할 수 있다. 필연적으로 웹페이지 로딩 시간이 길어진다. 이럴 때 HTTP 요청을 줄이기 위해 JavaScript를 합치기도 하지만, js 파일을 통합했을 때 정상적으로 기능을 사용할 수 없는 것들이 꽤 많다. 웹페이지 로딩 시간을 단축하기 위해 사용할 수 있는 다른 방법의 하나는 JavaScript 자체를 최적화하는 것이다.
JavaScript가 뭔지도 잘 모르는데 어떻게 최적화를 하냐고? 아주 간단하다. 이미 다양한 최적화 프로그램이 개발되어 있다. JSMin, YUI Compressor, Dojo, Packer 등 다양한 프로그램이 있지만, CompressorRater를 방문하면 한 방에 모든 귀찮음을 날려버릴 수 있다.
▶ CompressorRater 방문하기
CompressorRater는 앞에서 이야기한 네 가지 유명한 최적화 프로그램의 최적화 결과를 비교해서 가장 빠른 결과 값을 갖는 스크립트를 알려주는 웹사이트다.
그런데 한 가지 주의할 점이 있다. 최적화된 소스가 제 기능을 하지 못할 수도 있다. 그래서 제 기능을 하는지 직접 확인해야 한다. 위 그림과 같은 결과에서 1위, 2위인 Packer 3.1의 결과 값은 최적화 전 JavaScript가 수행하던 기능을 제대로 수행하지 못했다. 그럴 땐 3위인 YUI Compressor의 결과 값을 사용하는 등의 방식으로 사용하면 된다. 용량이 적은 파일에선 큰 차이가 없지만, 잘 사용하면 수 KB까지도 크기를 줄일 수 있다.