최적화 후에도 시시때대로 느려지는 워드프레스를 도저히 이해할 수 없어서 찾아보니 여러 플러그인들의 충돌이 꽤나 잦은 것 같다는 의견이 주를 이루었다. 3.0.1이 나온지 얼마되지 않아 모든 플러그인들이 최적화도지 않았고 플러그인들 끼리의 충돌이 있긴 있는것 같이 느껴졌다. 지금은 눈으로 보이지 않는 모든 플러그인들을 제거했는데 오히려 전보다 쾌적해 졌다. (캐시 플러그인까지 부분적으로 기능을 제한했는데도 말이다)
이후에 W3 Total Cache에서 제공하는 기능 중 하나였던 컴포넌트 압축 기능을 인터넷을 찾아 적용했더니 정말 좋아지긴 했다. 아파치에 이런 기능이 있다는 것도 몰랐고 말이다. 훗날 다시 뒤져볼 것을 위해 여기에 또 로그를 남겨본다.
컨텐츠를 압축하여 대역폭을 절약하기
아파치 웹서버는 웹 컨텐츠를 압축하여 전송할 수 있는 매커니즘을 제공한다. (나는 이번에 처음 알았다 -.-;; 기술 참 많이 발전했다) 워드프레스를 운영하는 사이트를 열어보면 CSS화일이나 js화일들이 어떨때는 이미지 화일보다 큰 걸 발견할 수 있는데 이들을 압축 전송하면 속도도 빨라질 뿐 아니라 서비스를 제공하는 입장에서도 대역폭을 아낄 수 있다.
이건 아파치에 내장된 mod_deflate 모듈을 통해 구현할 수 있다. 스노 레퍼드 서버에 내장된 아파치 서버는 2.2.14 버전인데 기본적으로 mod_deflate 모듈이 ‘on’되어 있다. 이제 이걸 이용하기만 하면 된다. 몇가지 방법이 있는데 아파치 설정화일인 httpd.conf 화일이나 .htaccess에 다음과 같은 코드를 넣기만 하면 된다.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascriptDeflateCompressionLevel 9
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/htmlDeflateFilterNote Input instream
DeflateFilterNote Output outstream
DeflateFilterNote Ratio ratioLogFormat ‘”%r” %{outstream}n/%{instream}n (%{ratio}n%%)’ deflate
</IfModule>
컨텐츠가 압축되어 전달되었는지는 화이어폭스에서 Firebug를 이용하여 확인해보자.
이걸 확인하려면 화이어폭스의 캐시를 모두 지우고 확인해야 한다. 캐시를 불러오게 될 경우 Status는 위 그림과 같이 ‘200 OK’가 아닌 ‘304 Not Modified’로 표시되며 내부를 들여다 봐도 압축되어 전달되었다는 표시는 안보이기 때문이다. 압축된 컨텐츠를 전달하려면 브라우저가 당연히 이를 지원해야 한다. 요청헤더 부분을 보면 웹서버가 압축된 컨텐츠를 보내줘도 처리할 수 있다는 뜻인 ‘Accept-Encoding gzip,deflate’라는 내용이 들어있고 아파치는 이 헤더를 보고 압축된 내용을 줘도 되겠구나…라고 판단한단다.
과연 얼마나 압축되었을까 ? 위의 그림은 style.css인데 4.8KB로 압축되었고 오리지널 화일은 무려 22.5KB이다. 1/5로 압축된 것. 이정도 하나만으로도 대단하지 않은가 ? 요즘의 웹기술…알아가는 재미가 있구나…
- 위 방법은 여길 참고했다 – G-Loaded Journal
CSS로 그림 크기 조절
나 원 참…간단한 줄 알았는데 비율을 유지하면서 그림을 일정크기로 축소하는게 왜이리 어려운 것인가. 내 블로그의 맨 첫 페이지에 나오는 그림들은 워드프레스 기능중 하나인 Thumb 이미지 기능을 불러내는 것인데 도대체 비율에 맞게 200px내에 들어가지 않았다. 아니 이거 간단할 것 같았는데 어딜보니 거창하게 자바스크립트 모듈을 이용하질 않나 아주 난리다.
난 그런거 필요없고 그냥 간단하게 CSS를 이용해서 조절하고 싶은데…그래서 결국 찾아낸 허무하도록 간단한 방법…지금은 그냥 이렇게 세팅되어 있다.
max-width:200px;
height: auto;
- 위 방법은 여길참고했다