Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

[Book] 웹사이트 최적화 기법 - UI 개발자를 위한 필수 지침서

웹 사이트 최적화 기법

웹 사이트 최적화 기법 - 8점
스티브 사우더스 지음, 박경훈 옮김/ITC(아이티씨)


제목에서 알 수 있듯이 이 책은 웹사이트의 성능튜닝에 대한 내용이고 클라이언트단 혹은 앞단이라고 부르는 UI에 대한 성능튜닝에 대해서 이야기 하고 있다. 자바스크립트나 CSS를 어떻게 짜는지 같은 것을 다루는 것이 아니라 어떤 사이트이든지 성능튜닝을 위해서 적용할 수 있는 경험에서 나온 14가지 규칙을 차례차례 설명하고 있다.

이 책의 저자는 야후에서 일하면서 실제 UI 최적화에 대해서 오랫동안 노력한 경험을 바탕으로 책을 쓰고 있기 때문에 그 내용에 대해 지식도 해박하며 설명이 쉬워서 이해하기가 좋다. 번역도 상당히 깔끔한 편인데다가 책의 분량이 많지 않아서 가볍게 읽을 수 있었다. 기술적인 부분도 기술적인 부분이지만 원리와 이유에 대해서 더 집중해서 설명하고 있는 느낌이다.

시작부분에서는 왜 튜닝을 하는데 UI쪽을 신경써야 하는지에 대해서를 설명하고 각 규칙들에 대해서 어떤 문제때문에 튜닝을 해주어야 하는지 튜닝후에는 어떤 효과가 나는지 자세하게 설명해 주기 때문에 이해하기가 쉽다. 물론 튜닝과 관련한 내용의 양이 방대하기 때문에 모든 부분을 다 설명하고 있는 것은 아니다. 스크립트등 간단한 규칙들은 기술적으로도 설명하지만 서버쪽에서 셋팅해야 하는 부분은 간단히 소개정도를 하고 넘어가는 정도이다. 그럼에도 허술하다는 느낌은 없다. 그런부분은 각 환경마다 너무 다르기 때문에 일일이 다 소개하는 것은 불가능하고 어떤 적용을 해야하는 지만 이해된다면 적용에 대한 기술적인 부분은 각자 찾아봐서 해결하면 될 노릇이다.

각 경우별로 해결법이나 조심해야 하는 부분에 대해서도 다양하게 제시해 주고 있고 각 경우별로 확인을 할 수 있도록 온라인에 페이지 주소를 알려주기 때문에 직접 확인해 볼 수 있어서 이해하는데 큰 도움을 주고 있다.



개인적으로도 UI쪽에 관심이 꽤 있었기 때문에 이런부분에 대해서도 궁금함이 어느정도 있었는데 이책으로 어느정도의 궁금함은 풀린상태이다. 프로젝트를 하다보면 서버단에 비해서 클라이언트단쪽의 퍼포먼스는 좀 등한시 하게 되는 경향이 있는데 요즘은 RIA다 Ajax다 해서 클라이언트도 점점 무거워지고 있는 상황에 이런 성능 최적화에 대해서도 생각해 보아야 한다.

그리 많은 시간을 투자하지 않고도 UI성능최적화에 대해서 한번 생각해 볼 수 있게 하는 책....

물론 적용은 찬찬히.... ㅋ

나중에 참고하기 위해서 내용을 약간 요약하자면......

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 를 보냄)


항상 책보고 나면 나중에 참고할라고 좀 정리를 하고 싶은데 파는 책이기 때문에 신경이 쓰인단 말이지.. ㅡ..ㅡ 머 이정도 선에서는 책정보의 목차와 크게 차이나는게 없으니까 별 문제가 없겠지... 있으면 후덜덜덜
2008/10/14 02:28 2008/10/14 02:28