양파맨의 겨울나기

웹 사이트 최적화 기법: UI 개발자를 위한 필수... 카테고리 컴퓨터/IT 지은이 스티브 사우더스 (아이티씨, 2008년) 상세보기

200페이지도 안되지만 꽤나 유용한 책이다.
아래는 책에서 이야기 하고 있는 내용을 다시 정리할겸 요약한 내용이다.

1. HTTP 요청을 줄여라.
- 웹페이지에 접근하면 웹브라우저(익스플로러, 파이어폭스등) 에 보여지는 모든 화면들이 HTTP 요청에 의해서 나타나는 것이다. HTML 코드는 물론이고 이미지 하나하나 모두 HTTP 요청이다.
아래 이미지 에서 보이는 것 처럼 GET 방식을 통한 HTTP 요청에 대한 응답이다.

각 요청마다 짧게는 0.008초에서 길게는 3초까지의 요청에 대한 시간이 나타나고 있는데, HTTP 요청이 줄어들면 줄어든 만큼 당연히 이 시간도 짧아지기 때문에 웹페이지 로딩속도가 짧아진다.

2. CDN을 사용하라.
브라우저가 웹서버에 요청을 하게 되면 웹서버가 살아있는한 응답을 한다. 보통 서버가 위치한 곳과 응답을 요청한 곳과의 거리에 따라서 응답속도가 달라지는데 물론 이 응답속도는 이 둘의 위치가 가까울수록 더 빠르다. (A와 B가 어떤 대화를 하는데, 이 둘이 직접적으로 이야기는 못하고, 중간에 꼭 어떤 사람을 거쳐야 한다면, 다섯명을 거치는것이 빠를지, 열명을 거치는것이 빠를지 생각해보면 쉽겠다.)

A라는 업체의 서버가 서울에 있다. 이 서버에 대한 응답요청을 제주도 에서 하는것보다 서울에서 하는게 빠르다는거다.
그런데 이 A라는 업체가 제주에서 응답요청을 하는 사람에게 좀 더 빠른 응답속도를 제공하기 위해서 제주에 서버를 두는건 일종의 낭비이다. 그래서 이런 역할을 CDN이 해주는 것이다.

물론 거의 대부분이 유료이다.

3. 헤더에 만료기한을 추가해라
이는 곧 브라우저캐시를 사용하라는 말이다. 사용자가 웹페이지에 접근할 때마다 매번 이미지를 새로받고, HTML을 새로 받는다면 사용자에겐 시간이 낭비되고, 서비스 제공업자에겐 트래픽이 낭비된다. 그래서 사용자브라우저에게 이 페이지는 앞으로 한달간 변경이 되지 않을 테니 서버에서 새로 가져갈 필요가 없다고 알려주는 것이다.
이렇게 되면 HTTP요청이 줄기 때문에 응답시간이 절약되고, 여기에 서버에서 데이터가 전송되지 않기 때문에 트래픽이 줄어든다. 사용자는 온라인으로 데이터를 가져오지 않고, 자신의 컴퓨터에서 가져오기 때문에 서비스이용속도가 올라간다.

4. 데이터를 압축해라.
gzip 컴포넌트를 사용하여 데이터를 압축한다.
참고자료 링크

5. 스타일시트의 위치
스타일 시트는 head 태그 사이에 넣어라. 다른곳에 스타일시트가 위치할 경우 페이지 로딩이 점진적이지 않고 멈춘 후 한꺼번에 보여진다.

6. 스크립트는 아래에 넣어라
페이지 하단에 스크립트를 위치시키는 것이 웹페이지 로딩에 빠르다고 한다.
하지만 난 head 사이에 넣고 있다.

7. CSS Expression을 피하라.
background-color: expression( (new Date()).getHours()%2 ? "#FFF" : "#000" );
IE에서는 위와같은 표현식이 가능하다. 하지만 쓰지말라고 한다. 어차피 쓸일이 없을것 같다.

8. 자바스크립트와 스타일시트는 외부파일로 빼라.

9. DNS조회를 줄여라.
결국 외부도메인 참조하는 것을 줄이라는것. keep-alive를 사용한 적절한 캐시도 좋다.

10. 자바스크립트를 최소화 해라
압축등을 사용해서 자바스크립트의 용량을 줄여라. 물론 CSS도 줄일수 있으면 줄여라.

11. 리다이렉션을 줄여라
리다이렉션할 주소 끝에 "/" 슬래시를 붙이지 않는다면 슬래시(/)을 붙여서 리다이렉트가 발생한다. 그 외에도 document.location 과 같은 자바스크립트 코드의 사용을 줄여라.

12. 중복스크립트를 없애라.
자바스크립의 코드의 중복을 제거하라. 모듈화 하여 적절하게 사용하라. 프로그램의 크기가 커져서 관리가 어려울 경우 별도의 hash 함수를 만들어서 스크립트를 관리하라. <- php 창시자인 rasmus 는 html코드를 php가 생성하는 것에 대해 부정적이었다. 어느 것이 좀 더 효율적인지는 직접 체크해봐야 할듯하다.

13. ETag를 설정하라.(또는 삭제하라.)
ETag는 웹서버와 브라우저간의 캐시유효성을 체크하는 메커니즘이다. 대부분은 기본설정을 이용하면 되지만 여러대의 웹서버를 가진 웹어플리케이션의 경우는 기본설정이 성능저하의 요인이 된다.
설정을 변경하든가 삭제하라. 아파치의 경우는 설정파일에 FileETag none 한줄을 추가해주면 된다고 한다.


위 13가지 내용들은 파이어폭스 플러그인인 YSlow를 사용하여 체크해볼 수 있다.있다.