Rev. 2.73

웹사이트 성능 최적화 에반젤리스트(Evangelist)로 활동 중인 YDN(Yahoo! Developer Network)Steve Souders씨가 작성한 15개의 웹사이트 성능 최적화 지침이다. "High Performance Web Sites"라는 이름으로 책이 출간되어 있으며, Firebug의 확장기능인 YSlow역시 이 규칙들에 기반하고 있다. 다음 예제들은 지침에 근거하여 작성한 실습 예제들로서 조금 더 구체적인 성능향상 방법들을 제시한다.

규칙 1 - HTTP 요청을 줄여라

HTML에 속해있는 이미지, 스크립트, 플래시 등은 서버로 요청하고 응답받기까지의 시간을 필요로한다. 이러한 외부파일들이 많으면 많을 수록 웹사이트의 성능을 떨어트리기 마련이다. 다음은 예제들은 HTTP 요청을 줄이기 위한 방법을 제시하며 동일한 결과물을 놓고 직접 비교할 수 있다. 참고로 예제 6 ,7번에서 사용된 Data URI는 IE7을 포함한 이하버전에서는 지원하지 않는 다는 것을 숙지하기 바란다.

규칙 2 - CDN을 사용하라

CDN(Content Delivery Network)은 접속하는 사용자의 위치에 따라서 응답이 빠른 서버로 접속하여 필요한 파일들을 호출하는 것을 말한다. 서비스 국제화를 지향하는 곳에 적절한 성능향상 방법으로 일반(특정 지역만을 대상으로 하는 서비스) 사이트에서는 만족스러운 향상효과를 기대하기 어렵울 뿐더러 높은 유지비용을 필요로 한다.

  • 예제 1 - CDN : CDN 사용
  • 예제 2 - No CDN : CDN 미사용

규칙 3 - Expires 헤더를 추가하라

자바스크립트를 이용한 Ajax와 복잡한 UI 등이 널리 애용되면서 더욱 많은 외부파일(스크립트와 이미지, 스타일시트 등)들을 생산하게 됨에 따라 이를 효율적으로 처리하지 못할 경우 웹사이트 성능이 크게 저하되기도 한다. 외부파일들의 헤더에 Expires 정보를 추가하여 캐시하는 것 만으로도 웹사이트의 성능을 끌어 올릴 수 있다.

규칙 4 - Gzip 압축을 사용하라

외부파일들을 압축하여 성능을 높일 수도 있다. 현존하는 대부분의 브라우저가 Gzip 압축전송을 지원하며, 이또한 헤더 정보를 수정하고 비교적 간단한 서버단 작업으로 구현할 수 있다.

규칙 5 - 스타일시트(CSS)는 위에 선언하라

스타일시트(CSS)는 HTML의 헤드(Head)태그의 최상단에 위치하는 것이 성능향상에 도움된다.

규칙 6 - 스크립트는 아래에 작성하라

스크립트 파일들은 바디(Body)태그에서 호출하는 것으로 성능을 높일 수 있다. 다음 예제들은 자바스크립트 위치에 따른 성능변화를 매우 직관적으로 표현하고 있다.

규칙 7 - CSS에서 Expressions 사용을 자제하라

IE계열 브라우저에서만 작동하는 expression은 IE6 이하에서 표현하지 못하는 스타일링에 상습적으로 사용한다. 브라우저로 하여금 다소 무리한 연산을 요구하기 때문에 사용을 자제하는 것이 좋다.

규칙 8 - 자바스크립트와 스타일시트는 외부파일로 분리하라

너무나도 당연한 성능향상을 기대할 수 있다. 일단 브라우저에서 캐시효과를 누릴 수 있는 것 외에도 필요한 스크립트만을 호출할 수 있는 등 부가적으로 얻어지는 가치는 상당하다.

규칙 9 - DNS 확인 시간을 줄여라

DNS(Domain Name System)란 쉽게 말해 인터넷의 전화번호부라고 할 수 있다. 도메인이 사람이름이고 IP가 전화번호인 셈이다. 전화번호부에서 원하는 전화번호를 찾기위해 시간이 걸리는 것 처럼 브라우저 또한 DNS 확인을 위한 시간을 필요로한다. 여기에 들이는 시간을 줄여서 웹사이트의 성능을 높일 수 있다. DNS정보 역시 브라우저의 저장영역에 캐시되어 있기 때문에 같은 도메인 네임을 사용할 경우 DNS 확인에 걸리는 시간을 최소화 할 수 있는 것이다. 서로 다른 도메인을 가진 외부 파일들을 빈번히 호출할 때 고려해야 할 사항이다.

규칙 10 - 자바스크립트를 최소화 하라

