WordPress終極優化指南–給靜態資源添加瀏覽器緩存過期時間

2019-01-15 Comments 0 Comment

網頁節省帶寬以及減少加載時間的方式之一就是緩存靜態資源，靜態資源是指一些圖片、css文件和其他的一些不經常修改的內容。

當用戶訪問網頁時，會下載很多靜態資源。如果我們設置了緩存，下次訪客訪問時就會直接從本地讀取這些靜態資源。從而大幅度提高加載速度。

靜態資源緩存通常通過添加expire頭來實現。這會給你的靜態資源添加時間戳，高速瀏覽器，此靜態資源多少多少時間內不會更改

瀏覽器再次訪問時就會檢查文件的過期時間標頭來確定是否需要重新下載靜態資源。

通過配置緩存過期標頭可以大量節省服務器帶寬和服務器計算資源。

<IfModule mod_expires.c> #If mod_expires is installed
  ExpiresActive on

  ExpiresDefault "access plus 1 month"

  ExpiresByType text/cache-manifest "access plus 0 seconds"

  # Your html
  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"

  # Rss Feeds
  ExpiresByType application/rss+xml "access plus 1 hour"
  ExpiresByType application/atom+xml "access plus 1 hour"

  # Favicon 
  ExpiresByType image/x-icon "access plus 1 week"

  # Media: images, video, audio
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"

  # HTC files (css3pie)
  ExpiresByType text/x-component "access plus 1 month"

  # Don't forget Webfonts!
  ExpiresByType application/x-font-ttf "access plus 1 month"
  ExpiresByType font/opentype "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
  ExpiresByType application/x-font-woff2 "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

  # CSS and JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
</IfModule> #End if

將以上內容複製粘貼進.htaccess內即可。

我們也可以通過插件W3 Total Cache來實現，使用插件跟上面的工作原理相同。

W3 Total Cache設置可以參考下圖來設置。

常規設置