結論寫在最前面
首頁最大內容繪製從四點一秒降到一點六秒。
九個動作，總共省下兩秒五。花的時間是三十一小時，分四週做完。
三十天後跳出率從六成七降到五成一，詢問單從每月十九張升到二十八張。
省最多的是第一個動作，一個動作就省下九百四十毫秒。
動作一：把首頁的橫幅圖從三點二 MB 壓到兩百四十 KB
原本的橫幅是一張未壓縮的 PNG，寬度五千一百像素。
改成寬度一千九百像素的 WebP，品質設在八十。
省下九百四十毫秒。
這一張圖佔原本首頁總傳輸量的六成一。
動作二：字型從六個檔案減到兩個
原本載入三種字型，每種兩個字重。
實際用到的只有兩個。刪掉四個。
加上字型顯示的替換設定，讓文字先出現。
省下三百一十毫秒。
動作三：把第三方腳本延後
首頁載入了五支第三方腳本。聊天機器人、兩套分析、一支廣告像素、一支問卷工具。
聊天機器人改成使用者滑動之後才載入。
問卷工具移到只有服務頁載入。
省下四百六十毫秒。
動作四：圖片全部加上尺寸屬性
版面在載入過程中會跳動，是因為圖片沒有寫寬高。
十七張圖補上尺寸。
載入時間沒有變，版面位移分數從零點二八降到零點零三。
動作五：首屏的樣式內嵌
把首屏用到的樣式抽出來，直接寫進頁面。其餘樣式延後。
抽出來的部分是四點二 KB。
省下兩百三十毫秒。
動作六：關掉沒有用到的外掛
網站用的內容管理系統裝了二十三個外掛。
逐一停用測試，有六個對前台沒有任何影響。
停掉這六個之後，首頁的請求數從八十九降到六十四。
省下兩百八十毫秒。
動作七：開啟快取與壓縮
伺服器端開啟壓縮，靜態檔案設定快取時間。
第一次載入省下一百七十毫秒。第二次載入省下超過一秒。
動作八：影片改成點擊播放
首頁原本有一支自動播放的背景影片，四點七 MB。
改成一張截圖加播放按鈕，點了才載入影片。
省下六百八十毫秒。
這個改動被行銷主管反對過兩次。第三十天的數字說服了他。
動作九：字型與圖片改用預先連線
對放圖片與字型的網域加上預先連線。
省下九十毫秒。
九個動作省下的總和超過兩秒五，因為部分動作互相重疊。
兩個做了沒有效果的改法
第一個是把主機規格升一級。每月多付兩千四，載入時間差三十毫秒。降回去了。
第二個是換一套號稱更快的佈景主題。換完之後首屏是快了，但版面重排花掉兩週，三個頁面的表單壞掉。
主機與佈景主題不是第一順位。圖片、字型、第三方腳本才是。
三十天後的四個數字
跳出率從六成七降到五成一。
平均停留時間從四十七秒升到一分二十三秒。
每月詢問單從十九張升到二十八張。
搜尋引擎每日平均抓取頁數從一百四十一升到三百二十六。
第四個數字最少被注意。抓取頁數上升，新文章被收錄的時間從平均六天縮到兩天。
量測要用哪兩個工具
第一個是實驗室數據。改一個動作測一次，同一個網路環境，測三次取中位數。
第二個是真實使用者數據。實驗室的數字好看，實際使用者用四年前的手機。
兩個都要看。我們有一次實驗室的分數九十四，真實使用者的通過率只有三成八。
這件事要花多久
三十一小時，分成四週。
第一週三小時做量測與盤點。第二週十四小時處理圖片與字型。第三週九小時處理腳本與外掛。第四週五小時做驗收與重測。
不要在同一天改九個地方。改完一個測一次，才知道哪個有效。
開始之前先做的三張表
第一張表：首頁載入的每一個檔案，欄位是網址、類型、大小、來源。這個網站列出八十九列。
第二張表：八十九列裡標出哪些是自己的、哪些是第三方。第三方有二十七列。
第三張表：每一個第三方腳本對應的負責人與用途。有四支查不到誰裝的，也查不到用途。
那四支後來全部關掉。關掉之前先問過三個部門，等了六天沒有人反對。
圖片處理的四條規則
第一條：上傳前先確認實際顯示寬度。橫幅顯示寬度是一千兩百，就不要上傳五千一百。
第二條：照片用 WebP，品質八十。圖示用向量檔。
第三條：首屏以外的圖片一律延後載入。
第四條：每一張圖都要寫寬高與替代文字。替代文字寫圖片裡的內容，不要寫關鍵字。
這四條寫成一頁，交給客戶的行銷同仁。三個月後我們回頭抽查二十三張新上傳的圖，全部符合。
行銷主管反對兩次的那支影片
第一次反對的理由是首頁沒有動態會顯得單調。
第二次反對的理由是那支影片拍了十四萬。
我們的做法不是繼續說服，是給一個期限。改成點擊播放，跑三十天，數字不好就換回來。
三十天後，影片的實際播放次數是一千一百次，比自動播放時期的完整觀看數多。自動播放的時候，八成七的人在三秒內離開那個區塊。
那支十四萬的影片，改成點擊播放之後才真的被看。
移交給客戶的兩份文件
第一份是九個動作的清單，寫明每一項改了什麼檔案、在哪一行、省下多少毫秒。
第二份是每季一次的重測流程，五個步驟，二十分鐘跑完。
第二份是重點。網站會長胖。半年後我們回去看，首頁又多了兩支腳本與四張圖，時間回到兩點一秒。
客戶自己照流程跑一次，兩週後回到一點七秒。
重點整理
九個動作省下兩秒五，最大的一個是壓縮橫幅圖，省九百四十毫秒。
主機升級與換佈景主題是這次的兩個無效改法。
三十天後跳出率降十六個百分點，詢問單從十九張升到二十八張，抓取頁數翻倍。
延伸閱讀
要先做完的那一件事，寫在先收錢再做事：把付款順序倒過來的那一年，四組正反論點與帳上結果。
同一個題目的另一組數字，寫在第二輪面試的作業題：四十八小時交件，評分表上有十一格。
這件事的下一步怎麼接，寫在海外房地產說明會現場：三十個人進場，最後兩組成交。