JSPWiki: EvenFaster

성능은 웹사이트의 성공에 있어서 굉장히 중요한 척도이며 오늘날의 웹 애플리케이션들은 Ajax와 같은 기술을 활용하여 굉장히 풍부한 내용들을 브라우저에 표현하고 있다. 이 책에서는 구글의 웹 성능 전도사이자 이전 야후 성능의 최고 권위자였던 저자 스티브 사우더스의 경험을 토대로 한 웹사이트의 성능을 최적화하는 다양한 기술들을 전달하고 있다.

사우더스의 이전 도서인 『웹사이트 최적화 기법』(High Performance Web Sites)”은 당시 최고의 베스트셀러였으며 웹 개발에 있어서 바로 클라이언트 단의 로드 속도가 웹 성능에서 80%나 된다는 이야기를 통하여 굉장한 충격을 주기도 하였다. 이번 도서인 『초고속 웹사이트 구축』에서 사우더스는 8명의 전문가와 함께 실용적인 최고의 팁들을 제공하고 있다. 이 책에서 다루는 내용 중 주요한 내용 세 가지는 다음과 같이 나누어 볼 수 있다.

자바스크립트 : Ajax 성능을 이해, 효율적인 자바스크립트 작성방법, 즉각 반응하는 웹 애플리케이션, 다른 구성요소의 방해 없이 로딩되는 스크립트들 등과 같은 여러 조언들을 들을 수 있다.

네트워크 : 여러 도메인을 통하여 리소스들을 공유하는 방법, 퀄리티의 손실 없이 이미지 크기를 줄이는 방법, 청크 인코딩을 통하여 더 빠르게 렌더링하는 방법들에 대해서 살펴본다.

브라우저 : IFrame의 대안, CSS 선택자를 어떻게 간단히 이용할 것인가 등과 같은 다양한 내용을 살펴본다.

오늘날의 웹 2.0 기반의 웹사이트와 또한 풍부한 미디어를 제공하는 웹사이트에 있어서 속도는 필수적인 기술이다. 이 책을 통하여 웹사이트의 속도를 어떻게 낮출 수 있고 또한 더 빠르게 반응하기 위한 내용들을 배울 수 있을 것이다.

“ 『초고속 웹 사이트 구축』은 현대 웹사이트의 노하우들이 담겨 있으며 어떻게 웹사이트를 튜닝할 수 있는지에 대한 지혜를 다루고 있다. 나는 이 책과 같은 형식을 좋아한다. 굉장히 많은 주제를 다루고 있고 그 내용에 대한 주제가 다른 분야의 저자들보다 아주 깊기 때문이다. 나는 이 책을 나의 팀원 모두에게 돌릴 것이다.”
- 빌 스콧(넷플릭스 UI 엔지니어링 팀장)

스티브 사우더스(Steve Souders)

구글(Google)에서 웹 성능과 오픈 소스를 주도하는 일을 하고 있다. 그의 도서 『웹 성능 최적화 기법』(High Performance Web Sites)과 『초고속 웹 사이트 구축』(Even Faster Web Sites)을 통하여 실무에서 연구한 성능관련 최상의 팁을 전달하고 있다. 스티브는 백만 다운로드 이상을 기록한 파이어버그(FireBug)의 확장 툴인 YSlow의 제작자이다. 그는 오라일리(O’Reilly)와 파이어버그의 설립 그룹이 같이 스폰한 컨퍼런스를 통하여 웹 성능과 속도에 대한 지식을 전달하였다. 또한 스티브는 스탠포드 대학교에서 CS193H라는 과목을 강의하였다. 이 강의 내용은 OSCON, SXSW, 웹 2.0 엑스포, Ajax의 경험과 같은 내용들이 다루어졌다.
스티브는 이전에 야후에서 야후 성능 조언자로 근무하였으며 야후의 개발자 센터라는 커뮤니티에서 웹 성능과 관련된 내용을 게재해 왔었고 야후의 슈퍼스타로 불려지기도 했다. 스티브는 또한 야후의 My Yahoo팀을 위해서 다양한 플랫폼과 제품 기반에서 많은 일들을 진행해왔다. 야후 이전에 스티브는 다양한 헬릭스 시스템(Helix Systems)과 쿨싱크(CoolSync)와 같은 작은 벤처에서 일한 적이 있고 후웨어(WhoWhere)와 라이코스(Lycos)라는 그룹에서 일한 경험도 있다.
80년대 초에 스티브는 인공지능 버그를 잡은 적이 있고 출판과 컨퍼런스를 포함하여 기계 학습과 관련된 일을 하는 몇 개의 회사에서 일했었다. 그는 버지니아 대학교에서부터 시스템 엔지니어링 석사 학위를 마쳤으며 스탠포드 대학교에서 엔지니어링 과학에 대한 석사학위를 받았다.
스티브의 관심사는 다양하다. 그는 NBA와 WNBA 플레이어와 농구를 하고는 했으며 유니버셜 스튜디오 인터넷 태스크 포스(Universal Studios Internet Task Force)의 멤버이기도 하였다. 그리고 기네스 월드 레코드(Guinness world record)에 참여한 적이 있으며 90년 된 집을 다시 짓기도 하였다. 그는 최고의 와이프와 세 명의 딸을 가지고 있다.

