[Book] 초고속 웹사이트 구축 : 좀 더 빠른 차세대 웹사이트를 위한 성능 최적화 기법..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

초고속 웹사이트 구축 : 좀 더 빠른 차세대 웹사이트를 위한 성능 최적화 기법 스티브 사우더스 저 박경훈,신형철 공역 위키북스

일단 책얘기를 하기 전에 책 제목에 대해서 얘기하겠습니다. 이 책은 상당히 좋은 책이지만 책제목은 좀 아쉽습니다. 원문 제목은 괜찮지만 이것을 한국말로 그대로 번역을 하다보니 약간의 의미가 모호한 제목이 되어버렸습니다. 부제는 눈에 별로 안띄기 때문에 큰 의미는 없을것 같고 "초고속 웹사이트 구축"이라는 제목은 책을 고르는 관심 정도에 따라 "빠른 웹사이트를 구축하는 방법"으로 해석할 수도 있고 "웹사이트를 빠르게 구축하는 방법"으로 해석할 여지가 있습니다. 이 책은 "웹사이트 최적화 기법 - UI 개발자를 위한 필수 지침서"의 후속편이라고 할 수 있는 책으로 웹사이트의 속도를 향상시키는 프론트앤드 튜닝에 대한 내용입니다.

스티브 사우더스는 웹사이트 퍼포먼스부분에 대한 전문가로(전에 읽을때는 야후에 있었는데 구글로 이직을 했더군요.) 블로그를 통해서도 웹사이트 퍼포먼스 향상에 대한 많은 내용들을 공유하고 있습니다. 처음 책을 읽을때는 이전 책과 내용이 거의 중복되는게 아닐까 하는 걱정이 있었습니다만 그의 네임밸류대로 전작의 후속작답게 전작에서는 다루지 못했던 내용들을 더 심도있게 다뤘다는 생각입니다.

더욱이 이책은 스티브 사우더스외에도 각 분야의 전문가인 더글라스 크록포트, 벤 겔브레스등등이 각 챕터를 작성함으로써 내용이 정말 알찹니다. 웹사이트 퍼포먼스 튜닝을 할 때 이 2권의 책은 반드시 숙지를 해야할 내용들로 채워져 있습니다. 웹사이트의 속도향상을 위한 자바스크립트 기법들, 스크립트 블록킹을 막는 방법이나 개인적으로는 쉽게 테스트 할 수 없는 각 브라우저별로 어떤 스크립트를 썼을때 어떻게 반응하는지에 대한 표까지 제공하고 있어서 참고하기에 아주 좋습니다. Gzip을 사용했을때의 발생할 문제들이나 이미지 최적화, 도메인공유에 대한 심도깊은 내용들은 미처 알기 어려웠던 부분들에 대해서 자세하게 설명해 주고 있습니다. CSS 셀렉터가 우측에서 좌측으로 읽는다는 것은 이책을 통해서 처음 알게 된 내용이군요.

번역은 중간중간 약간씩 어색한 부분이 보이기는 하지만 전체적으로는 내용을 파악하기에 전혀 무리가 없습니다. 내용의 복잡함에 비해서 설명은 상당히 자세하게 되어 있기 때문에 난이도 자체가 어렵게 느껴지지는 않습니다. 아래는 이책에서 말하는 기법중 핵심부분만 정리한 내용으로 세부적인 적용을 하려면 해당 책을 참고하세요.

• 반응속도는 0.1초면 사용자는 직접 조작한다고 느끼고 1초정도까지는 자연스럽게 명령을 내리며 컴퓨터가 일을 한다고 느끼고 10초가 현재 작업에 열중할 수 있는 최대시간으로 작업진행상태를 퍼센트로 표시해 주어야 합니다.
• 스크립트를 블로킹없이 사용하기 위해서는 XHR Eval, XHR Injection, Iframe에 스크립트 넣기, 스크립트 DOM Element, 스크립트 Defer, document.write 스크립트 태그등의 방법이 있습니다.
• 비동기 방식으로 스크립트를 로드할때 순서를 보존하기 위해서는 하드 코딩된 콜백, Window Onload, Timer, 스크립트 Onload, 나쁜 스크립트 Tags(Degrading Script Tags)가 있습니다.(마지막은 번역이 좀 그렇네요. 나쁘다는 의미는 아닌것 같은데요.)
• 인라인 스크립트 바로 다음에 오는 스타일시트는 피해라.(혹은 그 반대)
• JS에서 전역식별자가 가장 비용이 비싸다.
• DOM을 속성값을 사용할때는 사용할때마다 DOM쿼리를 실행하기 때문에 변수에 저장하여 사용해야 한다.
• 최신 브라우저는 문자열을 최적화해주기 때문에 +대신 배열을 쓸경우 오히려 더 느린 경우도 많다. 아주 많은 경우가 아니면 +연산자를 사용하면 된다.
• 15%정도의 사용자가 GZip을 사용하지 못하는데 이 범인은 웹프록시와 PC보안소프트웨어이다.
• 이미지 최적화 툴을 통해서 이미지의 용량을 상당히 줄여줄 수 있다.
• 하나의 도메인으로 너무 많은 자원을 받아서 크리티컬 경로가 생긴다면 여러 도메인으로 나눠주는 도메인 공유를 통해 빠르게 할 수 있다.
• IE 6, 7나 파폭2는 HTTP1.0에서는 커넥션을 4개로 늘릴수 있기 때문에 상황에 따라 HTTP1.0으로 다운그래이드를 통해 속도를 빠르게 할 수 있다.
• 서버에서의 시간이 오래걸릴경우에는 큰용량의 스크립트나 CSS후에 Flush를 통해서 클라이언트가 빠르게 다운로드를 시작하게 할 수 있다.
• 아이프레임은 가장 큰 비용이 드는 DOM객체이며 아이프레임이 Onload이벤트를 지연시킬 수 있다.
• CSS 셀렉터는 오른쪽에서 왼쪽으로 읽어들이기 때문에 하위선택자가 구체적이지 않다면 성능에 문제를 일으킨다.

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

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

웹 사이트 최적화 기법 - 스티브 사우더스 지음, 박경훈 옮김/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 를 보냄)

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