簡介

相信大家在測試網站速度（GTMetrix）的時候都有遇過以下問題 — Leverage Browser Caching（見下圖），這是其中一個會影響到網站速度的原因。以下小K會教大家如何解決 Leverage Browser Caching(瀏覽器快取） 的問題。我們先來了解一下Browser Caching(瀏覽器快取）是什麼吧。

 

 

1.Browser Caching（瀏覽器快取）是什麼？「Leverage」瀏覽器快取為何這麼重要？

 

當用戶訪問網頁的時候，瀏覽器快取會把網頁資源文件存儲在本地的計算機上。而「Leverage」瀏覽器快取便可以告訴用戶的瀏覽器要怎樣快取網站上的資源。

 

用戶訪問網頁的時候，必須要載入一些東西，包括：Javascript、CSS文件、圖片等等。如果用戶瀏覽網站上另一個頁面的時候，部分已經載入了的資料便不需要重新載入一次，這亦是為什麼第一次進入網站都會比之後訪問其他頁面花費更多時間來載入，不但節省流量，而且亦可以節省時間。

 

2.如何解決Leverage Browser Caching的問題呢？

 

i.為你的網頁加入Cache-Control (緩存控制)或Expires Headers

 

Cache-Control和Expires Headers有助為你的網站設定Cache-Control header

 

啟動客戶端的緩存並設定Max-age，如果把Max-age設定成31536000秒，也就是 365 天，只要你在一年之內造訪這個網站，都不會對特定快取送出 Request

 

Expires Headers

 

Cache 到期的時間

Cache-Control和Expires Headers二選其一則可，Cache-Control是一種較新的方法，亦較為常用，只需要在wordpress裡的.htaccess檔案中加入以下代碼：

 

<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$”>

Header set Cache-Control “max-age=84600, public”

不過，在GTmetrixhttps://gtmetrix.com/裡，Expires headers亦是一個較著重的評分點（如下圖）

如果有需要的話，可以在wordpress裡的.htaccess檔案中加入以下代碼：

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “access 1 year”

ExpiresByType image/gif “access 1 year”

ExpiresByType image/png “access 1 year”

ExpiresByType image/svg “access 1 year”

ExpiresByType text/css “access 1 month”

ExpiresByType application/pdf “access 1 month”

ExpiresByType application/javascript “access 1 month”

ExpiresByType application/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresByType image/x-icon “access 1 year”

ExpiresDefault “access 2 days”

</IfModule>

 

Expires Headers其實是 HTTP 1.0 已經存在的 Header；而Cache-Control則是從HTTP 1.1 才開始出現的，當然，如果覺得個人不太熟悉Coding，又不想自行修改檔案的話，有一個更快捷的方法：

 

ii.使用Leverage browser caching插件

 

來到外掛 → 安裝外掛 → 搜尋Leverage browser caching（如下圖）

 

或者可以在這裡下載ZIP檔案：自行安裝Leverage browser caching插件