워드프레스 및 사이트에 Cache-Control 브라우저 캐시 만료 시간 설정하기

동영상

저사양의 서버로 돌아가는 웹사이트나 이미지 등 미디어 파일이 즐비한 웹사이트에 브라우저 캐시는 필수적인 존재입니다. 사용자 입장에서는 사용자의 PC 자원을 이용하여 더 빠르게 웹사이트로 접근할 수 있도록 도와주고 웹사이트 관리자 입장에서는 웹페이지의 반복적인 접근으로 인한 서버의 과부하와 트래픽을 조금이나마 줄여줄 수 있죠.

브라우저 캐시에서 필수적으로 적용해야 할 부분이 CSS, JS 파일처럼 수정이 드문 정적 파일에 대한 브라우저 캐시 만료 시간을 설정하는 일입니다. 아주 흔하게 브라우저 캐시는 설정하지만 캐시 만료 시간을 설정하지 않는 경우가 잦더군요.

모든 파일에 대해 캐시 만료 시간을 설정하는 것은 필요하지 않지만 CSS, JS 파일이나 이미지 파일 등에서는 캐시 만료 시간을 설정하는 것이 현명할 수 있습니다.

이번 포스트에서는 Nginx와 아파치 그리고 워드프레스에서 w3 total cache를 사용하여 캐시 만료 시간을 설정하는 방법에 대해 알아보겠습니다.

 

Nginx 브라우저 캐시 만료 시간 설정 방법

만약 Nginx를 사용하고 있다면 nginx.conf 파일을 수정하면 됩니다. nginx의 패키지 파일에 따라 수정해야 할 파일명이 달라질 수 있습니다. include 되는 파일을 수정해주시면 됩니다. 예를 들어 라이트세일은 /opt/bitnami/nginx/conf/bitnami/ 폴더에서 bitnami.conf 파일을 수정하면 됩니다.

http 기준으로 80포트(listen 80) 부분에 아래와 같이 입력해주세요.

다음은 예시입니다.

# HTTP server

server {
 listen 80;
 server_name 도메인.com;

location / {
 root html;
 index index.php;
 try_files $uri $uri/ /index.php?q=$uri&$args;
 }

# 미디어 파일 1개월 캐시
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
 expires 1M;
 access_log off;
 add_header Pragma public;
 add_header Cache-Control "public";
 }

# css, js 파일 1년 브라우저 캐시
location ~* \.(?:css|js)$ {
 expires 1y;
 access_log off;
 add_header Pragma public;
 add_header Cache-Control "public";
 }
}

expires 항목은 브라우저 캐시의 만료 기간을 설정하는 부분입니다. 아래처럼 expires를 빼고 Cache-control 만료 시간을 설정할 수도 있습니다.

location ~* \.(?:css|js)$ {
 access_log off;
 add_header Pragma public;
 add_header Cache-Control "public", max-age=31536000;
}

max-age 값은 초당 캐시 만료 시간입니다. max-age의 31536000초는 1년입니다.

 

Apache 브라우저 캐시 만료 시간 설정 방법

다음은 아파치에서 브라우저 캐시 만료 시간을 설정하는 방법에 대해 알아보겠습니다.

아파치 Conf 폴더에서 httpd.conf 파일을 수정하거나 역시 nginx처럼 include 되는 파일을 찾아 수정해주셔야 하며 워드프레스에서는 .htaccess 파일에서 아래 명령어를 추가하여 mod_expires 모듈을 활성화시켜주면 됩니다.

<IfModule mod_expires.c>
ExpiresActive On
 
ExpiresByType text/html "modification plus 1 year"
ExpiresByType text/plain "modification plus 1 year"
ExpiresByType text/xml "modification plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/x-javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
 
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/bmp "access plus 1 month"
ExpiresByType image/tiff "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
 
ExpiresByType video/mpeg "access plus 1 month"
ExpiresByType video/quicktime "access plus 1 month"
ExpiresByType video/x-msvideo "access plus 1 month"
 
ExpiresByType audio/mpeg "access plus 1 month"
ExpiresByType audio/x-aiff "access plus 1 month"
ExpiresByType audio/x-mpegurl "access plus 1 month"
ExpiresByType audio/x-wav  "access plus 1 month"
ExpiresByType audio/mid  "access plus 1 month"

</IfModule>

캐시 만료 시간이 필요한 파일에 대해서만 입력해주시면 됩니다.

years - 년
months - 월
weeks - 주
days - 일
hours - 시간
minutes - 분
seconds - 초

만료일 설정은 다음과 같이 하시면 됩니다. 위 모듈은 css, js, html 등 문서 파일에 대해 캐시 만료 기간을 1년으로 설정했고 이미지나 비디오 등 미디어 파일에 대해서는 1개월로 설정하였습니다.

 

워드프레스 W3 total cache 플러그인에서 만료 시간 설정하기

워드프레스에서는 w3 total cache 플러그인으로 브라우저 캐시의 만료 시간을 손쉽게 설정할 수 있습니다.

우선 W3 total cache 플러그인을 설치한 상태에서 ‘Performance – General Settings’로 접속해보도록 하죠.

 

 

수많은 캐시 설정 항목이 존재하는데 그중 브라우저 캐시를 활성화시켜주세요. Enable을 체크한 후 Save 하면 적용됩니다.

이번에는 ‘Performance – Browser Cache’로 접속해주세요.

수많은 설정값 중 General 부분은 무시해주시고요. CSS & JS 부분과 Media & Other File 부분의 Cache Control policy 부분을 아래처럼 Cache with max-age로 설정해줍니다.

General 부분의 경우 자세히는 모르겠지만 사이트 중 모든 파일을 대상으로 하는 전역 설정으로 짐작됩니다. 캐시가 필요하지 않은 부분이 존재할 수 있기 때문에 CSS&JS 부분과 Media & Other File 부분의 설정만 건드려주시는 것을 권장합니다.

 

 

각 항목의 캐시 만료 시간은 ‘Expires header lifetime'(초)에서 설정할 수 있고요. 1년으로 설정할 경우 ‘31536000’라고 적어주시면 됩니다. ‘예를 들어 CSS&JS 부분의 캐시와 캐시 만료일을 설정하고 싶다면 CSS&JS 메뉴의 ‘항목만 체크해주시면 됩니다.

이제 캐시를 삭제한 후 브라우저 개발자 모드(F12) 창을 불러와 Network로 진입한 후 CSS나 JS 혹은 JPG와 같은 이미지 파일을 클릭해보면 아래와 같이 캐시 만료일이 지정된 것을 확인하실 수 있습니다.

 

 

만약 표시되지 않는다면 현재 캐시를 삭제하거나 크롬에서 새 시크릿 창 모드로 진입한 후 확인해보시기 바라겠습니다.

이 게시글은 0개 답변과 1명 참여가 있으며 마지막으로  아이콘 포스트에 의해 1 년, 1 월 전에 업데이트 됐습니다.

1 글 보임 - 1 에서 1 까지 (총 1 중에서)
1 글 보임 - 1 에서 1 까지 (총 1 중에서)

답변은 후 가능합니다. 회원가입을 진행해보세요!

error: 작업 속도가 너무 빠릅니다.