案例 NOMU 旅宿

訂房頁面快到不需要載入動畫

把首屏從 4.1 秒壓到 0.8 秒。載入動畫不是被優化,是被刪掉了。

產業
旅宿
年份
2024
技術
邊緣渲染 · 圖片管線 · 效能預算

0.8s

最大內容繪製

課題

訂房首屏 4.1 秒。載入動畫做得很漂亮,那本身就是問題的證據 —— 沒有人會為一個 0.8 秒的頁面設計載入動畫。

限制

行銷部門每週要上新的活動頁,而且要能自己上。任何一個「以後每頁都要工程師檢查效能」的方案,第三週就會失效。

做法

設效能預算並接進 CI,圖片管線重做,訂房主流程改在邊緣渲染。超出預算的 PR 直接擋下,訊息寫清楚是哪一項、超了多少。

一個關鍵決定

把預算檢查放在合併之前,不是上線之後的監控。上線後才看到的數字,修的人已經在做下一件事了;合併前擋下來,修它的還是剛剛寫它的那個人。

取捨

行銷有兩次的活動頁因為圖片太大被擋下來,素材要重做,那兩次都有人不高興。但六個月後沒有人再提這件事,因為素材規格已經變成他們自己的習慣。

結果

LCP 0.8 秒,載入動畫被刪掉。行動端轉換率上升 22%。

之後

十四個月過去,效能預算一次都沒有被調鬆過。這是我們最看重的一個數字,雖然它不在任何一份報表上。