01DEFINITION
한 줄로 말하면
HTML · CSS · 자바스크립트는 결국 텍스트라서 압축하면 보통 4분의 1 이하로 줄어듭니다. 서버 설정 몇 줄이면 되고 코드는 한 줄도 고치지 않습니다. 그런데 실제로 재 보면 압축이 아예 꺼져 있는 사이트가 흔합니다. 저희도 오픈 전 자체 점검에서 이 항목에 걸려, 80KB 짜리 CSS 를 그대로 내보내고 있던 것을 그때 고쳤습니다.
02RISK
없으면 무슨 일이 생기나
텍스트는 반복이 많아서 압축이 잘 듣습니다. HTML 은 태그 이름이 계속 반복되고, CSS 는 속성 이름이, 자바스크립트는 예약어가 그렇습니다. 압축을 켜면 대부분 원본의 20에서 30퍼센트 크기로 줄어듭니다. 이만큼의 개선을 코드 수정 없이 얻을 수 있는 항목은 드뭅니다.
그런데 실제로 재 보면 꺼져 있는 사이트가 흔합니다. 저희 사이트도 그랬습니다. 요금표 페이지가 94KB, 보안 진단 페이지가 74KB, 스타일시트가 80KB 로 나가고 있었고, 압축을 켜는 설정 몇 줄로 전부 4분의 1 수준이 됐습니다. 우리가 파는 항목에 우리가 걸려 있었던 것이라 그날 바로 고쳤습니다.
효과는 느린 회선에서 크게 나타납니다. 유선망에서는 80KB 나 20KB 나 체감 차이가 없지만, 신호가 약한 곳에서는 그 차이가 초 단위로 벌어집니다. 그리고 이 항목이 걸려 있으면 대개 캐시 헤더도 함께 빠져 있어서, 페이지를 옮길 때마다 그 무게를 다시 치릅니다.
03CHECK IT YOURSELF
직접 확인하는 방법
아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.
-
01
압축된 응답이 오는지 본다
압축을 받을 수 있다고 알리는 헤더를 붙여 요청합니다. 응답에 content-encoding 이 있으면 켜져 있는 것이고, 없으면 이 항목에 걸립니다.
$ curl -sI -H "Accept-Encoding: gzip, br" https://example.com/ | grep -i content-encoding content-encoding: gzip
-
02
실제로 얼마나 줄어드는지 재 본다
같은 파일을 압축 없이 한 번, 압축해서 한 번 받아 크기를 비교합니다. 두 값이 같으면 압축이 안 되고 있는 것입니다.
$ curl -s -o /dev/null -w "plain=%{size_download}\n" \ https://example.com/theme/makesite/css/makesite.css $ curl -s -o /dev/null -H "Accept-Encoding: gzip" -w "gzip=%{size_download}\n" \ https://example.com/theme/makesite/css/makesite.css plain=81920 gzip=18432 -
03
HTML 도 압축되는지 따로 확인한다
정적 파일에만 압축이 걸려 있고 PHP 가 만들어 내보내는 HTML 은 빠져 있는 경우가 있습니다. 페이지 주소로도 한 번 확인하십시오.
$ curl -sI -H "Accept-Encoding: gzip" https://example.com/pricing | grep -i content-encoding
-
04
개발자도구에서 두 숫자를 비교한다
네트워크 탭에는 전송량과 실제 크기가 따로 나옵니다. 두 값이 같으면 압축되지 않은 것이고, 전송량이 훨씬 작으면 압축이 듣고 있는 것입니다.
04HOW TO FIX
고치는 방법
서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.
이미지 · 폰트 · 압축 파일은 이미 압축돼 있어 다시 압축하면 CPU 만 씁니다. 텍스트 형식만 지정하십시오.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE application/javascript application/json
AddOutputFilterByType DEFLATE image/svg+xml
Header append Vary Accept-Encoding
</IfModule> 아주 작은 파일은 압축해도 이득이 없고 오히려 커질 수 있어 하한을 둡니다.
gzip on; gzip_min_length 1024; gzip_types text/plain text/css application/javascript application/json image/svg+xml; gzip_vary on;
중간 캐시가 압축된 응답을 압축을 못 받는 클라이언트에 그대로 줄 수 있습니다. 이 헤더가 그것을 막습니다. 압축을 켤 때 세트로 붙이십시오.
Header append Vary Accept-Encoding
gzip 보다 조금 더 줄어들고 최신 브라우저는 대부분 지원합니다. 모듈이 있으면 함께 켜고, 없으면 gzip 만으로도 충분합니다.
$ apachectl -M | grep -i brotli $ nginx -V 2>&1 | grep -o brotli
05FAQ
자주 묻는 질문
이미지도 압축해야 하나요
- 하지 마십시오. JPEG · PNG · WebP 는 이미 압축된 형식이라 다시 압축해도 거의 줄지 않고 서버 CPU 만 씁니다. 드물게는 오히려 커집니다. 이미지는 전송 압축이 아니라 크기와 형식을 줄이는 쪽으로 접근합니다.
압축을 켜면 서버가 느려지지 않나요
- 압축에 CPU 가 쓰이는 것은 맞지만 현대 서버에서 이 비용은 매우 작고, 전송량이 줄어 얻는 이득이 훨씬 큽니다. 정적 파일은 미리 압축해 두는 방식도 있어서 그 경우 실행 시 비용이 거의 없습니다.
gzip 과 brotli 중 무엇을 써야 하나요
- 둘 다 켜 두면 브라우저가 지원하는 쪽으로 알아서 협상합니다. brotli 가 조금 더 줄어들지만 차이는 크지 않고, 모듈이 없다면 gzip 만으로도 이 항목은 충분히 해결됩니다. 없는 것과 있는 것의 차이가 gzip 과 brotli 의 차이보다 훨씬 큽니다.
호스팅에서 서버 설정을 못 고칩니다
- .htaccess 를 쓸 수 있으면 위 설정 대부분이 거기서도 동작합니다. 그것마저 막혀 있다면 호스팅 고객센터에 압축 설정을 문의하시면 됩니다. 요즘 대형 호스팅은 기본으로 켜 둔 곳이 많습니다.
GET STARTED
내 사이트는
이 항목을 통과할까요
주소만 넣으시면 이 항목을 포함해 25가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.