워드프레스에서 gzip 압축 방법

GZIP 압축을 이용하면 페이지를 70% 이상 압축하여 로딩 속도가 빨라 질 수 있습니다. 하지만 실제 속도 향상은 개별 사이트마다 다를 것으로 생각됩니다.

[ 이 글은 2023년 1월 18일에 마지막으로 업데이트되었습니다. ]

Gzip Compression 설정

워드프레스에서 gzip 압축을 이용하는 방식에는 여러 가지가 있습니다.

W3 Total Cache 플러그인을 사용하는 경우 Performance > Browser Cache에서 gzip 압축을 활성화할 수 있습니다.

Enable HTTP (gzip) compression을 체크하면 gzip 압축이 활성화됩니다.

이 사이트에는 Cache Enabler라는 기능이 많지 않은 심플한 캐시 플러그인이 설치되어 있습니다. Cache Enabler에서는 Create a cached version pre-compressed with Gzip 옵션을 체크하면 Gzip 압축이 활성화되는 것 같습니다.

또 다른 방법으로 .htaccess에서 다음 코드를 추가할 수 있습니다.

# compress text, html, javascript, css, xml:
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-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png

gzip 활성화 여부는 이 사이트에서 확인이 가능합니다. (※ 기존에 링크한 사이트가 사라져서 Check Gzip/Brotli Compression이라는 새로운 온라인 Gzip 압축 확인 사이트 링크로 대체했습니다.)

참고로 이 글을 보면 Bluehost에서는 gzip 압축이 잘 지원하지 않는다고 나와 있네요. .htaccess를 이용하거나 플러그인을 사용하여 gzip을 활성화해도 gzip이 활성화되지 않는다고 표시될 경우 서버에서의 제한 때문일 가능성이 높습니다.

gzip compression을 적용한 후에 PageSpeed Insights에서 속도를 측정해보니 6점 정도 점수가 올라가네요.

2017년 3월 업데이트: W3 Total Cache에서 Gzip 압축을 활성화하니 Bluehost에서도 Gzip 압축이 잘 적용되네요.

무료 캐시 플러그인으로는 WP Super Cache와 W3 Total Cache가 많이 사용됩니다. 저는 WP Super Cache를 사용하다가 W3 Total Cache로 바꾸었습니다. W3 Total Cache가 기능면에서는 더 정교하게 조정이 가능한 것 같습니다.

Browser Caching 설정

참고로 다음 코드를 .htaccess에 추가하면 Browser Caching이 설정됩니다.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

경우에 따라 이 방법도 속도 향상에 도움이 될 것입니다.

하지만 브라우저 캐싱을 활성화할 경우 새 글을 발행하면 지연되어 프런트엔드에 표시될 수 있습니다. 저는 브라우저 캐시 설정 때문에 사이트에 문제가 발생한 적이 있어서 이 기능은 비활성화하였습니다.

Gzip Compression 설정

Browser Caching 설정

참고

2개 댓글

댓글 남기기 응답 취소