박경훈

닷넷개발자라면 누구나 알고 있는 HOONS닷넷 사이트를 2002년도부터 장수시켜 왔으며 크고 작은 여러 세미나들을 기획하고 진행해 오면서 행사 제조기로 활동하고 있다.
10권 이상의 IT기술 도서를 집필및 번역해 왔고, KBS와 코리아 해럴드등 다양한 미디어에서 조명을 받으며 미래의 젊은 주역으로 선정된 바 있다.
지금은 닷넷 프리랜서로 또 라디오 극동방송의 테마CCM 진행자로 활동하면서 미래의 꿈과 현실 사이의 갭을 줄이려 노력하고 있다.

신형철

2000년부터 SW 개발에 몸담아 왔으며 Microsoft MVP, 데브피아 시샵 등의 활동을 했으며 현재는 다음커뮤니케이션에서 모바일 애플리케이션 개발에 매진하고 있다.

박경훈

시간이 지나면서 웹은 더욱더 똑똑해져 가고 있고 사용자의 눈높이는 더욱더 높아져만 가고 있다. 때문에 개발자들은 보다 페이지를 가볍고 빠르게 만들어야 하고 그만큼 더욱 더 풍부하고 다양한 기능들을 제공해야만 하는 것이 현실이다. 즉, 웹의 기능은 더욱 더 서버 단에서 UI 단으로 옮겨져 가고 있으며 미래에는 지금보다 더 많은 시간을 할애해야 할 것이다. 회사에서 그 회사 제품을 팔지 못하면 경쟁력을 잃게 되듯이 개발자 또한 자신의 기술을 회사에 팔지 못한다면 경쟁력을 잃게 된다. 하지만 여기서 중요한 것은 회사의 제품보다 개발자의 경쟁력을 잃게 되는 속도가 훨씬 더 빠르다는 것이다. 이렇게 변해가고 있는 IT 트랜드 속에서 스티브 사우더스의 경험이 고스란히 녹아있는 이 도서는 개발자의 경쟁력에 있어서 더할 나위 없이 소중한 도서라 생각한다.
이 도서를 번역하면서 무엇보다도 책의 깊이와 규모에서 큰 감명을 받았다. 그만큼 실무에서 쌓은 경험을 조목조목 전달하는 사우더스 내공에 칭찬을 아끼지 않는 바이다. 또한 이런 책이 국내에 출시될 수 있다는 것과 첫 번째 도서에 이어서 이렇게 두 번째 책을 번역할 수 있었던 것 또한 큰 영광이라 생각한다.
어쨌든 번역이라는 이 작은 노력을 통하여 많은 개발자들에게 조금이라도 보탬이 되었으면 하는 바람이다.

신형철

