본문 바로가기
개발, IT

YDN이 권장하는 웹 사이트의 성능 최적화 지침 15계명

by Nabi™ 2008. 5. 30.
 사이트 성능 최적화 에반젤리스트(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 속성을 지정하지 않는 것으로 로딩속도를 향상시킬 수 있다.
좋은정보가 되셨다면 아래 한번 클릭해주세요^^


관련글

댓글

티스토리툴바