JS, CSS 파일을 압축(Minified) 또는 암호화(Obfuscated or Packed)하여 용량을 줄일 수 있다. Minify는 파일 내부의 개행과 주석 그리고 인텐트(들여쓰기) 등, 시스템이 이해하기에 불표한 문자열을 제거하여 용량을 줄이는 방법이고 Packing은 여러가지 압축기법으로 문장을 암호화하여 브라우저의 인터프리터에 의존해 해석(Evaluate)하는 방식으로 Minified 파일보다 압축률이 훨씬 높다. 참고로, 매번 Packed하는 것이 꼭 좋지만은 않다.

규칙 11 - 리다이렉트는 피하라

포워딩(Forwarding)과 달리 리다이렉트(Redirect)는 2차례에 걸쳐 통신하게 된다. 그만큼 서버로부터의 응답이 완료되기까지 소요되는 시간이 길기 때문이다.

규칙 12 - 중복되는 스크립트는 제거하라

때때로 자바스크립트 파일을 복수로 불러야할 때가 있다. 이 때 캐시설정을 하지 않았다면, 동일한 파일이라 할지라도 브라우저는 지속적으로 요청하고 같은 수행을 반복 한다. 이와 같은 스크립팅은 가급적이면 피하는 것이 좋다.

규칙 13 - ETag 헤더를 설정하라

ETag는 HTTP/1.1에 기본으로 사용하도록 설정된 태그로서 파일캐시 및 갱신 진위여부를 가리는데 사용된다. 캐시와 밀접한 연관이 있으므로 외부파일의 헤더에는 ETag를 항상 설정하여 전송량을 최소화할 수 있다. 보다 자세한 내용은 "응답헤더 설정으로 웹사이트 성능 개선하기"를 참고하자.

규칙 14 - AJAX를 캐시하도록 하라

Ajax 요청 역시 Expires 헤더를 설정하여 캐시효과를 누릴 수 있다.

규칙 15 - 아이프레임을 현명하게 사용하라

아이프레임역시 src 속성에 의해 브러우저로 하여금 HTTP 요청을 할당한다. 아이프레임을 다수 사용할 때 src 속성을 지정하지 않는 것으로 로딩속도를 향상시킬 수 있다.

Comments

자바스크립트로 CSS의 룰에 따라 DOM 선택자를 구현한 것은 이미 오래전 이야기다. 대부분의 자바스크립트 라이브러리 들이 DOM 선택자를 제공하고 있으며, 지금은 그 성능을 놓고 경쟁하기에 이르렀다. MooTools에서는 각 라이브러리들의 DOM 선택자의 성능을 측정하는 SlickSpeed 테스팅까지 진행하고 있을 정도다. DOMAssistant는 바로 이 DOM 선택자에 집중해서 구현한 자바스크립트 라이브러리이다. 문법은 jQuery와 매우 흡사하지만 XPath를 이용하는 프레임웍 라이브러리들 중에서 최고의 정확도와 속도를 자랑한다. 특히, XPath를 지원하지 않는 IE에서는 자바스크립트로 만들어진 DOM 선택자에 의해 랙이 발생하거나 정확도에 오차가 생기기도 하는데, DOMAssistant는 이와 같은 문제해결에 도움을 준다. DOM과 관련있는 Ajax, Content, CSS, Events, Load 모듈을 추가로 제공하고 있다.

$("#container input[type=text]"); 

$("#navigation a").addEvent("click", myFunc); 

$("#news-list").load("updated-news.php"); 

Comments

Scrollbar.jpg

얼마전에 소개한 3D 포토 갤러리를 선보인 Gerard Ferrandez씨는 참으로 아름다우신 분입니다. 1999년부터 지금까지 자신만의 DHTML 스킬을 유감없이 발휘한 여러 예제들을 소개하며, 라이센스도 없는 소스공개를 10년가까이 해오고 계십니다.(박수!) 그의 홈페이지는 지금까지 보아온 그 어떤 비주얼라이즈한 예제들 보다도 뛰어난 DHTML을 경험하게 합니다. 자바스크립트를 10년 가까이하면 3D를 떡주무르듯이 구사하게 되나봅니다. 각설하고, 지금 소개하는 "Skinned HTML Scrollbar"은 자바스크립트와 CSS, DOM을 활용하여 스크롤바에 스킨을 입히는 예제입니다. IE에서는 자체적으로 CSS를 통해 커스터마이징 할 수 있도록 지원합니다만, 위 이미지에서 보는 것 처럼 IE의 것과는 차원이 다른 비주얼을 연출했습니다. 더욱이 크로스-브라우저를 지원합니다. 멋지군요!

Comments