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

Deprecation.jsPrototype의 1.5버전을 1.6으로 업그레이드 할 수 있도록 도와주는 자바스크립트 라이브러리이다. 1.6버전에서 코어구조에 큰 변화가 생기면서 기존에 사용해 오던 API에도 변화가 생겼기 때문에 1.6에서 새롭게 제시하는 사용법으로 코드를 수정할 것을 권장하고 있다. 하위 호완성을 위해 1.5버전에서 사용하는 코딩 방식을 그대로 사용할 수 있기는 하지만 왠지 찝찝하다. Deprecation.js를 이용하면 1.6으로의 최적화 작업을 손쉽게 해결할 수 있다. 파이어폭스의 파이어버그 콘솔을 통해 1.5용으로 작성된 코드를 찾아 권장코드로 변경할 것을 실시간으로 알려준다.

Position.cumulativeOffset(element)[0]; // 변경 전
element.cumulativeOffset().left; // 변경 후

Element.immediateDescendants(element); // 변경 전
element.childElements(); // 변경 후

new Insertion.After(element, html); // 변경 전
element.insert(html); // 변경 후

Position.page(element)[1]; // 변경 전
element.viewportOffset().top; // 변경 후

element.getElementsByClassName('className'); // 변경 전
element.select('.className'); // 변경 후 

Deprecation.js의 도움을 받아 위와 같이 코드를 수정할 수 있었다.

Comments

Steven Levithan씨는 자바스크립트에서 trim 함수를 만들고 최적화하는 흥미로운 실험을 했습니다. 아시다시피 trim함수는 php에서 사용되는 함수로써 문자열의 처음과 끝에 공백이 있는 경우 이를 제거하고 반환받는 편리한 함수입니다. Prototype에서는 이와 같은 기능인 strip메서드를 제공하고 있습니다. 이 메서드는 아래와 같은 코드를 실행하게 됩니다.

return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');

일반적으로 위와 같거나 비슷한은 코드를 사용하여 자바스크립트로 trim함수를 구현해서 사용합니다. Steven Levithan씨의 테스트 결과에 따르면, 정규표현식에는 문자열의 마지막으로 건너뛰는 조작이 불가능하기 때문에 긴 문자열에서는 성능을 제대로 발휘하지 못한다고 합니다. 그래서 긴 문자열에 trim함수를 사용하는 경우 아래와 같은 코드를 사용하는 것이 성능을 높일 수 있다는 결론을 얻어냈습니다.

function trim11 (str) {
	str = str.replace(/^\s+/, '');
	for (var i = str.length - 1; i > 0; i--) {
		if (/\S/.test(str.charAt(i))) {
			str = str.substring(0, i + 1);
			break;
		}
	}
	return str;
}

Comments