1. HTTP 요청을 줄여라.
이미지맵, CSS Sprite, data:를 이용한 인라인 이미지
2. 콘텐츠 전송 네트워크를 이용하라. -> CDN사용
3. 헤더에 만료기한을 추가하라 -> 헤더의 Expires를 통해 캐시가능, HTTP/1.1에서는 Cache-Control, 1.0에서는 max-age
HTML문서를 제외한 이미지, 스크립트, 스타일시트, 플래시 모두에 적용하라
4. Gzip 컴포넌트
클라이언트는 Accept-Encoding: gzip, deflate형태로 지원여부를 알려주고 서버는 Content-Encoding: gzip을 통해 알려준다.
이미지와 PDF는 압축하지 않는다.
프록시를 사용할 경우는 Vary속성을 이용한다.
5. 스타일시트는 위에 넣어라.
스타일시트가 아래 있으면 다 받을때까지는 브라우저가 렌더링을 하지 않는다.
@import를 사용할때는 다른 요소보다 앞서서 선언해야 한다.
6. 스트립트는 아래에 넣어라(body전에)
스크립트를 다운로드할 때는 렌더링을 하지 않는다.
스크립트는 동시다운로드가 불가능하다. (스크립트의 순서를 지키기 위해서)
7. CSS Expression을 피하라 (IE5부터 지원)
스크롤이나 마우스가 움직일때도 계속 실행되는 문제가 있다. (다른 방법을 통해서 이걸 해결되도록 만들어야 함)
8. 자바스크립트와 CSS를 외부 파일에 넣어라.
HTTP요청때문에 인라인이 성능이 좋지 때문에 외부파일은 개시된다.
9. DNS조회를 줄여라.
DNS를 조회하는데 시간이 소요되고 완료될때까지 다운로드가 불가능하다.
OS와 브라우저가 DNS정보를 캐시하기 때문에 TTL을 너무 짧게 설정하지 않는다.
10. 자바스크립트를 최소화하라
JSMIN을 통해 압축하던지 난독화를 한다. 결과성능에 거의 차이가 없기 때문에 특별한 목적 아니면 압축이 낫다.
11. 리다이렉트를 피하라
가장 많이 쓰는 리다이렉트는 301, 302가 있는데 리다이렉트는 페이지를 느리게 만든다.
주소뒤에 슬래시(/)를 이용하지 않을때 발생하는 리다이렉트가 가장 많은 실수다. (호스트에서는 발생하지 않는다.) -> Alias등으로 해결
12. 중복되는 스크립트를 제거하라
여러 명이 개발할 때 생길수 있는 중복스크립트가 생기지 않도록 하라.
13. ETag를 설정하라.
ETag(Entity Tag)는 웹서버와 브라우저가 캐시된 구성요소의 유효성을 확인하기 위해서 사용하는 메커니즘
브라우저가 캐시의 유효성을 파악할 때는 마지막 수정일을 비교하거나 ETag를 이용한다.
ETag는 서버가 고유한 문자열로 만드는데 서버가 분산서버일때는 ETag에 문제가 생기므로 주의한다.
14. 캐시를 지원하는 Ajax 만들기
사용자의 요청에 의해 발생하는 능동적 Ajax가 최적화의 대상 -> 동적으로 생성되는 것을 고려해서 캐시될 수 있도록 쿼리스트링 파라미터를 이용한다.(시간이나 고유아이디)
개인정보 보호를 위해서는 SSL을 이용해라
* 조건부 GET 요청 : 캐시의 구성요소가 유효한지 확인하기 위해서 조건부 GET 요청을 보내고 유효하면 캐시를 사용한다.
(헤더의 Last-Modified를 비교한다. -> 수정되지 않으면 304 를 보냄)
