[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 셀렉터는 오른쪽에서 왼쪽으로 읽어들이기 때문에 하위선택자가 구체적이지 않다면 성능에 문제를 일으킨다.