gzip 압축 설정법, 홈페이지 HTML·CSS 파일을 작게 보내 로딩 줄이는 순서
gzip 압축은 서버가 HTML, CSS, 자바스크립트 같은 텍스트 파일을 줄여서 보내고 브라우저가 받아서 풀어 쓰는 방식입니다.
속도 측정 도구에서 텍스트 압축 관련 지적을 받았다면, 먼저 우리 사이트가 압축해서 보내고 있는지 확인하고 꺼져 있을 때만 .htaccess에 설정을 추가하면 됩니다.
💡 이미지도 아닌데 왜 효과가 클까요?
텍스트 파일은 같은 단어와 태그가 반복되는 경우가 많아서 압축이 잘 됩니다. CSS와 스크립트 파일이 압축 없이 내려가면 모바일 환경에서 첫 화면이 늦게 뜨는 원인이 됩니다. 반대로 JPG, PNG, WebP 같은 이미지는 이미 압축된 형식이라 gzip을 걸어도 거의 줄지 않습니다.
1. 지금 압축이 되고 있는지부터 확인
설정부터 넣기보다 확인이 먼저입니다. 요즘 호스팅이나 CDN은 기본으로 압축을 켜 둔 곳이 많아서, 이미 되고 있는데 설정을 중복으로 넣는 경우를 자주 봅니다. 터미널에서 아래처럼 응답 헤더를 보거나, 크롬 개발자 도구 Network 탭에서 문서를 클릭해 content-encoding 값을 확인하세요.
# 1) 응답 헤더만 확인 (-I)
curl -sI -H "Accept-Encoding: gzip" \
https://내도메인.com/ | grep -i encoding
# 이렇게 나오면 이미 압축 중
content-encoding: gzip
값이 gzip이나 br(브로틀리)로 나오면 이미 압축 중이니 손댈 필요가 없습니다. 이 항목이 아예 없을 때만 다음 단계로 넘어갑니다.
2. 꺼져 있다면 .htaccess에 추가
Apache 계열 서버는 사이트 최상위 폴더의 .htaccess 파일에 아래 내용을 넣으면 됩니다. IfModule로 감싸 두면 해당 모듈이 없는 서버에서도 사이트가 깨지지 않습니다. 수정 전에는 꼭 원본 파일을 따로 내려받아 두세요.
# .htaccess (Apache·LiteSpeed 공통)
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>
Nginx 서버는 .htaccess를 읽지 않으니 서버 설정의 gzip on;을 써야 합니다.
3. 적용 후 꼭 볼 것
저장한 뒤 1번 방법으로 다시 확인하고, 메인과 서브 페이지, 게시판까지 화면이 정상으로 뜨는지 둘러봅니다. 이미지나 PDF, 동영상 파일은 압축 대상에 넣지 않는 게 맞습니다. 개발자 도구 Network 탭에서 전송 크기가 원래 크기보다 작게 표시되면 제대로 적용된 것입니다.
"설정을 넣기 전에, 지금 상태부터 확인하는 게 순서입니다."
나눔웹은 사이트를 점검할 때 화면뿐 아니라 서버가 파일을 어떻게 보내는지까지 함께 살펴봅니다.