귀가 너무 얇은 탓일까? WordPress Cache를 위한 plugin으로 여태 잘 쓰고 있던 WP Super Cache에서 Hyper Cache로 갈아탔다.
갈아타게 만든 계기는 여러 WordPress Caching plugin들을 비교한 글에서 보여준 비교적 높은 성능 때문이다.
그런데, 처음 설치하고 나서 설정 페이지를 열어보았더니, 다음과 같은 반갑지 않은 메시지를 맞이하였다.
Hyper Cache was not able to create the folder "cache" in its installation dir. Create it by hand and make it writable.
여기서, cache 디렉토리의 권한을 설정해 주려고 Hyper Cache 공식 페이지에 나와있는대로 /wp-content/hyper-cache/cache 디렉토리를 생성해서 권한을 변경해 주었는데도 경고 메시지가 사라지지 않았다.
확인해 보니 버전이 갱신되면서 기존 캐쉬 디렉토리가 다음과 같은 위치로 바뀌었단다. :
wp-content/plugins/hyper-cache/cache
설치를 마치고 둘러본 바, 워낙 트랙픽이 저조한 곳이라 큰 차이점은 못 느겼지만, 기름칠 한 번 더 해주었다고 생각해야지. 
웹 최적화 덕목들 중에 Front-End User Interface 단에서 손볼 수 있는 항목에는 대표적으로 HTTP Requests의 수를 줄여주는 것이 있다. 물론, 여기에 CSS Sprite 기술을 써서 여러 배경 이미지들을 하나로 묶어 상당한 양의 서버 부담을 덜어줄 수 있지만, 문제는 그 적용에 만만치 않은 수작업이 필요하다는 것이다.
그래서, 이런 작업에 손을 덜어주는 여러 CSS Sprite Generator들이 존재하지만, 일일이 한데 묶을 수 있는 알맞은 배경 이미지를 찾아내고, 또 실제 적용될 background position을 계산하는 일은 여전히 개발자의 몫.
하지만, SpriteMe 덕분에 이것도 옛말이고 귀찮음 때문에 실제 적용을 미루는 것도 이젠 핑곗거리 밖에 안될 듯.
SpriteMe의 소개와 사용법은 개발자인 Steve Souders씨의 블로그 글에도 잘 설명되어 있는데, SpriteMe bookmarklet을 웹 브라우저 책갈피에 저장해놓고 필요할 때마다 선택해서 쓰면 된다.
SpriteMe가 기존 CSS Sprite Generator들 보다 한 단계 더 진화된 놈이라고 부를 수 있는 이유는, 웹 페이지에 사용된 배경 이미지를 자동으로 찾아서 하나의 sprite 이미지로 사용될 수 있는 놈들을 따로 묶어주고, 이렇게 생성된 sprite 이미지를 시험삼아 현재 웹 페이지에 바로 적용해서 보여준다는 점이다. 덤으로 각 배경 이미지에 적용될 background position도 함께 계산해서 보여주니, 아주 똑똑한 놈이다.
그런데, 사용하면서 한 가지 주의해야 할 것이, 하나의 CSS Sprite 이미지로 추천된 여러 배경 이미지들 중에 서로 그 크기가 많이 차이나는 배경 이미지들이 한데 묶여있을 경우, 나중에 이 배경 이미지들을 sprite 이미지로 묶어 생성하게 되면 그 크기 만큼의 불필요한 공백도 함께 포함되기 때문에 차이가 많이 나는 배경 이미지는 추천된 배경 그림 묶음들에서 drag out해서 끄집어 낼 필요가 있다.
덕분에, 또 간단하게 4개의 requests를 더 줄일 수 있어서 고맙고, 앞으로 실제 바로 적용될 수 있는 CSS까지 함께 보여준다면 더 바랄게 없겠군.
iPhone의 caching 한계값(25 Kbytes)을 넘는 치장 목적의 커다란 배경 그림은 필요 없겠지.
@media only screen and (max-device-width: 480px) {
#page {background-image: none;}
}
정작, iPhone Simulator에서만 제대로 적용되는 것을 확인함. 
그나저나, CSS3의 Media Queries는 iPhone에 내장된 Safari 말고도, Opera Mobile v9 그리고 Opera Mini v4도 지원한다.
참고 – A List Apart: Articles: Return of the Mobile Style Sheet
웹 사이트 최적화 덕목들 중에서, JavaScript와 CSS 파일의 압축은 핵심 요소 중 하나다.
여기에 쓰이는 압축 도구로 웹에선 주로 JSMIN나 Packer가 많이 쓰이는데, 압축 효율과 안전성 면에서 YUI Compressor를 따를 수 없다.
YUI Compressor의 터미널 사용 기본 용법을 보면 다음과 같다:
$ java -jar yuicompressor-2.4.1.jar myfile.js -o myfile-min.js --type js|css --charset charset --nomunge --preserve-semi --disable-optimizations
이렇게 놓고 보면 터미널을 열고 일일이 타이핑 하는 수고가 꺼려질 법도 한데, 반갑게도 CSS와 JavaScript 파일은 YUI Compressor TextMate Bundle을 통해서, 단축키 하나(⌃⇧Y)로 간단하게 압축할 수 있게 되었다.
개인적으로 위젯 형태로 만들어 볼까 생각하고 있었는데, 이놈이 더 안성맞춤이군. 
그림 파일을 압축하는데 요긴한 종합 선물 세트라고 해야하나. ImageOptim은 맥용으로 나온 꽤 쓸만한 PNG와 JPEG 그림 파일 압축 도구이다. ImageOptim은 모두 다섯 가지의 압축 도구들(AdvPNG, OptiPNG, PngCrush, JpegOptim, PNGOUT)을 내장하고 있어서, 환경설정에서 각 도구들만의 압축 설정이 가능하다.
저작권 관계로 PNGOUT 바이너리는 직접 내려받아서 적당한 위치에 저장하고, ImageOptim의 환경 설정 창에서 바이너리의 경로를 따로 지정해서 사용해야 한다. 그리고 PNGOUT을 쓰게되면, PngCrush는 기능상 중복되는 부분이 있어서 기능을 꺼줘도 됨.
덧붙임(2012년 3월 5일): 1.4 버전부턴 PNGOUT이 기본적으로 포함되었다.