UI 개발자의 또다른 기술력 - 사이트 최적화(2)

2010. 10. 29. 09:30
지난번 UI개발자에게 사이트 최적화 기법이 어떤 의미인지 언급했었습니다. 남의 일이 아니라는 점이겠네요 ^^
물론 국내에 UI개발만 하는분들이 많지는 않지만, Front-end 쪽의 개발을 맡고 계신분들은 이런 부분의 기술력을 가지고 있으시길 바라겠습니다

이번엔 그 많은 최적화 기법중 내가 쉽게 적용해보고, 최대의 효과를 얻을 수 있는 몇가지를 소개하겠습니다.
최적화의 방법은 크게2가지입니다
  • 데이터의 양을 줄이자 <이번시간에>
  • 데이터의 요청자체를 줄인다.
다시말해, 작은데이터를 적게 보내면 되는 것인데요. 모든 최적화의 출발점은 2가지의 관점에서 출발하고 고민해야 합니다.실제로 알려진 다양한 기법은 모두 이 2가지에서 크게 벗어날 수 없습니다. 아 물리적인 서버와 네트웍상황을 개선하는 방법이 있지만, 개발자가 직접적으로 신경써야 할것은 아니죠. 하지만 이부분도 우리가 멋지게 컨설팅이나 제안은 할 수 있는 항목입니다.



데이터의 양을 줄이자
2가지로 나뉩니다.
  • 소스코드(자바스크립트 & CSS)를 병합하자.
  • 소스코드자체를 줄이자
소스코드의 병합
브라우저는 자바스크립트와 CSS 를 안타깝게도 단계적으로 다운로드 합니다. 이러한 이유는 브라우저가 섣불리 렌더링을 하여 오류를 일으키는 것을 방지하기 위한 것인데요. 최근에 IE8의 경우에는 동시다운로드가 지원되고 있는것 같긴 합니다
어쨋든 스크립트 파일이 분리되는 경우 이러한 HTTP REQUEST가 계속 증가하고, 간단히 소스코드를 병합하면 됩니다.
소스코드를 병합하여 코딩을 하는경우 여러가지 관리적인 문제가 있습니다. 모듈화 작업을 하는 경우 파일을 여러가지로 분리를 해두는것이 물론 좋습니다. 우리는 배포단계(소스코드를 웹서버에 올려서 서비스하는 행위)에서 소스코드를 머지하는 방법을 익히면 됩니다.

여기서는 ANT Build 하는 방법을 소개하겠습니다. ANT까지 알아야 한다는것이 막막하다면, JAVA개발자를 통해 BUILD.XML에 대하여 설명을 듣고, 어떻게 작성을 하면지 쉽게 배울수 있습니다^^
<concat destfile="${build.dir}/JS_merge.js" encoding="utf-8" outputencoding="utf-8">
                        <fileset file="${src.dir}/a.js" />
                        <fileset file="${src.dir}/c.js" />
                        <fileset file="${src.dir}/b.js" />
 </concat>
<file merge example>

concat 이라는 task를 활용해서 소스 a,b,c,js파일을 병합하는 간단한 방법입니다. 디렉토리 단위로 mapper라는 task를 활용하여 소스를 병합할수도 있습니다.

소스코드의 압축
자바스크립트와 CSS파일내에는 많은 공백과 주석이 존재할 수 있습니다. 이런 부분은 생각보다 큰 부분으로 파일사이즈를 증가시켜 다운로드 시간에 적지 않은 영향을 미칩니다. 소스코드의 압축은 이러한 공백과 주석을 제거해 줍니다.

이런 방법은 여러가지 안정적인 툴이 이미 많이 나와있으며, 대부분의 압축률의 큰 차이가 없습니다. 아래 언급된 것중 어떤것이라도 사용해도 좋다고 생각됩니다.

JSMin
URL : http://crockford.com/javascript/jsmin
고려사항 : 이툴은 소스코드를 일부 파싱하는 과정에서 정확한 문법에 어긋나 경우 압축이 제대로 되지 않습니다. 그러한 문법겁사를 JSLint라는 툴로 돌려서 문제가 없어야 됩니다. JSLint에서 추천하는 몇가지 문법이 error code를 일으키지 않는데도, bad pattern으로 인식시켜서 오류처리를 하는경우등이 있습니다. 개발자 입장에서는 조금 난감한 상황이 나오기도 합니다.
더글라스 크랙포트라는 유명한 javascript json개발자 아저씨가 만들었습니다 ^^

