포럼

  2. Support
  3. 포럼

최적화(Optimizer) 기능을 사용하는 것이 정말 더 빠른가요?

2010.11.17 12:13

정찬명

XE UI 개발을 담당하고 있는 정찬명 입니다.

저희 팀원들이 이곳 커뮤니티에서 왕성하게 활동하지는 못하지만 중요한 의견들은 항상 팀원들과 함께 회람하고 있습니다. 최근에 XE 성능과 관련하여 많은 분들이 자유게시판에 주신 의견들을 확인 했습니다. 회원님들은 XE가 더 이상 많은 기능을 추가하는 것보다 이제는 성능을 개선하는데 집중해야 한다고 피드백을 보내주셨고 저희 팀에서도 이런 의견에 적극 공감하고 있습니다.

성능 개선을 위해 서버측과 클라이언트측에서 다방면의 이슈들을 고려해야 하겠지만 이를 한꺼번에 처리할 수 없기 때문에 가장 적은 노력으로 쉽게 개선할 수 있는 방법부터 하나씩 찾아서 개선해 나가도록 하겠습니다. 이와 관련하여 현재 저희 개발팀에서 가장 먼저 도마위에 올려놓은 기능이 바로 최적화(Optimizer) 기능입니다.

최적화(optimizer) 기능이란 웹 페이지 성능(전송 속도)을 개선하기 위하여 여러개의 CSS/JS 파일을 하나로 통합해주는 기능을 말합니다. 조각난 CSS/JS 파일을 하나로 통합하게 되면 HTTP 요청 횟수가 줄어들기 때문에 결과적으로 사용자가 어떤 페이지에 최초 방문시CSS/JS 파일 로딩하는 시간을 줄여줍니다. 

한편 최적화 기능을 사용하는 것이 절대적으로 좋다라고 말하기 어려운 측면도 있습니다. 웹 브라우저는 A 페이지에서 참조했던 CSS/JS 파일이 B 페이지에서도 동일하게 참조되는 경우 이 파일을 매번 서버측에서 새로 내려받지 않고 로컬 PC에 캐시로 저장해 두었다가 필요할 때마다 꺼내어 쓰는데요. 이렇게 브라우저 캐시를 이용하면 XE의 라이브러리 파일들을 로컬에서 불러오기 때문에 속도가 훨씬 빠릅니다. 

문제는 XE 관리자가 최적화(optimizer) 기능을 사용했을 때 XE의 라이브러리 파일들까지 다른 파일들과 병합이 되면서 웹 브라우저 캐시 기능을 사용할 수 없게 된다는데 있습니다. A 페이지에서 병합된 CSS/JS 파일과 B 페이지에서 병합된 CSS/JS 파일은 각 페이지에서 요구하는 기능이나 디자인이 다르기 때문에 서로 다른 파일이 되는데요. 이렇게 되면 사용자가 여러 페이지를 탐색할 때 브라우저는 이를 매번 서버에서 새로 불러오기 때문에 브라우저 캐시의 이점을 누리지 못하게 되는 것입니다.

결국 최적화(optimizer) 기능을 사용하면 페이지에 처음 접속하는 사용자는 조금 빠르다고 느낄 수 있지만 A, B, C, D 페이지를 골고루 방문하는 사용자의 경우 브라우저 캐시의 도움을 받지 못해서 느리다고 느끼게 되는 것입니다. 반대로 최적화(optimizer) 기능을 끄면 페이지를 처음 방문할 때에 여러개의 CSS/JS 파일을 부르기 때문에 조금 느리다고 느낄 수 있으나 다른 페이지를 골고루 방문할 때에는 캐싱된 CSS/JS를 이용하기 때문에 빠르다고 느낄 수 있습니다.

이론적으로는 이렇게 설명할 수 있으나 실제로 성능 측정을 해보지 않고서는 어느쪽이 더 좋은지 확신을 갖기가 어려울 것입니다.
따라서 이것을 직접 실험해 보면 좋을것 같습니다. 여러분들도 한번 아래와 같은 테스트를 진행 해보시기 바랍니다.

  • 최적화(optimizer) 기능을 켜고 서로 다른 A, B, C, D, E 페이지를 방문해서 로딩 속도를 측정한 다음 속도의 합을 구해 봅니다. 브라우저 캐시를 사용하지 않은 첫 방문과 브라우저 캐시를 사용한 재 방문 결과를 모두 측정해야 합니다.
  • 최적화(optimizer) 기능을 끄고 서로 다른 A, B, C, D, E 페이지를 방문해서 로딩 속도를 측정한 다음 속도의 합을 구해 봅니다. 브라우저 캐시를 사용하지 않은 첫 방문과 브라우저 캐시를 사용한 재 방문 결과를 모두 측정해야 합니다.

이 테스트는 전문지식이 있는 웹 개발자가 진행하는 것이 좋고 간단한 속도 측정 테스트 방법을 소개합니다.

  1. 파이어폭스 + 파이어버그 브라우저 사용. 
  2. 파이어버그의 Net 탭에서 Enabled 상태로 테스트 페이지에 접근.
  3. 캐시를 사용하지 않고 웹 페이지를 완전히 새로고침하는 브라우저 단축키 Ctrl+F5 를 이용하여 새로고침 후 속도 측정.
  4. 캐시를 사용한 결과를 얻기 위하여 F5 새로고침 후 속도 측정.

이 방법으로 최적화(optimizer) 기능을 켜고 측정한 다음 최적화(optimizer) 기능을 끄고 한 번 더 측정해 봅니다.
여러분들이 운영하는 XE 사이트의 성능 측정 결과가 어떤지 궁금합니다.

이 게시물을
Profile

사람과 사람 사이의 접점을 설계합니다. 

좋아요
목록
태그 쓰기