ITC에서 나온 웹 사이트 최적화 기법에서는 다음과 같이 14가지 기법을 언급하고 있습니다. - HTTP 요청을 줄여라 - 콘텐츠 전송 네트워크를 이용하라 - 헤더에 만료기한을 추가하라 - Gzip 컴포넌트 - 스타일시트를 위에 넣어라 - 스크립트를 아래에 넣어라 - CSS expression을 피해라 - 자바스크립트와 CSS를 외부파일에 넣어라 - DNS 조회를 줄여라 - 자바스크립트를 최소화하라 - 리다이렉트를 피하라 - 중복되는 스크립트를 제거하라 - ETag를 설정하라 - 캐시를 지원하는 Ajax 만들기
이중에서 서버 세팅과 관련성이 적고, 에디트플러스만으로도 비교적 쉽게 할 수 있는 몇가지를 언급해보겠습니다. 전체적인 내용을 찾고 싶으면 포털 사이트에서 책 제목으로 검색하시면 됩니다.
CSS, JS 파일을 사용하자 이렇게 파일을 쪼개는 것은 언뜻 보면 1번 기법 "HTTP 요청을 줄여라"에 위배되는 것처럼 보입니다. 하지만 css와 js
파일은 캐쉬가 되기 때문에 잘 변하지 않는 css와 js 파일을 이용자 컴퓨터에서 매번 받아오지 않게 함으로써 속도를 올릴 수
있습니다.
CSS 파일은 head에 넣자. ＜link rel="stylesheet" href="/style.css" type="text/css" /＞ 보통 이런식으로 head 태그 안에 넣는데요, 종종 이것을 본문에 넣는 경우가 있습니다. 브라우저에서 스타일시트의 구조를 분석하고 정리한 다음에 문서를 그리는 작업(렌더링)을 시작하는 것이 더 효율적이기 때문에 가능한 css 파일은 head에서 로딩되도록 하는 것이 좋습니다.
JS 파일은 tail에 넣자. 특히 <script src="...." type="text/javascript"></script> 이런
식으로 스크립트를 불러오는 경우라면 더더욱 문서 뒤로 넣어야 합니다. 첫머리에 js파일을 불러들이는 스크립트가 있다면, 그
스크립트를 불러들인 뒤에야 이어지는 문서 내용을 렌더링할 수 있기 때문입니다. 문서를 모두 그려준 후에 스크립트를 불러들이는
것이 로딩 속도가 당연히 빠르겠죠?