Scroll to top

html 브라우저 캐시 초기화 방법


Jooy - 2017-10-21 - 2 comments

code

HTML 또는 PHP 코드로 브라우저 캐시를 초기화 할 수 있습니다.

사이트 방문자가 이전의 css, js 코드 또는 이미지를 사용할 경우 최신으로 반영된 사이트 콘텐츠를 반영하지 못할 수 있습니다. 따라서 중요한 페이지 업데이트가 있거나 자주 변경해주어야 하는 특정 페이지에 해당 내용을 적용하여 사용자가 번거롭게 브라우저 캐시를 지울 필요가 없게 됩니다.

주의해야 할 것은 캐시 초기화를 자주 하게 되면 서버에서 요청되는 리소스가 그만큼 늘어나기 때문에 정말 필요할 때만 사용해야 한다는 것입니다.

 

HTML 코드로 브라우저 캐시 초기화


아래 내용을 HTML 코드의 "<head>" 태그 내에 삽입합니다.

<meta http-equiv="Expires" content="Mon, 06 Jan 1990 00:00:01 GMT">
# 위의 명시된 날짜 이후가 되면 페이지가 캐싱되지 않습니다.
(따라서 위와 같은 날짜로 지정할 경우 페이지는 지속적으로 캐싱되지 않습니다.)
<meta http-equiv="Expires" content="-1">
# 캐시된 페이지가 만료되어 삭제되는 시간을 정의합니다. 특별한 경우가 아니면 -1로 설정합니다.
<meta http-equiv="Pragma" content="no-cache">
# 페이지 로드시마다 페이지를 캐싱하지 않습니다. (HTTP 1.0)
<meta http-equiv="Cache-Control" content="no-cache">
# 페이지 로드시마다 페이지를 캐싱하지 않습니다. (HTTP 1.1)

 

PHP 코드로 브라우저 캐시 초기화


아래 내용을 PHP 코드 내에 삽입합니다. HTTP 헤더에 위와 동일한 내용을 추가하는 내용입니다.

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

 

.htaccess 규칙 설정


서버 파일을 수정할 수 있다면 서버 내에 .htaccess (웹 개발 방법에 따라 이 파일이 없을 수 있습니다.) 파일을 수정하여 서버 접근에 대한 캐시 설정을 강제 조정할 수도 있습니다. 아래 내용을 추가/수정하여 관련된 파일의 메타 데이터를 입력한 뒤 해당 파일의 캐시 유효 기간을 "access plus * ###" 와 같이 설정할 수 있습니다. 예를 들어 text/css "access plus 3 hour" 이라면, css 파일이 3시간이 지난 경우 캐시 데이터를 삭제하고 다시 파일을 로드한다는 의미입니다.

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/cache-manifest "access plus 0 seconds"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 3 hour"
ExpiresByType image/gif "access plus 5 month"
ExpiresByType image/png "access plus 4 month"
ExpiresByType image/jpg "access plus 4 month"
ExpiresByType image/jpeg "access plus 4 month"
ExpiresByType text/x-component "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType text/css "access plus 3 month"
ExpiresByType application/javascript "access plus 3 month"
ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

Related posts

2 comments

  1. 정윤

    도움되는 정보 감사드립니다.
    문의드릴게 있어서 댓글 남겨요.
    정의시 날짜는 어떻게 정의해야는건가요?
    현재일을 등록하면 현재일기준으로 기존 캐시가 지워지는 건가요?

    • Joojy

      안녕하세요. 블로그에 방문해주셔서 감사합니다.
      '해당 코드에 명시된 날짜 이후'가 되면 페이지가 캐싱되지 않습니다.
      따라서 위와 같이 1990년도로 설정했다면 페이지는 지속적으로 캐싱되지 않습니다.

Post a Comment

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다