1. 같은 사이트를 두 번째 방문할 때 빠른 이유
처음 방문할 때보다 두 번째 방문할 때 사이트가 훨씬 빠르게 로딩되는 경험을 해보셨을 겁니다. 이것은 브라우저 캐시 덕분입니다.
브라우저는 한 번 내려받은 파일(이미지, CSS, JS 등)을 로컬에 저장해두고, 같은 사이트에 다시 방문했을 때 서버에서 다시 받지 않고 저장된 파일을 재사용합니다.
브라우저 캐시를 올바르게 설정하면 재방문자의 로딩 속도를 극적으로 높이고, 서버로 오는 요청 수와 트래픽도 줄일 수 있습니다.
2. 브라우저 캐시의 동작 원리
브라우저 캐시의 기본 흐름을 살펴보겠습니다.
첫 방문 시 브라우저가 서버에 파일을 요청합니다. 서버가 파일과 함께 캐시 관련 HTTP 헤더를 응답합니다. 브라우저는 파일을 로컬에 저장하고 캐시 규칙도 기록합니다.
재방문 시 브라우저가 해당 파일이 로컬에 있는지 확인합니다. 캐시가 아직 유효하다면 서버 요청 없이 로컬 파일을 바로 사용합니다. 캐시가 만료됐다면 서버에 파일이 변경됐는지 확인하고 필요한 경우에만 새로 내려받습니다.
이 과정에서 핵심 역할을 하는 것이 Cache-Control 헤더입니다.
3. Cache-Control 헤더 완전 이해하기
Cache-Control은 파일을 얼마나 오래 캐시할지 지시하는 HTTP 헤더입니다. 서버가 응답할 때 이 헤더를 포함시켜 브라우저에게 캐시 방법을 알려줍니다.
주요 Cache-Control 지시어를 정리합니다.
max-age=초: 이 파일을 지정한 시간(초) 동안 캐시합니다. max-age=86400은 1일(86400초) 동안 캐시하라는 의미입니다.
public: CDN을 포함한 모든 중간 캐시 서버에도 저장할 수 있습니다.
private: 최종 사용자의 브라우저에만 저장할 수 있습니다. 개인 정보가 포함된 페이지에 사용합니다.
no-cache: 캐시는 하되 매번 서버에 유효성을 확인합니다.
no-store: 캐시를 전혀 하지 않습니다. 민감한 데이터에 사용합니다.
immutable: 파일이 절대 변경되지 않음을 나타냅니다. max-age 기간 동안 유효성 검사를 하지 않습니다.
리소스별 권장 캐시 기간입니다.
| 리소스 종류 | 권장 max-age |
|---|---|
| 이미지 (변경 드뭄) | 1년 (31536000초) |
| CSS, JS (버전 관리 시) | 1년 (31536000초) |
| HTML 페이지 | 0 또는 no-cache |
| API 응답 | 상황에 따라 다름 |
4. ETag와 Last-Modified – 캐시 유효성 검사 방법
캐시가 만료된 후 서버에 유효성을 확인할 때 사용하는 두 가지 메커니즘입니다.
Last-Modified: 파일이 마지막으로 수정된 날짜와 시간입니다. 브라우저가 If-Modified-Since 헤더에 이 날짜를 담아 서버에 보내면, 서버는 그 이후로 변경이 없으면 304 Not Modified를 응답합니다. 파일을 다시 내려받지 않아도 됩니다.
ETag: 파일 내용을 해시한 고유 식별자입니다. 파일 내용이 조금이라도 바뀌면 ETag가 달라집니다. Last-Modified보다 더 정확합니다.
두 메커니즘 모두 “파일이 바뀌지 않았다면 다시 내려받지 않겠다”는 조건부 요청을 가능하게 합니다. 변경이 없으면 304 응답으로 헤더만 주고받으므로 트래픽을 크게 줄일 수 있습니다.
5. Nginx에서 캐시 헤더 설정하기
Nginx 설정 파일에서 파일 유형별로 캐시 헤더를 설정합니다.
server 블록 또는 location 블록에서 아래처럼 설정합니다.
location ~* .(jpg|jpeg|png|webp|gif|ico|svg)$ { expires 1y; add_header Cache-Control “public, immutable”; }
location ~* .(css|js)$ { expires 1y; add_header Cache-Control “public, immutable”; }
location ~* .(html|htm)$ { expires -1; add_header Cache-Control “no-cache, no-store, must-revalidate”; }
설정 후 Nginx를 재시작합니다.
sudo systemctl reload nginx
브라우저 개발자 도구(F12) > Network 탭에서 파일을 클릭하면 Response Headers에서 Cache-Control과 Expires 헤더가 적용됐는지 확인할 수 있습니다.
6. 캐시 무효화 – 파일이 바뀌었을 때 캐시 깨는 방법
1년짜리 캐시를 설정했는데 CSS 파일을 수정했다면 어떻게 할까요? 방문자는 1년간 예전 CSS를 보게 됩니다.
이 문제를 해결하는 방법이 **캐시 버스팅(Cache Busting)**입니다. 파일 이름에 버전 정보나 해시값을 포함시켜, 파일이 바뀌면 다른 URL이 되도록 만드는 방식입니다.
파일 이름에 버전 번호를 포함합니다. style.css 대신 style.v2.css처럼 사용합니다.
또는 쿼리 스트링을 사용합니다. style.css?v=20260101처럼 뒤에 버전을 붙입니다.
빌드 도구(Webpack, Vite 등)를 사용하면 파일 내용의 해시를 파일 이름에 자동으로 추가해줍니다. style.a3f2b1c.css처럼 되어 파일이 조금이라도 바뀌면 파일 이름이 완전히 달라집니다.
7. 워드프레스에서 캐시 설정하기
워드프레스 사용자라면 캐시 플러그인으로 쉽게 설정할 수 있습니다.
W3 Total Cache: 가장 강력한 캐시 플러그인 중 하나입니다. 페이지 캐시, 브라우저 캐시, 오브젝트 캐시 등을 설정할 수 있습니다.
WP Super Cache: 설정이 간단하고 안정적입니다. 처음 워드프레스 캐시를 설정하는 분께 추천합니다.
LiteSpeed Cache: LiteSpeed 웹서버를 사용하는 호스팅이라면 이 플러그인이 가장 효과적입니다.
플러그인 설치 후 Browser Cache 또는 브라우저 캐시 섹션에서 정적 파일의 만료 기간을 설정합니다. 보통 이미지는 1년, CSS/JS는 1년, HTML은 설정하지 않는 것이 권장됩니다.
8. 정리 및 다음 단계
오늘 배운 핵심을 정리합니다.
- 브라우저 캐시는 한 번 내려받은 파일을 로컬에 저장해 재방문 시 빠르게 로딩합니다.
- Cache-Control 헤더로 캐시 기간과 방식을 제어합니다.
- 이미지와 CSS/JS는 1년, HTML은 캐시하지 않는 것이 일반적입니다.
- 파일을 수정할 때는 캐시 버스팅으로 방문자가 새 파일을 받도록 합니다.
다음 글에서는 Gzip 압축으로 전송 데이터 크기를 줄이는 방법을 알아보겠습니다.