How do I set expiration headers for CSS, JS, and Images?

http://webmasters.stackexchange.com/questions/5265/how-do-i-set-expiration-headers-for-css-js-and-images

方法 1:
# 
# 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>

方法 2:

http://www.arefly.com/enable-website-cache-by-htaccess/ 

將下列代碼添加至網站根目錄的 .htaccess 文件中

#取消ETag功能

Header unset ETag

FileETag None

 

#設定檔案過期時間

<IfModule mod_expires.c>

#要設定的檔案類型

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|gz)$">

ExpiresActive On

#604800秒=1週

ExpiresDefault A604800

</FilesMatch>

</IfModule>

 

#設定檔案快取時間

<IfModule mod_headers.c>

#要設定的檔案類型

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|gz)$">

#604800秒=1週

Header set Cache-Control "max-age=604800, public"

</FilesMatch>

</IfModule>

 

#壓縮JS和CSS檔

<IfModule mod_deflate.c>

<FilesMatch ".(js|css)$">

SetOutputFilter DEFLATE

</FilesMatch>

</IfModule>

方法3：

http://zfly9.blogspot.tw/2014/01/htaccesscache.html

 使用.htaccess快取，提升網站速度

.htaccess 網頁 緩存 設定 設置 檢測教學


.htaccess 是 Apache HTTP Server 底下，對目錄及檔案的一個控制文件，也就是說web網頁伺服器，是用Apache HTTP Server這套軟體架設的，才能使用.htaccess。

.htaccess 能做的事很多，本篇主要是說明，如何用它來快取，提高網站速度。

其本原理：
像css js jpg png gif swf這些不常變更的檔案，在瀏覽器下載後，會附上過期時間，於下次下載前，會比對是否超過期限，如沒超過就不會下載，這樣可大幅提高網站瀏覽速度。

畢竟 圖檔 css js 也佔不少kb，重覆一直下載義意不大，而且會拖到網頁讀取時間，在能使用 .htaccess 來提速的情況下，還是設置一下，會比較好。

設置上也很簡單，開個文字檔，將下述代碼覆製貼上，由於windows，在命名時，是不接受沒有檔名的文件，所以先存成htaccess.txt，上傳至主機後，在用ftp更名為.htaccess即可。

如果根目錄下，已經有.htaccess文件，先下載回來，下述代碼copy貼至後面，存檔上傳覆蓋即可。

Header unset ETag
FileETag None

<ifmodule mod_expires.c>
<filesmatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>
</IfModule>

<ifmodule mod_headers.c>
<filesmatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>

htaccess.txt內容參考圖：





將htaccess.txt上傳至主機後，更名為.htaccess參考圖：

---

要怎麼查看是否有在運作，十分簡單easy，因為現今瀏覽器都有內建網站檢查工具，開來看一下就知道了，下述用firefox做範例：

工具 → 網頁開發者 → 網頁工具箱

---

如果http回傳值Date和Expires這之間的日期與你設的不同，Cache-Control的值也不同，原因有可能是：

ａ、不是使用Apache HTTP Server的主機，大部份跑php都是使用Apache，所以這問題不常見。

ｂ、主機沒安裝mod_expires.c及mod_headers.c這2個模組，之前見過有些空間商，為了讓客戶的流量好看，沒加載 mod_expires.c、mod_headers.c此2模組，結果它的站用的花花綠綠圖片一堆，網頁開了有點慢，這時你可以反應，請他們掛上 mod_expires.c、mod_headers.c，如果沒辦法處理，那就自已換別的主機代理商。


大致說明就這樣了，未來如有什麼要補充的，到時在補上。


相關文章 → .htaccess 防盜連 轉址 用法