Chapter 01. HTTP 요청을 줄여라.
1. 이미지 맵(Image map).
이미지 맵 을 이용하면 웹 페이지 UI 변경 없이 HTTP 요청 수를 줄일 수 있다. 그 이유는 한 개의 이미지로 여러 개의 URL 을 연결 할 수 있기 때문이다. 이미지 맵을 사용하면 장점으로는 보통 50% 빠른 속도를 보이는데, 단점으로는 클라이언트 측 맵으로 코드를 작성 할 경우 맵의 영역 좌표를 수동으로 하는 경우 지루하고 실수하기 쉽다. 그리고 네모가 아닌 다른 모양을 만드는 것을 거의 불가능하며 연속적인 이미지여야 하는 안 좋은 점이 있다.
2. CSS Sprite.
CSS Sprite 는 이미지 맵처럼 여러 이미지를 결합할 수 있지만 이미지 맵보다 훨씬 유연하다. 보통 CSS 의 background-position 속성을 이용해서 배경으로 사용할 부분을 잘라서 위치시킨다. 역시 분리된 이미지를 사용할 때보다 50% 빠르고 다운로드 크기가 줄어들 수 있으며(합쳐진 이미지가 컬러테이블이나 포맷정보를 하나로 가지고 있기 때문), 이미지 맵처럼 연속적인 이미지여야 한다는 제약사항도 없는 장점이 있다.
3. 인라인이미지.
data:라는 URL 스키마를 이용함으로써 어떤 추가적인 HTTP 요청 없이 웹 페이지 안에 이미지를 포함할 수 있다. data:[<mediatype>][;base64],<data> 처럼 데이터를 첨부할 수 있으며 SCRIPT나 A 태그와 같이 URL을 지정하는 모든 곳에 사용할 수 있다. 단점은 IE 지원이 안된다는 것과 크기에 제한이 있고 base64로 인코딩을 하게 되면 이미지 크기가 커진다.
data:를 사용하는 좋은 방법으로는 CSS를 이용해서 배경으로 인라인 이미지를 사용하는 것이다.
4. 스크립트와 스타일시트의 결합.
가장 이상적인 상황은 각 페이지에 하나의 스크립트와 한 개의 스타일시트가 있는 것이다. 그러나 현실은 모듈 방식의 코드를 사용하기 때문에 자바스크립트 파일을 모듈화하여 여러 파일로 나누어 놓되 이렇게 모듈화된 스크립트 파일을 사용하는 페이지에 맞게 재구성하는 빌드 과정을 두는 것이다.