웹 사이트 최적화 기법: UI 개발자를 위한 필수 지침서저자 : 스티브 사우더스
역자 : 박경훈
출판사 : 아이티씨
본 포스트는 위에 소개된 도서에 대한 요약과 개인적인 의견(?), 도서에 수록되어 있지 않은 기타 정보를 나름대로 정리한 것입니다.
더 자세한 내용을 보고 싶으신 분들은 도서를 구매하셔서 읽어보시는게 좋을것 같습니다.
절대 도서 홍보가 아닙니다. 좋은 내용이 담겨져 있는 도서라 추천하는것 뿐입니다.
저는 개인적으로 실버라이트 세미나에 참석했다가 경품추첨에서 본 도서를 받았습니다. ㅋㅋ
제 평생 경품추첨에 처음 당첨되어 봤습니다. ㅠㅠ
참고로 숨겨져 있는 내용들은 저의 개인적인 생각이나 의견이라 올바르지 않은 정보일 수도 있습니다.
참고만하시길 바라며 혹시 저의 생각이나 의견이 잘못되었을 경우에는 댓글을 남겨 주시면 바로잡도록 하겠습니다.
자, 그럼 들어갑니다. ^^
0. 앞단 성능의 중요성.
HTML문서를 받는 시간은 10~20%, 나머지 80~90%는 페이지 안의 구성요소를 다운받는데 소비된다.
이 나머지 시간을 줄일 수 있는 방법을 찾아본다.
1. HTTP 요청을 줄여라.
HTTP요청을 줄이는 기술로는 이미지맵, CSS Sprite, 인라인 이미지, 스크립트와 스타일시트를 하나로 합치는 기술이 있다.
2. 콘텐츠 전송 네트워크를 이용하라.
3. 헤더에 만료기간을 추가하라.
만료기간을 추가함으로써 조건부 get 요청을 하여 304응답을 받는 시간(불필요한 HTTP 요청 시간)도 절약 할 수 있다.
웹서버의 Expires 속성을 활용, 하지만 서버와 클라이언트의 시간을 맞추어서 이용해야만 하는 문제점이 발생한다.
cache-control의 max-age 속성을 이용하면 극복 가능하지만 cache-control은 HTTP 1.0이 지원하지 못하므로
cache-control의 max-age와 Expires를 모두 활용하는게 좋다. 둘 다 있을경우 cache-control이 우선한다.
이미지, js, css, flash등에 활용할 수 있다.
이미지, js, css, flash등 콘텐츠가 수정될 경우에는 파일명을 활용하여 변경할 수 있으며 파일명은 서버사이드 프로그램에서 변수를
활용하여 관리할 수 있다.
4. Gzip 컴포넌트.
압축을 통해서 응답시간을 줄일 수 있다. 대부분의 브라우저는 deflate, gzip 둘다 지원하지만 gzip만 지원하는 브라우저도 있어
gzip을 선호하게 되는것이다.
5. 스타일시트는 위에 넣어라.
스타일시트는 LINK 태그를 이용하여 문서의 HEAD 영역에 넣어야 한다.
스타일시트가 하단에 있을 경우 브라우저의 점진적인 렌더링을 못하게 한다.
즉 브라우저는 스타일이 변경되었을 경우에 다시 그려야 하는 점을 피하기 위해 렌더링을 멈추고 기다린다.
6. 스크립트는 아래에 넣어라.
다른 요소들은 클라이언트 설정에 따라 동시 다운로드가 진행되지만 스크립트가 다운로드 되는 동안에는 동시 다운로드가 불가능하다.
브라우저는 다른 호스트 이름이라도 추가적인 다운로드를 허용하지 않는다.
이렇게 동작하는 이유 중 하나는 스크립트가 document.write를 이용할 수도 있기 때문이다.
document.write를 이용할 경우 페이지에 적절하게 쓰여졌는지 확인하기 위해서 브라우저는 기다린다.
또 다른 이유는 적당한 순서로 스크립트가 실행될 수 있게 하기 위해서이다.
여러개의 스크립트가 동시에 다운로드된다면 스크립트가 지정된 순서대로 다운로드 된다는 보장이 없다
이럴경우 스크립트 에러가 발생할 확률이 높아진다.
스크립트가 상단에 있을 경우 동시다운로드가 막히게 되므로 스크립트를 다운로드 하는 동안 사용자는 빈 흰색 화면을 보면서 기다리게 된다.
7. CSS Expression을 피하라.
CSS Expression은 IE5와 그 이후 버전에서 지원된다. Expression의 문제점은 예상하는것보다 너무 많이 실행된다는것이다.
8. 자바스크립트와 CSS를 외부파일에 넣어라.
자바스크립트와 CSS를 외부 파일로 만드는 것보다 인라인으로 페이지 안에 첨부하는것이 더 빠르다.
하지만 자바스크립트와 CSS가 외부파일로 만들어져 있고 이것들이 캐쉬되었을때는 상황이 달라진다.
9. DNS 조회를 줄여라.
도메인수를 줄여 DNS조회 요청 횟수를 줄여야한다.
그러나 도메인수를 줄이면 동시 다운로드 되는 요소도 줄어들어 응답시간이 늘어날 수 있다.
10. 자바스크립트를 최소화 하라.
최소화는 코드의 불필요한 문자를 줄여서 파일 크기를 줄여 로딩 시간을 개선하는 것이다.
Gzip를 이용하여 크기를 줄일 수 있고
CSS도 동일한 클래스를 합치고 사용하지 않는 클래스를 삭제하는 등의 작업을 통하여 크기를 줄일 수 있다.
11. 리다이렉트를 피하라.
리다이렉트는 HTML문서 자체의 다운로드를 지연시키기 때문에 가장 안 좋다고 할 수 있다.
주소뒤에 슬래시(/)를 빼지 않도록 주의해야 한다.
웹사이트 로그를 확인해 보면 301 상태 코드가 얼마나 많이 내려갔는지 확인할 수 있고 이것을 보고 해결해야 한다.
내부트래픽을 조사하기 위해서 리다이렉트를 하는 경우가 많은데 이런경우는 웹로그에서 refer를 확인하여 대체할 수 있다.
http://www.abc.com은 http://www.abc.com/ 으로 리다이렉트가 되지 않지만
http://www.abc.com/def 은 http://www.abc.com/def/ 로 리다이렉트 된다.
12. 중복되는 스크립트를 제거하라
중복된 스크립트가 성능에 악영향을 주는 두가지 경우가 있다. 불필요한 HTTP 요청이 생긴다는것과 자바스크립트 실행이 낭비된다는것이다.
13. ETag를 설정하라.
ETag (Entity Tag)는 웹 서버와 브라우저가 캐시된 구성요소의 유효성을 확인하기 위해서 사용하는 메커니즘이다.
브라우저의 캐시에 저장되어 있는 구성요소와 원본 서버의 구성요소가 일치하는지 판단하는 방법중에 하나이다.
그런데 ETag의 문제는 서버가 여러대일때 발생할 수 있다.
ETag는 각 호스트마다 유일한 값으로 생성 되므로 호스트서버가 여러대이면 같은 파일인데도 ETag는 다를 수있다는 것이다.
그러므로 ETag의 구조를 변경하여 동일하게 하거나 삭제하여야 한다.
Expires(If-Modified-Since) 보다 ETag(If-None-Match)가 우선한다.
14. 캐시를 지원하는 Ajax 만들기