YUI Compressor
URL : http://developer.yahoo.com/yui/compressor/
제가 가장 좋아하는 압축 툴입니다. YAHOO YUI라는 자바스크립트 프레임웍크팀에서 제작한 것으로, 매우 안정적이고 사용법이 편리 합니다. JAVA기반으로 제작되어 있습니다.
역시 ANT 나 Maven과 같은 빌드를 도와주는 툴에서 사용하기 쉽게 plugin등을 제공하기도 합니다
Maven plugin : http://alchim.sourceforge.net/yuicompressor-maven-plugin/compress-mojo.html
ant build 에포함시키는 방법 : http://www.julienlecomte.net/blog/index.php?s=YUI+Compressor
YUI Compressor는 옵션이 굉장이 많은데요. 디폴트로 몇가지 옵션을 선택하시면 됩니다.
<apply executable="java" parallel="false">
                        <fileset dir="${build.dir}" includes="*.js" />
                        <arg line="-jar" />
                        <arg path="${lib.yui.dir}/build/yuicompressor-2.4.1.jar" />
                        <arg line="--charset ${encode.type}" />
                        <arg line="--nomunge" />
                        <srcfile />
                        <arg line="-o" />
                        <mapper type="glob" from="*.js" to="${build.dir}/compressor/*.js" />
                        <targetfile />
                </apply>
<yui compressor ant build>
위의 옵션에서 nomunge라는 부분이 있습니다. 이부분을 옵션으로 주어야만 난독화(obfuscation)를 하지 않습니다.
난독화라는 것은 소스코드자체의 함수명이나 변수명을 변경하여 압축시켜주는 것으로, 해독이 어렵게 만드는 것과 소스코드자체를 조금더 줄이는 방법입니다. 하지만 이러한 방법은 최적화가 매우 절실한(?)곳에서 사용하기를 권장합니다.

Gzip
Gzip은 가장 추천하는 방식입니다. 여러가지 장점이 있습니다. 압축률은 비교적 비슷하지만, 개발자 입장에서 별로 할것이 없습니다.Apache설정으로 소스코드르 압축하며, 대부분의 브라우저들이 이러한 압축을 풀어주는 기능을 지원하고 있습니다.
Apache 버전에 따라서 그 설정이 조금씩 다른데요. 2.x.x버전에서는 아래의 URL에서 정보를 얻을수 있습니다.
Apache 2.0 : http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
Apache 2.2 : http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
AddOutputFilterByType DEFLATE text/html text/plain text/xml  //압축할 파일타입을 지정합니다.

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html  // 지원하지 않는 브라우저를 명시해 두고 있네요.
Apache를 직접 다루기 어려운 분들은, 웹서버 담당자에게 이와 같은 URL과 방법/목적을 알려주시면 손쉽게 최적화 방법을 적용할 수 있겠죠?

이처럼 소스코드의 병합과 압축만으로도 최적화의 효과를 크게 얻을 수 있습니다. 하지만 대부분의 웹사이트에서는 아직도 이러한 방법을 적용하지 않고 있습니다. 일부 솔류션을 제공하는 곳에서는 난독화등으로 자바스크립트 소스를 해독불가능하게 만드는 목적으로 해두긴 하지만, 그외 웹 개발단계에서 발생하는 자바스크립트 소스는 HTTP Request를 많이 자주 요청하며 병목을 일으키고 있습니다.
반드시 소스코드의 병합과 압축을 적용해보시길 바랍니다 ^^

다음에는 데이터의 요청자체를 줄인다를 소개하겠습니다.
미리 말씀드리면 다음과 방법을 간략히 안내하려고 합니다.
  • CSS Sprite
  • 헤더에 만료기간을 추가하기
  • JS와 CSS를 외부파일로 설정해야 하는 이유
  • 그밖의 캐쉬
지난편에 소개한 책을 읽어보시면 보다 자세한 내용이 포함되어있습니다 ^^

비회원 HTML5_JS_CSS