서버가 아닌 웹브라우저(클라이언트)에 초점을 맞추어서 웹 사이트 성능 최적화에 사용할 수 있는 방법들을 제시한다. 그 내용이 간결하고 실질적이며 매력적이다.
책일 읽는 동안 자연스럽게 요즘 개발하고 있는 애플리케이션에 어떻게 적용해야 할까하는 숙제들이 쌓여갔다.
1. HTTP 요청을 최소화한다.(Make Fewer HTTP Requests)
자바스크립트 파일과 CSS 파일을 한 두개로 병합한다. CSS Sprites로 여러 이미지 파일도 하나로 병합할 수 있다.
2. CDN을 사용한다.(Use a Content Delivery Network)
사용자와 서버가 지역적으로 분산되어 있는 경우에 이미지, 자바스크립트, CSS 등의 정적인 파일들을 CDN에 복제하여 사용한다. 동적인 애플리케이션을 분산하는 것은 어려운 일이지만 정적인 파일들을 분산하는 것은 상대적으로 어렵지 않으며 효과도 크다.
3. Expires 해더를 설정한다.(Add an Expires Header)
이미지 뿐만 아니라 자바스크립트, CSS 등을 웹 브라우저 캐싱 기능으로 제어한다. 변경시에 이를 반영하는 효과적인 방안도 함께 강구한다.
4. Gzip 컴포넌트(Gzip Components)
텍스트 데이터는 모두 Gzip으로 압축한다. 서버 CPU 사용률이 증가하는 단점이 있지만 데이터 전송량을 줄이는데 가장 효과적이다.
5. 스타일쉬트는 위에 놓는다.(Put Stylesheets at the Top)
CSS 파일이 다운로드된 후 화면 구성이 된다. 따라서 화면이 점진적으로 나타나도록 하려면 CSS 파일이 내용(html)보다 먼저 다운로드되어야 한다. 표준에서도 link 태그는 head 태그에서만 사용할 수 있다.
6. 스크립트는 아래에 놓는다.(Put Scripts at the Bottom)
스크립트를 다운로드하는 동안에는 다른 파일 다운로드는 이루어지지 않는다. 따라서 화면 구성과 직접적으로 연관이 없는 스크립트는 맨 마지막에 위치시킨다.
7. CSS Expressions 사용을 지양한다.(Avoid CSS Expressions)
매력적인 기술이지만 UI 이벤트가 필터링되지 않기 때문에 매우 민감하게 반복적으로 반응한다. 결국 성능에 부정적인 영향을 야기하기 때문에 사용하지 않는다.
8. 자바스크립트와 CSS를 별도 파일로 분리한다.(Make Javascript and CSS External)
여러 화면에서 공유된다면 당연히 자바 스크립트와 CSS를 별도 파일로 분리한다.
9. DNS 찾기를 줄인다.(Reduce DNS Lookups)
도메인 이름을 최소화한다. 주요 웹 브라우저에서는 2개의 도메인을 사용할 때 최적화된 처리를 한다. 따라서 정적인 파일들은 처리하는 도메인을 별도로 분리하여 사용하는 것을 권장한다.
10. 자바스크립트를 최소화한다.(Minify Javascript)
여백을 제거하거나 로컬 변수명을 최소화해서 자바스크립트 파일 크기를 줄인다. 그 방법으로 Minification과 Obfuscation을 설명한다.
11. 리다이렉트 사용을 지양한다.(Avoid Redirects)
요청을 최소화한다는 측면에서 리다이렉트 사용을 지양한다. 리다이렉트에 대한 대안들을 설명한다.
12. 중복된 스크립트를 제거한다.(Remove Duplicate Scripts)
자바스크립트 뿐만 아니라 중복된 모든 것을 제거한다.
13. ETags를 사용하지 않는다.(Configure ETags)
클러스터링 환경에서 문제가 될 가능성이 다분하고 다른 대안이 있기 때문에 가급적 사용하지 않는다.
14. ....(Make Ajax Cacheable)
Ajax라고 크게 다르지 않다. 위에서 언급한 내용들을 그대로 준수한다.
이 책에서 제안하는 방법은 개발자보다는 시스템 엔지니어를 대상으로 한다. 따라서 적은 프로그램 수정 혹은 아파치나 IIS 등의 웹 서버 설정 변경만으로 위의 내용 대부분을 적용할 수 있을 것 같다.
No comments:
Post a Comment