웹사이트 최적화 #1. 요청횟수 줄이기

앞으로 오픈베타까지 5일 남았다.
그동안 반 미친듯이 코드만 짜다가, 요즘은 막바지라 한결 여유를 찾은듯하다.
어제부터 코드 프리징을 위한 막바지 최적화 작업에 들어가고 있다.

오늘은 여유롭게, 그동안 못한 블로깅을 하면서, 얘들은 먼 얘기를 하고 있을까..
검색을 좀 해봤다. ㅎㅎ
많은 사람들이 기대반 우려반, 그리고 일단 까고보자 반, 아무생각없다 반인거 같다. ㅎㅎ
머 결국 어느정도 관심은 있다 정도로 정리가 되는군.
머 일단, 각설하고…

개편되는 메인페이지 로딩속도를 최적화하기 위해 고민한 것들을 공유해본다.

사용자에게 있어서 첫 페이지 로딩속도는 굉장히 크리티컬한 요소다.
그렇기 때문에 최적화 작업을 하면서, 가장 신경썼던 부분이 바로 요청회수 줄이기였다,

클라이언트 영역에서 요청횟수를 줄일수 있는 방법은 3가지로 볼수있겠다.
외부링크로 걸려있는 css 파일 갯수 줄이기..
외부링크로 걸려있는 js 파일 갯수 줄이기..
그리고, 이미지 갯수 줄이기..

하지만, 실상 요청횟수 줄이기가 만만치는 않았다.
특히, 이미지가 주가 되는 대부분의 포탈이나 웹사이트의 경우는 정말 불가항력에 가깝지 않을까?

그래도 뭐 어떻게든 요청횟수를 줄이기위해, CSS Sprite도 적용했지만, 접근성 문제로 인해,
전면적으로 CSS Sprite을 적용할수는 없었다.
“CSS Sprite은 의미없는 배경 이미지에만 적용할 것을 권한다.”
CSS Sprite은 검색을 해보면, 아마도 구글 코리아 메인 페이지의 애니메이션 효과를 예제로 들고 있는 글들을 쉽게 접할수 있다. 바로 구글 코리아가 적용한 애니메이션 효과가 대표적인 의미없는 배경이미지가 되겠다.
 
여기엔 단순히 접근성 문제만은 아니고, 대부분 캐시 서버에 이미지를 올려놓기때문에, 운영이슈도 함께 고려되어야한다. 이미지에 수정사항이 생기면, 전체 그리드 이미지를 새로 업로드하고, 경로를 수정해줘야한다. 안그럼 캐시된 사용자의 브라우저에선 제대로된 이미지를 볼수없을테니 말이다. 이럴때마다, 정말 구글과 같은 텍스트 기반의 웹사이트들이 어찌나 부럽뜬지..ㅎㅎ
그러나 , 여기는 한국이고, 구글이 우리회사도 아니다! ㅎㅎ

한편 모듈별로 작업하면서 크고작은 최종 js 파일의 갯수는 총 20개나 됐다.
물론, 배포툴을 이용해 파일을 2개로 합쳤고, 압축을 하지 않았을 경우, 대략 200KB 정도의 크기였다.  그리고 압축을하고, 아파치 gzip 모듈을 적용하면, 대략 40KB 정도의 크기가 나왔다.
요청횟수는 1/10로 줄였고, 파일크기는 대략 1/5 정도로 줄였다.

과연 이렇게 최적화한 결과는 어떠했을까?
FF3 의 FireBug 를 통해서, 대략적인 로딩 시간을 비교해봤다.

[그림으로 넣으려고 했으나.. 귀찮아서 생략하고 대략의 결과는 다음에…ㅋㅋㅋ]