웹사이트 성능 최적화

Yahoo Developer Network 의 

Best Practices for Speeding Up Your Web Site 를 가볍게 정리한 내용입니다~

자세한 내용은 위 사이트에서 참고하세요~~

[컨텐츠/마크업]

HTML 에서 이미지 사이즈를 변경하지 마라.

컴포넌트 사이즈를 25K 이하로 유지하라. (for iphone)

img 태그에 빈 이미지를 넣지 말라.(empty src)

iframe 을 최소화하라.

DOM 엘리먼트를 최소화하라. (대신 CSS 로)

[스크립트]

HTTP Request 최소화하라.

스크립트는 하단에 넣어라.

스크립트 및 CSS 는 외부에 둬라. (캐시 이득)

스크립트, css 를 최소화하라.

Ajax 응답이 캐시 가능하도록 하라.

Ajax 요청에 GET 메서드를 사용하라.

redirect 를 피하라.

스크립트 중복을 피하라.

미리 로드할 수 있는 컴포넌트와 천천히 로드해도 되는 컴포넌트를 분리하라.

쿠키 사이즈를 줄여라.

버블링을 이용한 이벤트 핸들러를 활용하라.

DOM 접근을 최소화하라.

[CSS]

스타일시트는 상단에 넣어라.

CSS Expression 은 피하라.

css 필터를 피하라.

이미지와 CSS Sprite 를 최적화하라.

[서버]

캐시 만료일을 설정하라.

gzip 으로 압축하라.

ETags 설정하라.

버퍼를 미리 flush 하라.

컴포넌트를 도메인 별로 나눠라.

쿠키를 사용하지 않는 도메인을 확보하라. (스태틱)

404 가 뜨지 않게 하라.

favicon.ico 아이콘을 (최소로) 생성하라.

#. 성능 측정 도구

- (IE) dynaTrace

- (FF) Yahoo 의 YSlow for Firebug

- (FF) Google 의 PageSpeed