본 책의 전판인 『웹사이트 최적화 기법』의 한국어 판이 나온 지 이제 벌써 2년이 다 되어 가고 있다. 그 동안 웹은 Ajax, HTML5 등 끊임 없는 발전을 이루어 왔고 기존의 데스크톱 애플리케이션의 영역은 물론 이제 모바일까지 영역을 넓혀 가고 있다. 이젠 웹만으로도 기존의 컴퓨터로 하던 작업을 모두 할 수도 있을 정도며 웹 OS까지도 나오는 상태이다.
이렇게 날이 갈수록 중요해지고 화려해 는 웹을 사용자들이 더 편하고 빠르게 사용할 수 있도록 하는 것이 바로 우리 프론트엔드(Front-end) 엔지니어들에게 주어진 임무이다. 이 책의 전판을 통해 소개 된 많은 기법들에 이어 이 책에서 소개하는 기법들을 활용함으로써 더욱 더 빠르고 사용자들에게 편리한 웹사이트들이 더욱 더 많이 나올 수 있을 것이라 기대한다. 해외는 물론 국내 주요 포털들에서도 활용되고 있는 이 기법들을 통해 독자 여러분의 개발 하는 웹이 한 단계 업그레이드될 수 있었으면 하는 바람이다.

01장 Ajax의 성능 제대로 이해하기

Trade-offs: 얻는 것이 있으면 잃는 것이 있다
최적화의 원칙
Ajax
브라우저
Wow!(우와!, olleh?)
JavaScript
요약

02장 빠른 웹 응용프로그램 만들기

그럼 대체 얼마나 빨라야 빠른 것일까?
지연 시간 측정
– 지연 시간이 길어져 문제가 될 때
스레드 사용
빠른 응답 속도를 보장하는 방법
– Web Workers
– Gears
– 타이머
– 메모리 사용이 응답 시간에 미치는 영향
– 가상 메모리
– 메모리 문제 해결하기
요약

03장 초반 다운로드를 분산시키기

그 외 모든 것들
쪼갬으로 인해 얻는 이득
어디를 쪼개면 될까
미정의 심볼과 경쟁 상태
사례 연구: Google 캘린더

04장 블로킹 없이 스크립트 로드하기

스크립트 블록
스크립트를 사이좋게 만드는 방법
– XHR Eval
– XHR Injection
– Iframe 안의 스크립트
– 스크립트 DOM Element
– 스크립트 지연
– document.write 스크립트 태그
브라우저의 작업 중 표시
순서대로 실행되도록(또는 실행되지 않도록) 하기
지금까지의 결과를 정리해보면
그럼 최종 승자는?

05장 비동기 스크립트와 결합시키기

코드 예제: menu.js
경쟁 상태
비동기 방식으로 순서 보존하기
– 제1 기법: 하드 코딩된 콜백
– 제2기법: Window Onload
– 제3기법: 타이머
– 제4 기법: 스크립트 Onload
– 제5 기법: 나쁜 스크립트 Tags
여러 외부 스크립트
– 관리 XHR
– DOM Element와 Doc Write
일반적인 해결책
– 단일 스크립트
– 복수의 스크립트
비동기 로딩의 실제 사용 예
– Google Analytics와 Dojo
– YUI Loader 도구

06장 인라인 스크립트를 올바르게 배치하기

인라인 스크립트는 블로킹한다
– 인라인 스크립트를 맨 밑으로 옮겨라
– 스크립트의 실행을 비동기적으로 시작하라
– 스크립트 지연 사용하기
CSS와 자바스크립트의 순서 보존하기
위험: 인라인 스크립트 바로 다음에 오는 스타일시트
– 인라인 스크립트가 블로킹되는 경우는 거의 없다
– 인라인 스크립트는 스타일시트로 인해 블로킹된다
– 실제로도 일어난다

07장 효율적인 자바스크립트 작성

유효 범위 관리
– 지역 변수 사용하기
– 유효 범위 체인의 증가
효율적인 데이터 접근
실행 경로 제어
– 빠른 조건문
– 빠른 반복문
문자열 최적화
– 문자열의 연결
– 문자열들의 공백 제거
오랜 시간 동작되는 스크립트를 피하라
– 타이머를 이용하여 유연하게 만들기
– 유연한 작업을 위한 타이머의 패턴
요약

