CSS, JS 및 이미지에 만료 헤더를 설정하는 방법

38

최근에 firebug에서 pagespeed addon으로 웹 사이트를 분석했습니다. CSS, JS 및 이미지 파일에 만료를 설정하도록 제안했습니다.

어떻게해야하는지 궁금합니다.

— 쿨 카빈
소스

37

핵심 구성의 일부로 아래 지시문을 포함하도록 Apache 구성을 업데이트하십시오 .

# 
# associate .js with "text/javascript" type (if not present in mime.conf)
# 
AddType text/javascript .js

# 
# configure mod_expires
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_expires.html
# 
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
    ExpiresByType image/x-icon "access plus 2692000 seconds"
    ExpiresByType image/jpeg "access plus 2692000 seconds"
    ExpiresByType image/png "access plus 2692000 seconds"
    ExpiresByType image/gif "access plus 2692000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2692000 seconds"
    ExpiresByType text/css "access plus 2692000 seconds"
    ExpiresByType text/javascript "access plus 2692000 seconds"
    ExpiresByType application/x-javascript "access plus 2692000 seconds"
    ExpiresByType text/html "access plus 600 seconds"
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

# 
# configure mod_headers
# 
# URL: http://httpd.apache.org/docs/2.2/mod/mod_headers.html
# 
<IfModule mod_headers.c>
    <FilesMatch "\\.(ico|jpe?g|png|gif|swf|css|js)$">
        Header set Cache-Control "max-age=2692000, public"
    </FilesMatch>
    <FilesMatch "\\.(x?html?|php)$">
        Header set Cache-Control "max-age=600, private, must-revalidate"
    </FilesMatch>
    Header unset ETag
    Header unset Last-Modified
</IfModule>

— 존 콘데
소스

나는 내 htaccess로 파일에 배치 할 때 500 내부 서버 오류

— KoolKabin

Apache 설정은 위에 나열된 모든 옵션을 지원하지 않을 수 있습니다. 이 문제를 해결하기 위해이 답변을 곧 업데이트하겠습니다.

— John Conde

내 Drupal에는 www.example.com/misc/jquery.js?v=1.4.4 또는 www.example.com/sites/all/modules/nice_menus/css/nice_menus.css?mtu293과 같은 javascript / css 참조가 포함되어 있습니다. 이러한 파일에는 작동하지 않는 것 같습니다. 오늘부터 업데이트 되나요?

— AgA

2

@JohnConde 왜 헤더와 헤더가 모두 만료됩니까? 또한 이미지 또는 CSS를 업데이트 할 때 파일 이름을 바꿔야합니까? 또는 CSS 파일의 경우 버전 관리가 작동합니다. test.css? 123?

— riseagainst

14

이것을 htaccess에 넣을 수 있습니다.

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>

확장명 (ico, flv, jpg 등)을 가진 파일을 대상으로하고 Expires 헤더를 액세스 시간 (A)에 30 일 (2592000 초)로 설정합니다. 액세스 권한이 있으면 서버 수준에서 추가 할 수도 있습니다.

— 불만을 품은 염소
소스

2

호스트와 서버에 따라 다릅니다. 옵션 1) 서버를 제어하는 경우 웹 서버를 제어하지 않거나 응답을 사용하여 아파치에 만료 헤더를 추가하도록 아파치를 만들거나 images / js / css / etc를 서버로 설정하면 스크립트에서 이러한 헤더를 설정할 수 있습니다 그들을 서버

이 힌트는 권장되지만 절대적인 사실은 아닙니다. 웹 사이트 속도를 높이는 것보다 대역폭을 절약 할 수 있습니다. 따라서 귀하의 사이트에 대한 트래픽이 적은 경우 이에 대해 너무 걱정하지 마십시오.

— 일리안 일리 에프
소스

옵션 2가 있습니다. 스크립트에서 이러한 헤더를 어떻게 설정합니까? 스크립트는 PHP를 의미합니까?

— KoolKabin

stackoverflow.com/questions/2185449 / ... 를 확인할 수 있습니다. 이것은 파이썬 예제이지만 프로그래밍에 익숙하다면 아이디어를 얻을 것이라고 생각합니다. PHP에서는 headers ()를 사용해야합니다. 그러나이 경우 모든 "정적"파일은 스크립트를 통해 제공되어야하므로 CPU 할당량이 증가합니다. 이제 세 번째 옵션이 있습니다. 이 파일에는 CDN을 사용하십시오.

— Ilian Iliev

2

Lightspeed Web Server에서 설정이 만료 됨

관리 콘솔에 로그인 한 다음> 서버-> 일반-> 만료 설정-> 만료 유형별 만료

다음을 추가하십시오.

text/css=A604800, text/javascript=A604800, application/javascript=A604800, application/x-javascript=A604800, application/x-shockwave-flash=A604800, image/gif=A604800, image/jpg=A604800, image/jpeg=A604800, image/png=A604800, image/ico=A604800, image/icon=A604800

604800 은 만료 시간 (초)이며 168 시간 (7 일) 이후 필요에 적합해야합니다. 또한 Light Speed Server는 다음 줄을 추가해야하는 htaccess를 사용합니다.

ExpiresActive On

또는 관리 콘솔 액세스 권한이없는 경우 다음 .htaccess 파일을 시도하십시오.

  ExpiresByType image/png A604800
  ExpiresByType image/gif A604800
  ExpiresByType image/jpg A604800
  ExpiresByType image/jpeg A604800
  ExpiresByType text/javascript A604800
  ExpiresByType application/x-javascript A604800
  ExpiresByType text/css A604800

— 사이먼 헤이 터
소스