블로그 새로고침 느림, 캐시 걸었다가 404 에도 7일 캐시가 붙었다

2026.10.10 · 밥

휴대폰으로 블로그를 새로고침할 때마다 좀 굼뜨다 싶었다. 글 몇 편짜리 정적 사이트인데 느릴 게 뭐 있나 싶었다. 근데 헤더를 보니 눈에 들어오는 게 두 개 있었다. 그중 캐시 설정을 바꾼 뒤엔 썸네일이 깨지는 일까지 생겼다.

블로그 새로고침이 느리면 먼저 응답 헤더를 보자. 이 블로그는 CSS 같은 파일도 새로고침할 때마다 서버에 다시 물어보게 돼 있었고, 첫 화면 응답에는 LA 데이터센터 표시가 붙어 있었다. 파일 주소에 내용 해시를 붙이고 캐시를 걸면 다시 묻는 횟수를 줄일 수 있다. 다만 이 블로그에서는 없는 그림 주소의 404 응답에도 그 캐시 헤더가 붙어 있었다. 나는 7일로 잡았다가 썸네일이 깨진 걸 보고 1시간으로 줄였다.

블로그 새로고침 느림, 어디서 시간이 가나

curl 은 요청 시작부터 단계마다 걸린 시간을 찍을 수 있다. 연결 완료, TLS 완료, 첫 바이트까지. 첫 화면, CSS, 글 하나를 PC 에서 세 번씩 쟀다.

요청 시작부터 TCP 연결이 끝날 때까지 0.15~0.27초가 걸렸다. 첫 바이트까지는 0.46~0.84초. 한 번은 5.1초까지 튀었다. 첫 화면 헤더를 따로 열어 봤더니 CF-RAY 끝에 LAX 가 붙어 있었다. 그 응답은 Cloudflare 의 LA 데이터센터가 처리했다는 표시다. 왜 거기서 처리됐는지, 이 지연에 얼마나 들어가 있는지는 확인 못 했다.

두 번째가 Cache-Control: public, max-age=0, must-revalidate. 첫 화면도 CSS 도 이랬다. 브라우저가 파일을 갖고 있어도 쓰기 전에 매번 서버에 "이거 그대로야?" 하고 다시 확인하라는 뜻이다. PC 에서 curl 로 CSS 를 받아 보니 첫 바이트까지 0.50~0.84초였다. 브라우저가 다시 확인하는 데 걸리는 시간은 따로 안 쟀다. 그래도 파일을 쓰기 전에 매번 다시 확인하게 하는 설정이라, 캐시 시간부터 바꿔 보기로 했다.

Cloudflare 캐시 걸기, 주소에 해시부터

캐시를 길게 걸면 파일을 고쳤을 때 옛날 게 남는다. 그래서 주소를 바꾼다. 빌드할 때 파일 내용으로 해시를 만들어 style.css?v=a566590c4e 처럼 붙인다. 내용이 바뀌면 주소가 바뀌니까 옛 캐시는 그냥 안 쓰이게 된다.

캐시 시간은 Cloudflare 정적 자산의 _headers 파일로 정했다. Cloudflare 헤더 문서에 나오는 형식대로 빌드가 이런 파일을 만들게 했다.

/style.css
  Cache-Control: public, max-age=31536000, immutable
/img/*
  Cache-Control: public, max-age=604800

CSS 는 1년, 그림은 7일. 배포하고 헤더를 보니 잘 붙어 있었다. 여기까진 좋았다.

404 에도 붙은 7일 캐시

한 시간쯤 뒤에 휴대폰으로 첫 화면을 보는데 개발일지 10화 썸네일만 깨진 그림으로 나왔다. 내 PC 에서 그 썸네일 주소를 열어 보면 멀쩡히 200 이었다.

혹시 싶어서 없는 그림 주소를 하나 열어 봤다.

문서엔 404 얘기가 없는데, 재 보니 _headers 의 캐시 헤더가 404 응답에도 그대로 붙어 있었다. 그래서 의심한 건 이거다. 휴대폰이 어느 순간 그 썸네일 주소에서 404 를 한 번 받았고, 그게 7일짜리 캐시로 남은 게 아닐까. 깨진 순간의 응답 기록은 없어서 이건 추측이다.

그림 주소에도 해시, 캐시는 1시간으로

추측이 맞다면 같은 주소로는 계속 옛 404 를 볼 테니, 주소 자체를 바꾸는 게 낫다고 봤다. 본문 그림이랑 목록 썸네일 주소에도 내용 해시를 붙였다. 그리고 CSS, JS, 그림 캐시를 전부 1시간으로 줄였다. 이건 앞으로 새로 받는 응답 얘기다. 이미 7일짜리로 받아 둔 건 그대로라서 주소를 바꾸는 쪽이 먼저였다.

고친 뒤 PC 에서 첫 화면 썸네일 10개를 다 열어 보니 전부 새 주소로 200 이었다. 다른 없는 주소를 열어 보니 404 에 붙는 캐시도 max-age=3600 으로 바뀌어 있었다.

솔직히 휴대폰에서 체감 속도가 얼마나 빨라졌는지는 숫자로 못 쟀다. 고치기 전 숫자를 휴대폰에서 재 둔 게 없어서. 내가 확인한 건 헤더랑 응답 코드까지다. 캐시를 걸 땐 404 에도 붙는지 먼저 재 보고 시간을 정하는 게 맞았다.

다음엔 클릭 유도 문구를 빌드가 막게 만든 얘기를 하려고 한다. 애드센스 정책이랑 엮인 거다.