블로그 로딩 속도 UP! (1) - JavaScript 최적화 (CompressorRater)

2011. 3. 28. 23:02IT/Tistory Tips

 JavaScript는 웹상에서 특정 명령을 수행하는 명령어다. 블로그에 어떤 효과를 추가할 때 JavaScript를 많이 사용한다. 내가 티스토리 스킨에서 봤던 JavaScript는 스킨의 날짜 표시 형식을 바꾼다든지 사이드바의 분류 항목을 접고 편다든지 화면을 스크롤 하면 맨 위로 이동하는 버튼이 생긴다든지 이미지 크기가 글 영역을 벗어나지 않게 한다든지 하는 기능을 수행했다. 스킨을 수정하다 보면 아래와 같은 문구가 보일 때가 있다. (티스토리는 [설정] - [스킨] - [HTML/CSS 편집] - [skin.html]에 있음.)

<인라인 스크립트>
<script type="text/javascript"> //<![CDATA[ function() 어쩌고저쩌고... //]]> </script>

<외부 js 파일>
<script src="./images/abcdef.js" type="text/javascript"></script>

 이 부분이 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까지도 크기를 줄일 수 있다.

  • 프로필사진
    알 수 없는 사용자2011.03.29 11:41

    유용한 사이트네요. 감사합니다. :)

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.03.29 12:55 신고

      저도 예전엔 YUI Compressor나 Packer 사이트만 이용했는데 여러가지를 비교할 수 있으니 좋네요. 즐거운 하루 보내세요~

  • 프로필사진
    Favicon of https://alllink.tistory.com BlogIcon 링크정보2011.03.29 17:51 신고

    전에 돌아다니가 우연히 보고, 즐겨찾기 해서 사용하고 있는 사이트예요.
    YUI Compressor나 Packer가 무슨 말인지는 모르겠지만, 저도 YUI Compressor만 사용한 게 제대로 작동하더라고요.
    css tidy로 css 파일도 최적화해서 사용하고 있지요.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.03.29 22:47 신고

      프로그램 원리는 알 수 없지만, 이것저것 시험해 봤을 때 YUI Compressor가 무난히 적용되는 것 같아요~ 새롭게 개발중인 것이라 그런가 모르겠네요 ㅎㅎ 전 아직 새로운 스킨 수정 중이라 CSS 파일은 최적화를 못하고 있답니다^^;;

      요즘은 Firefox 및 Google Chrome 확장 기능으로 제공되는 Yahoo Yslow나 Google Page Speed란 로딩 속도 측정 도구를 사용할 때 최적화된 html, css, 각종 스크립트를 제공하더라구요~

      오늘 하루도 잘 마무리하세요~

  • 프로필사진
    알 수 없는 사용자2014.01.30 20:27

    잘 보고 갑니다 !

  • 프로필사진
    초코땡2014.06.07 02:32

    안녕하세요

    CSS, html 은 압축이 안되는것인가요?

    답변 부탁드립니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2014.06.07 23:02 신고

      여기서 이야기하는 압축은 전체 파일 크기를 줄이는 것이 가장 기본입니다. CSS나 HTML 역시 JavaScript처럼 파일 크기를 줄일 수 있습니다. 가장 간단한 방법은 필요없는 공백이나 기호를 삭제하는 것입니다.

      http://refresh-sf.com/yui/
      위 사이트를 방문하시면 CSS를 압축할 수 있습니다.

      HTML의 압축기능을 제공하는 사이트가 있는지 모르겠지만, 수정할 것을 생각한다면 HTML은 압축하지 않는 것이 좋을 것 같습니다. 굳이 파일 크기를 줄이시겠다면, 앞서 이야기한 것처럼 필요없는 공백 등을 삭제하시면 됩니다.

  • 프로필사진
    초코땡2014.06.07 02:40

    1. 자바스크립트를 하나로 합쳐서 구글 드라이브에 올린다음 링크를 받을수 가 있는것인가요?

    그러면 속도가 더 빨라지는건지요?....

    2. css 와 자바를 구글 드라이브에 올리고 수정시에는 컴퓨터로 구글 드라이브를 받아서

    연동시킨다음에 컴퓨터에서 수정해야 가능한것인가요?....

    3. 하나하나 압축해서 하나하나 다 압축해야 하는지 궁금합니다....

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2014.06.07 23:03 신고

      1. 티스토리 블로그를 이야기하시는건가요? 자바스크립트는 그냥 파일 업로드 기능을 사용해서 티스토리 서버에 업로드하거나 HTML 파일에 <script> 요소를 사용해서 입력하시면 됩니다. 구글 드라이브에서 외부 링크를 지원하는지 확실히 모르겠네요. 구글 드라이브를 사용한다고 크게 빨라질 것 같지는 않은데요.

      2. 수정은 js 파일 형태라면 해당 파일을 내려받아 수정한 다음 다시 업로드하셔야 하고 HTML에 <script> 요소로 삽입했다면 티스토리 스킨 수정 화면에서 바로 수정하실 수 있습니다.

      3. 자바스크립트 압축 역시 기본적으로는 공백이나 불필요한 기호를 없애는 작업이므로 개별적으로 압축해서 합치는것이나 다 합친 다음에 압축하는 것이나 상관 없습니다.

  • 프로필사진
    초코땡2014.06.08 04:32

    답변 감사드립니다.

    궁금한점이 또 있는데요. 구글 블러그를 사용중입니다.

    html 이 CSS 와 자바스크립트를 포함 하는것인가요?

    CSS 는 <b:skin>....</b:skin> 사이이고

    자바스크립트는 <body>,,,</body> 사이인것인가요?

    html 은 뭔지 모르겠습니다. 제가 알기로는 CSS 와 자바 가 html 에 속하는것으로 알고 있었는데요.....


    그리고 구글 드라이브에서 호스팅하고 링크를 따오는것인데요,, 링크가 많으면 속도가 느리기 때문에

    한곳에 다 몰아서 압축하고 링크 하나만 받아서 넣어도 되는지 궁금합니다...

    제가 왕초보라서,,, 상세한 설명이 필요한데... 자료가 없더라구요 ;;;;

    답변 꼬옥 부탁드립니다.

    감사합니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2014.06.08 09:24 신고

      초코땡님 안녕하세요^^
      구글 블로그에선 구글드라이브에 파일을 저장해서 사용하나보군요! 제가 사용해본적이 없어 몰랐습니다~

      일단 HTML, CSS, JavaScript를 구분해보면 HTML은 웹페이지의 구조를 만드는 부분입니다. 윗부분에 제목을 넣고 그 아래에 본문을 넣고 사이드바는 어떻게.... 뭐 이런식으로 구조만 만드는 것이죠. 확장자는 htm / html입니다.

      HTML을 다 만들면 화면에 표시되는 요소들이 내 의도대로 자리잡고 있겠지만, 하얀화면에 검정글씨밖에 없을겁니다. 스타일 지정을 안했기 때문입니다. CSS가 바로 이 역할을 해줍니다. HTML의 각 요소가 화면에 어떤 위치에 어떤 색으로 어떤 방식으로 표시될지 정하는 것이 CSS의 역할입니다. 확장자는 css입니다.

      JavaScript는 본문에서 얘기한것처럼 특정한 명령을 수행하는 것입니다. 워낙에 쓰임이 다양해서 다 열거할수도 없지만, 간단한 숫자계산부터 글자(string)치환, 동작 설정 등 많은 부분에 사용됩니다. 확장자는 js입니다. 아, 참고로 자바(JAVA)는 다른 프로그래밍 언어의 이름입니다.

      HTML이 CSS, JavaScript를 포함하는가라고 하면 포함할수도 있고 아닐수도 있습니다. 일단 위에서 이야기한 개념으로는 포함관계는 아니겠죠. 그러나 HTML의 다양한 요소 중 문서의 스타일(CSS)를 지정할 수 있는 <style>과 JavaScript를 지정할 수 있는 <script>를 사용하면 CSS와 JavaScript를 HTML에 포함시킬수도 있습니다.

      말씀하신 <b:skin>이라는 부분은 구글 블로그에서 사용하는 구분인것 같은데 제가 직접 사용해보지 못해서 CSS 부분이 맞는지 모르겠습니다.

      외부에서 자바스크립트를 가져올 때는 기본적으로 작은 파일 여러개보다 큰 파일 하나가 빠릅니다. 여러개의 js 파일을 사용중이라면 하나로 합친 다음 사용하시는게 나을겁니다~

      HTML, CSS 에 대한 기초개념과 요소, 속성 등을 한번 살펴보시면 좋을것 같습니다. JavaScript는 그다음에 보시는게 나을것 같구요.
      http://www.w3schools.com
      여기 가보시면 기본개념을 잡는데 도움이 되실 겁니다~