속도를 올리려고 서버부터 올리는 경우가 많습니다. 그런데 방문자가 기다리는 시간의 상당 부분은 서버가 계산하는 시간이 아니라 브라우저가 파일을 내려받는 시간입니다. 그리고 그 파일의 대부분은 대체로 이미지입니다.
다행히 이미지는 돈을 거의 안 쓰고 줄일 수 있는 항목입니다. 순서만 지키면 됩니다 — 앞의 단계를 건너뛰고 뒤의 단계로 가면 돈은 쓰고 효과는 못 얻습니다.
순서 — 위에서 아래로
첫 단계가 전부입니다. 스마트폰이나 카메라에서 나온 사진은 화면에 필요한 크기보다 훨씬 큽니다. 본문 폭이 800픽셀인 자리에 4000픽셀짜리 원본을 올리면, 방문자는 화면에 보이지도 않는 픽셀을 전부 내려받습니다. 올리기 전에 가로 폭을 실제 표시 크기에 맞춰 줄이는 30초가, 뒤의 모든 단계를 합친 것보다 큽니다.
두 번째 단계인 포맷 변환은 플러그인에 맡깁니다. 같은 그림을 더 적은 용량으로 담는 최신 포맷이 있고, 지원하지 않는 브라우저에는 기존 파일을 내보내는 방식이 표준입니다. 무료 도구로 충분한 대표적인 자리입니다.
세 번째 지연 로드는 워드프레스가 이미 기본으로 해 줍니다. 화면 아래쪽 이미지를 스크롤할 때까지 미루는 기능이라 첫 화면이 빨라집니다. 다만 첫 화면의 큰 이미지에는 지연 로드를 걸지 않습니다 — 가장 먼저 보여야 할 것을 미루면 오히려 느려 보입니다.
CDN 은 마지막 칸입니다
CDN 은 파일을 방문자와 가까운 곳에 복사해 두고 그쪽에서 배달하는 서비스입니다. 효과가 분명하고 개인 사이트 규모에서는 무료 등급으로 충분한 경우가 많아, 넣지 않을 이유가 별로 없습니다.
다만 CDN 이 파일을 작게 만들어 주지는 않습니다. 큰 파일은 가까운 곳에서 배달돼도 여전히 큰 파일입니다. 그래서 순서가 중요합니다 — 앞의 세 단계를 건너뛰고 CDN 만 붙이면, 무거운 페이지를 조금 더 빨리 배달할 뿐입니다.
CDN 을 붙일 때 흔한 사고 하나만 짚습니다. 캐시가 남아 옛 이미지가 계속 나오는 경우인데, 파일을 교체할 때 같은 파일명을 재사용하면 생깁니다. 이미지를 바꾸면 파일명도 바꾸는 습관이 이 문제를 통째로 없앱니다.
여기까지 하면 남는 것
이미지를 정리하고 나면 남는 무게는 대체로 스크립트와 폰트입니다. 그 둘은 테마와 플러그인 선택에서 결정되므로, 페이지 하나를 고치는 문제가 아니라 구성을 되돌아보는 문제가 됩니다. 그때가 이 연재의 뒷부분에서 다룰 증설 판단과 만나는 지점입니다.
속도에 관한 글은 성능 최적화 아카이브에 모여 있고, 이미지 · 캐시 · 서버 설정을 한 번에 정리하는 경로는 최적화 지원 사업에 있습니다.
다음 회차
다음 회차는 메일입니다. 발송을 직접 할 것인가 맡길 것인가 — 도달률과 비용을 맞바꾸는 지점이 어디인지 따집니다.