HTTP Cookie的限制與網站速度

作者：
cookie
cookie

有人遇到一個PHP問題，聽完他的描述後直覺認為是和該系統操作cookie的方式有關，懷疑該系統產生的的Cookie大小超過規範的限制。原以為瀏覽器會呈現Cookie容量過大的錯誤，但是打開瀏覽器的console卻看不到任何錯誤。當時，還誤以為是不是PHP在server端做了處理？

花了冤枉時間後，才知道是因為Firefox不會呈現Cookie超過限制的錯誤，但是Chrome會……昏倒……

下面範例，是使用PHP產生一個超過RFC規範大小的cookie
$value = str_pad("", 5000, "TEST-");
setcookie("TestCookie", $value);

測試環境，分別用以下版本瀏覽器執行上述程式進行測試，並說明結果
  • Firefox/65.0.1
    • 無法產生cookie，不會顯示任何錯誤
  • Chrome/72.0.3626.109
    • 無法產生cookie，會顯示以下錯誤 
    Set-Cookie header is ignored in response from url: http://www.test.com/. Cookie length should be less than or equal to 4096 characters.
Navigated to http://www.test.com/

Cookie的限制

究竟，Cookie的相關限制為何？節錄HTTP State Management Mechanism - Implementation Considerations - Limits的內容如下…
  • At least 4096 bytes per cookie (as measured by the sum of the length of the cookie's name, value, and attributes).
  • At least 50 cookies per domain.
  • At least 3000 cookies total.

Cookie為何會影響網站速度

最後提一下，使用Cookie要小心。除了資安上的議題，在某些情況下會嚴重影響網站速度。

很多開發者在使用Cookie時為了方便會將Cookie放在"/"(root)，或將資料放在Cookie內當作小型資料庫使用。這都不是好習慣。

就以往調教網站速度的案例中，就曾調整某網站Cookie使用方式，由原本放在"/"(root)改成指定Cookie存放路徑的方式，讓該網站在Google Analytics的網站速度明顯的提升。

如果您的網站很注重網站速度，不妨考慮減少Cookie用量、或依據目錄存放。甚至導入Cookie-less Domains /Cookie-less Domains。

不過…時至今日，無論是為了SEO、或轉換率，其實已經不可能忽略網站速度了…看看下面的文章吧～
  1. 最佳行動版網站風雲榜：大中華區報告，提到…
    1. 53%的消費者，在行動網站載入超過3秒就會離開
    2. 行動網頁載入每多1秒，轉換率就會下降20%
  2. Using page speed in mobile search ranking，提到…
    1. 2018/07開始，網頁速度已經是行動的排名因素之一（桌機為2010年開始）

Cookie-less Domains /Cookie-less Domains

為何要導入Cookie-less Domains /Cookie-less Domains呢？用下面兩張圖做模擬說明。
http-cookie-private
一開始cookie內容很少（使用隱私/無痕(private)模式模擬）

http-cookie
瀏覽網頁後，開始被塞入了cookie
之後，每個http request都要將這些cookie上傳到server端

第一張圖就是第一次瀏覽時的狀況，Cookie很少。但是隨者各種追蹤系統、或系統所需開始塞資料進入Cookie，慢慢的Cookie就變大了。 這些Cookie都會隨者網頁中每個http request送到server端…

假設Cookie的容量現在已經是1K，網頁中引用了圖、js、css共100個，此時你為了瀏覽該網頁，必須要先傳送(100+1)*1K的Cookie到server～

假如圖、js、css都移到Cookie-less Domains /Cookie-less Domains。只需要傳送(0+1)*1K的Cookie到server。這樣的改變，網頁速度自然就變快了…
註：使用後，也會有另一個好處，可參考-Performance Research, Part 4: Maximizing Parallel Downloads in the Carpool Lane

參考資料

留言

張貼留言