브라우저 캐시 설정으로 재방문 속도 높이기, .htaccess 작성법
브라우저 캐시 설정이 없으면 방문자가 두 번째 페이지로 넘어갈 때마다 로고, CSS, 폰트 파일을 서버에서 다시 받아 옵니다. Apache나 LiteSpeed를 쓰는 일반 웹호스팅이라면 .htaccess에 Cache-Control 몇 줄만 넣어도 재방문과 페이지 이동 속도가 눈에 띄게 좋아집니다.
파일 종류별로 기간을 나누는 방법과, 수정한 내용이 안 보이는 문제를 피하는 요령까지 정리했습니다.
💡 캐시를 길게 잡으면 수정 사항이 안 보이지 않나요?
맞습니다. 그래서 전부 길게 잡으면 안 되고, 자주 바뀌는 HTML은 매번 확인하게 두고 잘 안 바뀌는 이미지·CSS·JS·폰트만 길게 잡는 것이 기본입니다. 길게 잡은 파일을 수정했을 때는 파일 주소를 바꿔서 브라우저가 새 파일로 인식하게 만듭니다.
1. 지금 캐시가 걸려 있는지부터 확인
크롬 개발자 도구(F12)의 Network 탭을 열고 페이지를 한 번 이동해 보세요. 이미지나 CSS의 Size 칸에 (disk cache) 또는 (memory cache)가 보이면 캐시를 쓰고 있는 것입니다. 파일을 클릭해 Response Headers에 Cache-Control이나 Expires가 아예 없다면 설정이 비어 있는 상태입니다. 리뉴얼 상담 때 점검해 보면 의외로 이 부분이 빠진 사이트가 꽤 많습니다.
2. 파일 종류별로 기간 나누기
웹 루트의 .htaccess에 아래 내용을 추가합니다. 기존 파일이 있다면 덮어쓰지 말고 맨 아래에 붙이고, 작업 전에 원본을 꼭 백업해 두세요. IfModule로 감싸 두면 모듈이 없는 서버에서도 500 에러 없이 그냥 무시됩니다.
# 이미지·폰트: 1년
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif|webp|svg|ico|woff2?)$">
Header set Cache-Control "public, max-age=31536000"
</FilesMatch>
# CSS·JS: 30일
<FilesMatch "\.(css|js)$">
Header set Cache-Control "public, max-age=2592000"
</FilesMatch>
# HTML: 매번 서버에 확인
<FilesMatch "\.(html?|php)$">
Header set Cache-Control "no-cache"
</FilesMatch>
</IfModule>
no-cache는 저장하지 말라는 뜻이 아니라 쓰기 전에 서버에 바뀌었는지 물어보라는 뜻입니다. 정말 저장을 막아야 하는 회원 정보 페이지 같은 곳은 no-store를 씁니다. 로그인 기능이 있는 CMS는 PHP 쪽에서 이미 헤더를 따로 보내는 경우가 있으니, 적용 후 로그인과 장바구니가 정상인지 한 번 확인해 두는 편이 안전합니다.
| 값 | 의미 |
|---|---|
| max-age=초 | 그 시간 동안 서버에 묻지 않고 저장본 사용 |
| no-cache | 저장은 하되 쓸 때마다 변경 여부 확인 |
| no-store | 아예 저장하지 않음 |
3. 수정한 파일은 주소를 바꿔서 올리기
CSS를 30일로 잡아 두면 디자인을 고쳐도 기존 방문자는 예전 화면을 볼 수 있습니다. 이럴 때 고객에게 강력 새로고침을 부탁하는 대신, HTML에서 불러오는 주소 뒤에 버전 값을 붙여 바꿔 주면 브라우저가 다른 파일로 보고 새로 받습니다.
<!-- 수정할 때마다 v 값을 올립니다 -->
<link rel="stylesheet" href="/css/style.css?v=20261027">
<script src="/js/main.js?v=20261027" defer></script>HTML은 매번 확인되니 바뀐 주소도 바로 반영됩니다. 2번과 3번이 짝을 이뤄야 빠르면서도 수정이 즉시 보이는 구조가 됩니다.
"한 번 받은 파일은 다시 받지 않게, 바뀐 파일은 바로 보이게."
나눔웹은 홈페이지를 오픈할 때 캐시와 파일 버전 규칙까지 함께 정리해서
유지관리 중에도 수정 사항이 바로 반영되도록 세팅합니다.
