AJAX page의 로딩시간 최적화 방법

AJAX page들의 로딩이 조금 답답한듯해서 한두가지 확인해 봤다. javascript를 상당히 많이 사용한 allblog의 경우에 대해 점검을 해 보았는데, 일단 javascript를 켜고 로딩했을때 4초 가량, 그리고 때에 따라서 10초 이상 걸리고, 끄고 로딩했을때 0.5~0.7초 정도이다. 최소 8배.. 상황 안좋을때는 수십배가 더 걸리는 셈이다.

javascript를 켰을때 추가로 걸리는 시간은,

1. javascript 프레임원 자체를 다운로드하는 시간
2. javascript 프레임웍을 파싱하는데 걸리는 시간
3. javascript 실행에 걸리는 시간
4. javascript를 껐을때 안보이는 오른쪽 아래 영역을 로딩하는 시간(AJAX contents)

정도로 구분할 수 있을듯 하다. 테스트 코드를 삽입할 수 없어서 구간별로 잘라서 확인은 못해봤지만, javascript를 켰을때나 껐을때나, 전송 시간은 거의 차이 없을 듯하다. 실제 전송된 data양은 javascript 켰을때와 껐을때 590K와 360K이므로, 껐을때의 전체 0.7초에서 전송이 60%를 차지한다고 해도, 360K에 0.42초가 걸리는 셈이고, 전체 전송받을양이 두배가 안되므로 전송시간 0.84초(넉넉하게 두배), rendering 하는떼 소모되었을 시간인, 0.7에서 0.42를 뺀 0.28을 더하면, 1.12. javascript와 오른쪽 아래 부분까지 모두다 전송받고 rendering한다 해도 1.12초이상 걸리진 않을 것이다.(참고로 위의 test는 browser cache를 clear하고 한 것임). 그리고 network의 상태에 따라서도 다른 결과가 나온다.

모두다 해야 하는 작업은 맞지만, 사용자가 답답해 하지 않게 하기 위해서 뒤로 뺄수 있는 작업들이 대부분인 듯하다.

적용 가능한 기법은

1. javascript initiation을 document.onload event를 받고 시작하도록(dojo의 home page가 부분적으로 이렇게 구성되어 있음- dojo.addOnLoad()에 실제 작업을 밀어 넣어둠.. ) - 이 방법을 적용하면, 3,4 번을 화면에 page가 보이는 상태에서 진행할 수 있음
2. script tag를 dynamic하게 추가해서 web page loading이 끝난후 script file들을 loading하도록 함. 이경우 evaluation order가 어떻게 될지 애매하긴 하지만.. 안될 이유는 없어 보인다. - 이 방법을 사용할 경우, 1, 2번도 화면에 page가 보이는 상태에서 진행 가능함. , 단 href의 target을 url이 아닌 javascript로 넣어둔 page의 경우 javascript loading이 끝나기 전에 click이 일어나면, javascript error가 날것임..
3. 분산되어 있는 javascript file을 하나로 concat

웹페이지의 초기화면이 나타날때까지 사용자가 참고 기다릴 수 있는 최대 시간이 4초라니.. 가능하면 어떤 방법을 써서라도 loading time은 줄여야 하는게 맞을 듯 하다.

올블로그 담당자님.. 화면에 page가 보일때까지... 1.2초.. 부탁드립니다. 답답해요.

혹자는 allblog에서 javascript를 껐을때 안보이는 오른쪽 아래 영역이, 웹표준을 준수하지 않는 문제라고 하는 사람도 있지만, 그저 design concept일 뿐이므로 별로 상관 없을 듯 하다. 어차피 javascript없는 환경은 사용 안할테니.. 그리고, 저건 마치, youtube가 flash player를 사용했기 때문에 웹표준에서 벗어난다고 얘기하는 것과 별반 차이 없는 것으로 들린다.

그리고 여기에 일반적인 최적화 기법이 있으니 답답하지 않고 쾌적한 웹 서핑을 즐길 수 있는 세상을 만들었으면 한다.