안녕하세요

 

 

XE를 너무 잘쓰고 있습니다.

그런데 역시나 너무 무거운 체제라 보니, 로딩 속도가 너무나 문제임을 발견하게 됩니다.

 

 XE 사이트만 하더라도, 일차적으로 다운로드 해야 하는 파일은 74개 파일에, 총 용량은 287.6kb를 요구하고 있습니다.

(파일수와 총 다운로드 용량은 각 페이지에 따라서 다릅니다.)

그래도 XE 사이트는 네이버에서 서버를 돌리는거라서 서버가 빠른 효과를 보고 있는듯 하고요, 저처럼 호스팅을 쓰는 입장에서는 방문자에게 한번에 74개 파일을 받게 강제 하는것은 무척 무리라고 봅니다.

 

다른 XE로 구현된 사이트들을 들어가 보면....

거진 MP3 파일에 버금가는 페이지들이 둥둥 떠 있더군요, 조금 XE를 이용해서 이쁘게 만든 사이트의 경우에는 1메가 2메가는 기본이고 페이지 하나를 구성하는 파일수도 100개를 넘는경우가 수두룩 한거 같습니다.

 

제가 발견한 XE의 로딩속도 문제는 아래와 같이 구분될거 같습니다.

 

• MySQL DB 쿼리 => 와일드 문자 *를 쓰고 있는데 이는 MySQL 서버에 엄청난 무리를 줍니다.
• MySQL DB 코넥터 => 오브젝트로 사용을 하고 있는데 몇몇 모듈이나, 애드온등을 보면 오브젝트 사용 후 제대로 디스트로이를 시켜주지 않고 있습니다 => 이는 서버에 메모리 누수(Memory Leaking)을 일으키는 것으로 판단 됩니다.
• PHP Code => 제가 PHP는 손놓은지 몇년이 되어서 잘 모르겠습니다.
• CSS => 엄청납니다. CSS파일 구조가 XE코어 + 각 모듈 + 각 레이아웃 + 각 애드온 + 각 위젯으로 나누어 져 있는걸 다시 하나로 통합해서 부르는데, 불필요한 CSS 셀렉터가 너무나 많습니다. 정리를 하려고 해도 통합적인 문서의 부제로 인해서 노가다로 하나씩 하나씩 테스트 하면서 줄여야 합니다.
• JS => CSS와 같은 원리로 구조를 갖는거 같습니다. 정말 이해 못할 부분은, XE는 기본으로 jQuery를 이용을 하는데 몇몇 위젯, 모듈,기타 등등은 jQuery가 아닌 다른 라이브러리를 참조하는것도 있고, 그래서 다른 라이브러리를 불러와야 하니 JS 파일하나만 보통 300kb~800kb(사이트 마다 달라요) 이렇게 천차만별이지만, 엄청나게 큰 용량을 차지 하고 있습니다.

 

 

해결책

MYSQL 쿼리를 옵티마이즈 합니다.

 

각 모듈이나, 위젯의 쿼리 XML 파일을 보면 보통 덤핑하듯이 아래와 같이 모든 칼럼값을 사용여부와 상관없이 가져오고 있습니다. 

<columns>
        <column name="*" />
    </columns>

 

이를 다음과 같이 꼭 필요한 칼럼만 지정하여 줍니다. 

 

<columns>
        <column name="document_srl" />
        <column name="title" />
    </columns>

 

 

CSS 파일을 옵티마이즈 합니다.

1. 먼저 쓸모없는 CSS 셀렉터를 찾아 냅니다. 하나씩 찾기는 힘들기 때문에 파이어폭스 애드온중 Dust-ME라는 애드온을 깔고서 불필요한 CSS 구문을 찾아서 지워주면 됩니다.
   Dust-ME :http://www.sitepoint.com/dustmeselectors/
2. 이미지의 경우에는 따로 따로 만들어 부르지 말고, 스프라이트 이미지를 이용하여 이미지 숫자를 줄입니다. 결과적으로 HTTP Request 횟수가 줄어들게 되고, 페이지 반응 속도를 올려줍니다.
   
   아래는 현재 코스트렐리아에 적용된 CSS용 스프라이트 이미지 입니다. 아래 한계 이미지 파일의 크기는 7kb에 불과하며, 여러개의 이미지들을 하나로 묶어서 결과적으로 총 26회의 HTTP Request를 기전과 비교해서 줄였습니다.
   
3. CSS 파일의 논리적인 옵티마이징이 되었으면, 이제 다시 텍스트 파일인 CSS를 압축(사실은 TAB,뉴라인,코멘트 제거)을 실시 합니다. 아래 사이트에 가서 복사, 붙이기 신공을 펼치면 됩니다.
   http://www.csscompressor.com/
   참고로 XE는 GZIP 압축을 하고 있는데 이는 정말 너무나 고마운 배려 입니다. 그러나 GZIP전에 조금씩이라도 줄여주면 더 좋겠죠...

 

JS 파일을 옵티마이즈 합니다.

1.  만약 자바스크립트에 대해서 자신이 없다면, 각 함수를 찾아 고치기 보다는 각 JS 파일을 열어서 탭 그리고 뉴라인만 줄여도 전체 JS 파일로 따지면 엄청난 용량절감을 경험 할 수 있습니다.
2. XE의 경우 jQuery- UI도 사용하고 있는데, 자세히 들여다 보면 사용치 않는 UI-콤퍼넌트들까지 장래 사용을 위해서인지 모두 불렀습니다. 그래서  jQuery- UI만 하더라도 엄청난 크기를 보이고 있습니다.
   http://jqueryui.com/download 로 가셔서 꼭 필요한 컴포넌트만 찾아 새로 UI JS 파일을 다운받고 기존의 XE에 기본으로 내장된 파일과 바꿉니다. 코스트렐리아의 경우에는 UI - JS는 꼭 필요한 부분만 설정해서 40kb대로 줄였습니다. 기본은 300kb가 넘더군요.
3. http://javascriptcompressor.com/ 에서 JS 파일 압축을 합니다.

 

 

거진 대부분의 XE파일을 하나하나 손으로 일일이 줄였습니다.

어떤 파일은 몇 바이트만 줄였고, 어떤 파일은 몇십 킬로바이트를 줄였습니다.

그 결과, 총 수백 킬로 바이트의 파일 크기 절감을 가질 수 있었습니다.

또한, PHP의 경우, 나름 더 빠르다고 생각하는 로직으로 몇몇 PHP 함수를 바꿔 주었습니다. 따로 퍼포먼스 메져용 코드를 짜지 않아서 비교하기는 그렇지만, 어느정도 효과를 보고 있다고 느끼고 있습니다.

마지막으로 MYSQL의 경우는 쿼리를 조금씩 바꿔 효과를 보았는데, XE의 XML 쿼리문을 전체적으로 이해를 하지 못해서 MYSQL 내장 함수로 더 속도를 올릴 수 있는 부분이나, 조금 복잡한 쿼리문을 넣어 시험을 하지 못한 아쉬움이 남습니다.

 

 

http://www.kaustralia.com/KA/?mid=TECH&document_srl=2113489

 

 

 *****

게으른 탓도 있어서, 자세히 문서를 안 읽어 봤는데, 통합 GZIP되는 JS나 CSS말고 따로 불려지는 파일들을 통합하는 방법을 알고 싶습니다. 그러면 좀더 효과를 얻을 거 같은데 말입니다....