08장 코멧을 이용한 확장

코멧 구현하기
전송기술
– 폴링
– 롱 폴링
– 포에버 프레임
– XHR 스트리밍
– 미래의 전송기술
크로스 도메인
추가적인 고려사항
– 커넥션 관리
– 성능 측정
– 프로토콜
요약

09장 Gzip을 넘어서

무엇이 문제인가?
원인은 무엇인가?
– 빠른 검토
– 범인
– 범인의 실체
이러한 사용자를 어떻게 도울 수 있을까?
– 압축되지 않은 크기의 최소화
– 사용자를 가르쳐라
– Gzip 지원의 직접적인 감지

10장 이미지의 최적화

이미지 최적화를 단순화하기 위한 두 단계
이미지 포맷들
– 배경지식
– 이미지 타입들의 특징
– PNG에 대해서
자동화된 무손실의 이미지 최적화
– PNG 크러싱
– JPEG의 메타데이터 제거
– GIF에서 PNG로 변환하기
– GIF 애니메이션의 최적화
– Smush.it
– 큰 이미지를 위한 JPEG의 로딩기능
알파 투명: AlphaImageLoader를 피해라
– 알파 투명의 효과
– AlphaImageLoader
– AlphaImageLoader의 문제
– 단계적인 PNG8의 알파 투명도
자르기(Sprite)의 최적화
– 사용자 스프라이트와 모듈 스프라이트와의 비교
– CSS 스프라이트의 최적화
다른 이미지의 최적화
– 확장 가능한 이미지를 피해라
– 애플리케이션에서 생성된 이미지들
– 파비콘
– 애플 터치 아이콘
요약

11장 도메인의 공유

크리티컬 경로
도메인 공유는 무엇인가?
HTTP/1.0의 다운로드
도메인 공유의 동작
– IP주소와 호스트이름
– 도메인의 개수
– 리소스를 어떻게 나누어야 하는가?
– 새로운 브라우저들

12장 플러쉬를 통해서 문서 먼저 내리기

헤더의 플러쉬
출력 버퍼링
청크 인코딩
Flush와 Gzip
다른 중개자들
플러쉬 동작 중 발생되는 도메인 블로킹
브라우저: 마지막 장애물
PHP 외의 플러쉬 작업
플러쉬 체크리스트

13장 아이프레임의 자제

가장 비싼 DOM 개체
Onload 이벤트를 지연시키는 아이프레임
아이프레임과 동시 다운로드
– 아이프레임 이전의 스크립트
– 스타일시트 앞에 있는 아이프레임
– 스타일시트 뒤에 있는 아이프레임
호스트이름에 할당되는 커넥션
– 아이프레임 안에서의 커넥션 공유
– 새 창과 탭을 통한 커넥션 공유
아이프레임의 비용에 대한 요약

14장 CSS 선택자의 단순화

선택자의 타입
– ID 선택자
– 클래스 선택자
– 타입 선택자
– 이웃 선택자
– 자식 선택자
– 하위 선택자
– 전체 선택자
– 속성 선택자
– 유사 클래스 선택자
CSS 선택자의 효율적인 사용
– 오른쪽 먼저
– 효율적인 CSS 선택자의 사용
CSS 선택자의 성능
– 복잡한 선택자의 성능 이슈
– 피해야 하는 CSS 선택자
– 리플로우 시간
실 사이트에서의 CSS 선택자

부록 성능 관리 도구

패킷 분석 도구
– HttpWatch
– 파이어버그 넷 패널
– AOL 페이지테스트
– VRTA
– IBM 페이지 디테일러
– Web Inspector 리소스 패널
– 피들러
– 찰스
– 와이어샤크
웹 개발 도구
– 파이어버그
– Web Inspector
– 인터넷 익스플로러 디벨로퍼 툴바
성능 분석 도구
– YSlow
– AOL 페이지테스트
– VRTA
– neXpert
기타 도구들
– 햄머헤드
– Smush.it
– Cuzillion
– UA 프로파일러