파일 크기 최소화

파일의 개수를 줄여 HTTP 요청을 최소화했다면 웹 페이지 구성 요소의 크기를 어떻게 줄일지 알아보자.

Gzip 압축을 이용한 파일 크기 최소화

점점 커지는 자바스크립트 파일과 스타일시트 파일의 크기를 줄이는 가장 효과적이고 쉬운 방법은 파일을 압축하는 것이다. 아파치 웹 서버에서 파일을 압축하는 대표적인 인코딩 방식에는 Gzip과 deflate의 두 가지가 있는데, deflate 방식은 지원하지 않는 브라우저가 많고 효과도 떨어지기 때문에 대부분 Gzip 방식을 사용한다. Gzip 압축은 웹 서버에서 설정하는 방법[^16]이라 여기서는 Gzip으로 압축한 파일이 어떻게 전달되고, Gzip으로 압축했을 때 어떤 효과가 있는지만 살펴보겠다.

압축 전송 흐름 및 확인

압축 전송은 다음과 같은 순서로 진행된다. 클라이언트에서 some.js라는 파일을 만났을 때를 가정해 보자.

1. 클라이언트에서 헤더 정보로 인코딩 여부를 물어본다.

   Accept-Encoding: gzip, deflate

   

2. 서버에서 헤더 정보로 인코딩 여부를 알려준다. 인코딩된 요소라면 다음과 같이 응답이 온다.

   Content-Encoding: gzip

   

3. 클라이언트에서 인코딩된 요소를 받음과 동시에 압축을 해제한다. 이때 추가적인 CPU 연산 비용이 들어간다. 여기서 발생하는 CPU 연산 비용도 무시할 수 없기 때문에 압축할 파일과 크기를 잘 설정해야 한다. 보통 이미지 파일은 이미 압축돼 있기 때문에 압축하지 않고, 스타일시트 파일과 자바스크립트 파일을 압축한다. 그리고 파일 크기가 작으면 속도 개선 효과보다 CPU 연산 비용이 더 들기 때문에 파일 크기가 일정한 크기 이상인 경우에만 압축하는 것이 좋다. 스티브 사우더스의 “웹 사이트 최적화 기법(2008,ITC)”에 의하면 파일 크기가 1~2KB 이상일 때 압축할 것을 권장한다.

압축 전송의 효과

Gzip으로 압축해 전송하면 평균 70% 정도 파일 크기가 작아지는 효과를 볼 수 있다. 모바일 환경과 같이 네트워크 환경이 불안한 상황에서는 더욱 효과적인 기술일 것이다.

NHN의 자바스크립트 라이브러리인 Jindo 프레임워크(Jindo 2.1.0)로 간단한 테스트를 했다[^17]. 테스트 결과를 봤을 때 자바스크립트 파일의 최소화와 Gzip 압축을 함께 적용하면 상당히 많은 크기를 줄일 수 있을 것이다[^18].

표 2-1 Jindo 프레임워크의 Gzip 압축 테스트 결과

원본	497.47KB
최소화(공백 및 주석 제거)	170.03KB(65.82% 감소)
Gzip	41.86KB(62.13% 감소)

쿠키 크기 최소화

포털 사이트에서는 일반적인 웹 사이트에서보다 쿠키의 크기가 더 크다. 공통으로 사용하는 로그인 정보도 있고 개별 서비스가 전체 사이트와 공유하는 정보가 많아진다. 이때 필요한 정보를 저장하는 가장 손쉬운 방법이 최상위 도메인을 이용해 쿠키를 설정하는 것이기 때문이다. 이렇게 되면 자바스크립트 파일이나 스타일시트 파일, 이미지 등 쿠키 정보가 필요 없는 구성 요소를 요청할 때도 헤더 정보에 쿠키가 포함된다. 즉, 헤더를 전송할 때 데이터 크기가 커진다.

사실 쿠키의 크기는 성능 관점에서 우선순위가 낮은 편이지만 쿠키를 지속적으로 관리하지 않으면 성능에 영향을 미칠 수 있다. 쿠키의 크기를 줄이는 기본적인 방법은 다음과 같다.

• 지속적인 관리로, 사용하지 않는 쿠키는 삭제한다.
• 쿠키를 설정할 때 최상위 도메인은 되도록 사용하지 않는다.
• 쿠키의 만료 날짜를 최대한 짧게(사용할 만큼만) 설정한다.
• 쿠키 정보가 필요 없는 이미지, 스타일시트, 자바스크립트 파일은 별도의 도메인으로 서비스한다(예: .naver.com이 아니라 .naver.net으로 서비스). 최상위 도메인이 같지 않으면 쿠키 정보는 공유되지 않는 점을 활용한 방법이다.

다음 그림은 네이버 오픈캐스트에 있는 섬네일 이미지의 헤더 정보를 분석한 내용이다. 이미지를 요청한 사이트의 최상위 도메인(.naver.com)과 섬네일을 제공하는 사이트의 최상위 도메인(.naver.net)이 서로 다르다. 따라서 쿠키 정보가 없다.

최적화가 비교적 잘돼 있는 사이트에서 속도를 줄이기란 쉬운 일이 아니다. 쿠키 크기를 줄이는 것이 사소하게 느껴지지만 요청 헤더 크기가 하나 둘 커지다 보면 전체적으로 느려질 수 있다. 그렇기 때문에 쿠키 크기도 관심을 두고 관리해야 한다.

[^16]: 아파치 웹 서버에서 Gzip 압축 전송을 설정하는 방법은 http://httpd.apache.org/docs/2.2/ko/mod/mod_deflate.html 문서를 참조한다. Gzip 압축 전송을 적용할 파일 형식을 지정할 수 있고 대상 브라우저를 선택할 수 있다.

[^17]: 테스트에 사용한 도구는 Closure Compiler(http://closure-compiler.appspot.com/home)이고, 테스트 옵션은 Whitespace Only로 설정했다.

[^18]: 압축 전송의 성능은 브라우저별로 다를 수 있다. http://www.vervestudios.co/projects/compression-tests/results에서는 브라우저별로 압축 전송을 테스트한 내용을 볼 수 있다.