PageSpeedInsights 효율적인 캐시 정책을 사용하여 정적인 애셋 제공하기

페이지 스피드 인사이트로 블로그 성능을 측정한 결과 ‘효율적인 캐시 정책을 사용하여 정적인 애셋 제공하기’ 항목이 진단 되었다. 이 문제를 수정하여 SEO(검색엔진최적화)를 개선해 보자.

원인분석

페이지 스피드 인사이트 메시지를 보면 WEBP와 JS, CSS 파일의 캐시 TTL이 None으로 설정이 되어 있지 않다. 이로 인해 해당 문제가 발생한 것으로 보인다.

문제가 발생한 페이지를 크롬의 개발자 도구에서 이미지 중 하나를 선택해서 확인해 보니 응답 헤더에 cache값이 없다. 네이버 사이트를 확인해보니 cache값이 찍혀서 표시된다. 워드프레스에서 캐시 플러그인을 사용하고 있었기 때문에 간과했던 부분인데, 별도로 캐시 설정을 진행해야 한다.

.htaccess 파일

캐시 정책을 설정을 하려면 웹사이트 루트에 존재하는 .htaccess 파일에 정적 캐시 설정을 추가해야 한다. .htaccess 파일의 수정은 일부 워드프레스 플러그인에서도 가능하지만 수정이 잘못될 경우 블로그(사이트)가 먹통이 되는 사고가 발생하게 된다. 따라서 이러한 문제를 방지하기 위해, 작업 전에 FTP(또는 유사한 환경)로 .htaccess 파일을 백업해 두어야 하며, 문제 발생 시 복원할 수 있어야 한다.

정적 캐시 설정 적용하여 해결

이제 정적 캐시 설정을 .htaccess에 적용하면 문제가 해결된다. 이미지 파일과 폰트 파일은 변경이 잘 없으므로 1년으로, CSS와 JavaScript는 6개월(변경이 많다면 1개월, 1일…), PDF나 동영상은 6개월, HTML 파일은 즉시 갱신되도록 설정하였다. 해당 내용에서 원하는 경우 파일 타입을 추가하거나 캐시 TTL을 변경하여 사용하면 된다.

<IfModule mod_expires.c>
  ExpiresActive On
  
  # 이미지 파일 - 1년 캐시
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # 폰트 파일 - 1년 캐시
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"

  # CSS & JavaScript - 6개월 캐시
  ExpiresByType text/css "access plus 6 months"
  ExpiresByType text/javascript "access plus 6 months"
  ExpiresByType application/javascript "access plus 6 months"
  
  # PDF & 동영상 - 6개월 캐시
  ExpiresByType application/pdf "access plus 6 months"
  ExpiresByType video/mp4 "access plus 6 months"
  ExpiresByType video/webm "access plus 6 months"

  # HTML - 즉시 갱신 (캐시 비활성화)
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(webp|jpg|jpeg|png|gif|svg|webp|ico|woff|woff2|ttf|eot|otf)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>

  <FilesMatch "\.(css|js)$">
    Header set Cache-Control "public, max-age=15768000"
  </FilesMatch>

  <FilesMatch "\.(pdf|mp4|webm)$">
    Header set Cache-Control "public, max-age=15768000"
  </FilesMatch>

  <FilesMatch "\.(html|php)$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
  </FilesMatch>
</IfModule>

마치며

페이지 스피드 인사이트의 ‘효율적인 캐시 정책을 사용하여 정적인 애셋 제공하기’ 문제는 .htaccess에서 캐시 정책을 적용하면 문제점이 해결된다. 단 앞서 말한 대로 .htaccess 파일을 잘못 수정하면 사이트가 손상될 수 있으므로, 주의해서 수정 해야 한다.