mcmaster-fast 是做什麼的？
讓其他網站感覺像 mcmaster.com：首次繪製在數十毫秒內，下一頁在網址列更新前就完成。
技術堆疊不重要。McMaster 在 ASP.NET、YUI 和 ScriptCombiner 上做到這一點。順序和請求數量才是關鍵，框架潮流則不是。
他們實際的做法
從實際網站（2026-09-13）以及 Wes Bos 的拆解報告（klinke.studio 筆記）中觀察到：
| 層級 | McMaster 的做法 | 為何感覺即時 |
|---|---|---|
| 第一個位元組 | 伺服器渲染的 HTML。瀏覽器在 JS 之前即繪製。熱外殼下 FCP ~64ms，TTFB ~19ms。 | 使用者看到頁面，而不是等待套件載入的轉圈圈。 |
| 外殼 | #ShellLayout_Cntnr + #MainContent。Header/購物車保持掛載。使用 history.pushState。 | 點擊類別後，同一個 header 節點繼續使用，內容在 35ms 內交換。 |
| 預測 | 懸停/意圖在點擊前預先擷取下一個 HTML。 | 點擊變成快取命中 + DOM 交換。 |
| 重複造訪 | 服務工作者對 GET 導航（非 PDF）採用快取優先。首次載入後快取 /。 | 原始 HTML 約 ~200ms（mc-turn）；SW 在本機提供服務。 |
| 瀑布流 | 對圖片主機使用 dns-prefetch。對 woff2 字型、logo、LCP 精靈圖、頁面 JS/CSS、ShellDynamic.aspx 使用 preload。 | 瀏覽器在 CSS 中發現字型/LCP 之前就開始載入它們。 |
| CSS | 約 32KB 的通用 CSS 內嵌在 <head> 的 <style> 中。其餘透過頁面專用組合器載入。 | 首次版面配置不需要額外的 CSS 請求。 |
| JS | 頁面專用的 ScriptCombiner 套件（?files=…）。非同步。WebParts 在繪製後載入。 | 目錄頁面不會下載結帳程式碼。 |
| 資源 | 版本化網址（/mv1789156784/、?ver=）。Cache-Control: public,immutable,max-age=31536000。圖片主機 images1.mcmaster.com。網格使用的精靈圖。 | 長達一年的快取，無需失效處理，請求數量少。 |
| 穩定性 | 預留框/精靈圖。測得 CLS 0。 | 圖片到達時不會發生回流。 |
| 重量 | 第一方分析（/trk/）。無廣告。CSP 限制為 *.mcmaster.com。 | 頁面本身就是產品。 |
HTML 文件本身在 Akamai 上的快取設定為 Cache-Control: no-cache 和 x-check-cacheable: NO。不要 複製「CDN 快取所有 HTML」。他們在瀏覽器中快取外殼，並在邊緣節點快取不可變靜態檔案。
優先級階梯
在讓頁面在熱快取下 LCP 低於 ~200ms 的第一個階梯停止。不要在一個 PR 中同時安裝 Workbox、精靈圖管線和 Speculation Rules。
- 提供瀏覽器可直接繪製的 HTML。 SSR 或靜態 HTML。第一個畫面不要使用客戶端獨占渲染。移除建構第一個畫面的 JS。
- 解除首次繪製的阻塞。 僅內嵌首屏 CSS（或一個小型阻塞樣式表）。對 LCP 圖片和 woff2 字型使用
preload（加上crossorigin）。每個圖片都設定width/height（或 CSS aspect-ratio）。 - 不可變靜態檔案。 指紋碼或版本查詢參數。設定
Cache-Control: public, immutable, max-age=31536000。 - 持久化 chrome + 內容交換。 共享佈局。下一次導航只更換一個內容節點並執行
pushState。不要重新掛載 header。 - 意圖預先擷取。 在懸停/視口內推測下一個文件。設定上限。永遠不預先擷取結帳、搜尋 API 或需要認證的 HTML。
- 導航用 SW（選擇性）。 對公開外殼/首頁的 GET 導航使用快取優先。部署時清除。從頁面觸發失效，而不是仰賴聰明的 SW。如果網站主要是私有的，則跳過。
- 頁面專用 JS。 路由分割。將分析工具延遲到閒置時執行。刪除非產品核心的第三方標籤。
- 精靈圖/圖片主機 僅在單一畫面上有數十個小圖示時使用。低於這個數量時，HTTP/2 加上少量壓縮圖片就足夠了。
代理工作流程
當被要求以這種方式讓網站變快時：
- 追蹤實際的首次載入和一次應用內導航（網路 + 繪製內容）。指出目前阻擋 LCP 的元素和 JS。
- 套用最低的缺失階梯。每次迭代只做一個變更，除非使用者要求全面改進。
- 優先使用儲存庫中已有的平台功能（Next.js 的
<Link>、next/font、App Router 佈局），而不是新函式庫。 - 完成一次迭代後，留下一個檢查點：LCP / FCP 數值，或一個小型斷言，確認外殼節點在客戶端導航時被重複使用。
- 閱讀 techniques.md 以獲取您正在實作之階梯的具體配方。閱讀 recipes.md 以獲取 Next.js / vanilla / 現有 SPA 的對應實作。
硬規則
- HTML 是產品。JS 是選擇性增強。
- 預先擷取是一個提示，不是爬蟲。僅限同源 GET 文件。
- 個人化 HTML 應使用
no-store或僅限 SW 搭配短 TTL。絕不將購物車/帳戶 HTML 放在共用 CDN 快取上。 - 不要添加攔截每個資源的服務工作者。僅導航文件，比照 McMaster 的
ServiceWorkerJS.aspx。 - 不要複製 YUI、精靈圖或 ASP.NET。複製操作順序。
- 不要把一個快速的 HTML 頁面「現代化」成客戶端 SPA 當作解決方案。
- 第三方腳本（廣告、標籤管理工具、聊天）預設視為有罪。讓它們遠離首次繪製，否則直接刪除。
- 當您跳過一個較低價值的階梯時，使用
ponytail:標記捷徑。
完成條件
- 首次造訪：HTML 在任何應用程式套件執行前就繪製完成。LCP 是由伺服器傳送的元素，而不是客戶端渲染的。
- 下一次點擊：chrome 保持掛載；只有內容區域交換。
- 重複造訪首頁/外殼：從本機或記憶體快取提供服務。
- 字型和 LCP 圖片在前 1–2 次往返中載入，而不是在 CSS 之後才被發現。
- 您所處理的頁面上 CLS 保持在接近 0。