페이지 로딩 최적화 작업을 하면서 느낀점.

JavaScript로 작업을 하면서, 언제나 작업의 마지막으로는 '페이지 로딩이 느려요. 빠르게 고치333'이라는 요구를 많이 받게 되더군요. 해서 여러가지 실험과 함께 페이지를 빠르게 처리하기 위한 작업을 수행하였습니다.

아직 많지는 않지만, 페이지 로딩을 빠르게 처리하기 위해서는 다음의 방법이 매우 효과가 있더군요. [관련글]

1. js, css, html파일의 공백을 모두 제거하는 방법 (Minifying)
   
2. js파일을 하나로 통합해서 하나의 파일로 배포하는 방법(HTTP Request를 한번으로 줄여버리는 거죠)
   
3. 그리고, 로딩시에 생성할 필요가 없는 클래스는 늦게 로딩하는 방법(Lazy loading)
   -늦게 로딩하는 클래스에서만 사용하는 이미지나 css가 있다면, 로딩시간을 대박 줄일 수 있습니다. 저의 경우 0.4초정도 줄더군요.-
   

이 외에도 2의 방법처럼 이미지를 통합하여 Http Request를 줄이거나, 이미지의 width/height을 표기하는 방법 등을 사용하였습니다만, 1,2,3의 방법이 가장 효과가 많이 나더군요. 로컬에서 테스트할 때 2.2초정도를 줄였습니다.

이미지의 경우 통합하는 방법을 통해서 평균 70ms정도 줄더군요.(약 20개 정도의 이미지를 통합하였습니다 - 파이어폭스의 파이어버그 플러그인으로 테스트를 했을 때, 이미지 로딩은 여러 이미지를 멀티스레드로 로딩을 하는것 처럼 보이더군요.)

해서.. 결론은? 코드를 잘짜자 입니다. ^^

참고자료: 이미지 로딩의 최적화에 대한 모든 기법이 담겨있는 사이트가 있더군요 - Websiteoptimization.com