讓網站快一次很容易。難的是在持續增加功能的同時維持速度：每個新元件、新字型或新函式庫都會讓頁面變重一點，直到網站明顯變慢才有人發現。所以我們不再把速度當成一次性的稽核，而是把它變成每次變更都必須通過的測試。
起點
我們第一次認真量測這個網站時，頁面在載入過程中版面會跳動（Cumulative Layout Shift約0.2），在限速的行動網路下，主要內容要4到6秒才出現。主樣式表壓縮後有41 KB，主因是給管理區使用的元件和驗證程式碼也一起送給了訪客。
我們改了什麼
- 訪客只拿到訪客需要的程式碼。 管理介面元件庫和表單驗證函式庫不再進入公開網站。有一項測試會走遍網站的import，只要其中任何一個又混進來就會失敗。
- 只為頁面上實際存在的內容提供CSS。 主樣式表從296 KB減到98 KB，壓縮後只有16 KB。
- 不會讓版面位移的字型。 關鍵字型會預先載入，頁面也不再預先擷取可能永遠用不到的程式碼。
守住成果的測試
每個拉取請求都會讓CI建置網站，以和正式環境相同的方式提供服務（HTTP/2、TLS、壓縮），並在四個關鍵頁面上各執行三次Lighthouse，取中位數。預算標準是：每項分數至少95，最大內容在2秒內顯示，版面位移低於0.1，主執行緒阻塞低於200 ms。只要某次變更超出預算，CI就會變紅，該變更也無法合併。同時還會執行無障礙檢查，目前在涵蓋的頁面上沒有發現任何WCAG AA違規。
結果
在CI中，各頁面在Lighthouse四個類別都拿到100分，主要內容在1秒內顯示。在正式網站上，首頁分數100，主要內容約1.2秒顯示，商品頁分數98。
我們也坦白說明還不完美的地方：日文及其他CJK語言的頁面比較慢，因為這些字型大得多。這個問題已另外立案處理。
這對您的意義
慢的頁面會在訪客讀到第一個字之前就把人流失掉，搜尋引擎也會注意到。如果您和我們合作打造到達頁面或網路商店，這套效能預算會一併提供。它是我們工作方式的一部分，而不是額外加購。