什麼是 Leverage browser caching ?要如何提高這個分數?

什麼是瀏覽器快取?為什麼這個分數這麼低?

  • 當用戶訪問網頁時,瀏覽器快取將網頁資源文件存儲在本地計算機上。
  • 「Leverage」瀏覽器快取,就是告訴用戶的瀏覽器,如何快取你的網站上的資源。

當網頁瀏覽器顯示你的網頁時,它必須載入一些東西,比如你的 Logo,你的 CSS 文件和其他資源。

瀏覽器緩存所做的是「記住」瀏覽器已經加載的資源。當用戶轉到您網站上的另一個頁面時,你的 Logo,CSS 文件等不需要再下載一次,因為瀏覽器會將其「記住」(保存)。這也是為什麼網頁的第一頁通常比重複訪問的其他頁面要花費更多時間載入的原因。

當你開啟快取功能時,你的網頁文件將被存儲在瀏覽器中。你的網頁加載速度會變得要快得多,重複訪問者的頁面也會更快,其他頁面也會共享相同的資源。

如果你已經準備好提昇網頁速度,我們來說說如何開啟瀏覽器的快取:

如何 Leverage 瀏覽器快取

  1. 更改資源的請求標頭以使用快取。
  2. 優化您的緩存策略。

修改 .htaccess 來開啟快取

對於大多數人來說,啟用快取的方法是把一些 Code 添加到伺服器上的.htaccess 文件中。通常你可以在你的網站的根目錄找到 .htaccess 檔案,如果你找不到的話,可以檢查看看有可能是隱藏了。如果還是沒有,那麼: 1. 有可能你用的不是 Apache 2. 你用的不是 WordPress,所以預設沒有生成一個 .htaccess 檔案給你。你要自己新增一個。

.htaccess 文件控制您的網站的許多重要的事情。如果你對.htaccess 不是很熟悉的話,我正在寫另外一篇關於 .htaccess 的文章,但是要等我一下...

瀏覽器緩存為.htaccess

下面的代碼告訴瀏覽器要緩存什麼,以及要緩存多久。它應該被添加到.htaccess 文件的頂部。

## EXPIRES CACHING ##

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 text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

## EXPIRES CACHING ##

如何為不同的文件類型設置不同的緩存時間

你可以在上面的代碼中看到有「1 年」或「1 個月」的時間區段。這些都與文件類型相關聯,例如上面的代碼指出一個.jpg 的圖片,應該被快取一年。

如果你覺得你網站中的文章常常換圖、或是你經常要修改你的 js 檔案,假設一年對你的文章來說太長了,那麼你可以隨意的把「1 年」替換成「1 個月」,或是任意一個數值。但大部分情況下,上面那段代碼的值基本上符合大多數的 WordPress 站長使用。

.htaccess 的替代緩存方法

上述方法被稱為「expires」,它適用於大多數使用 .htaccess 的網站,也因此他是新手入門快取的最好的方式。在你更熟悉快取的原理之後,你或許會有要對快取有更多的控制權,這個時候我們可以試試看 Cache-Control  的方式,可為我們提供更多選擇。另外一個原因也有可能 expires 方法不適用於你的伺服器,在這種情況下你可以試試看使用 Cache-Control。我們會在另外一篇文章說明 Cache-Control 的用法。