「手機三秒打不開，客人就跑了。」這句話你一定聽過。說得沒錯，但我想先讓你放心一點：其實大部分的網站，手機都打得開。真正讓人緊張的，常常是那個測速分數。
先把分數看懂，不要被嚇到
很多人拿 pagespeed.web.dev 一測，手機版跳出一個紅色的數字，就覺得網站完蛋了。
要知道，這個工具用的是很嚴苛的測試標準：它模擬的是比較慢的手機、比較慢的網路。你自己拿手機開，常常一兩秒就出來了，跟分數看起來的感覺差很多。
我的經驗是：手機能過 50、電腦拿到 90 分左右，對 SEO 的影響其實還好。分數不是越高越賺錢，重點是客人實際打開時順不順，還有有沒有明顯拖慢的地方。
所以與其追分數，不如把真正拖慢的原因找出來，一個一個處理。
我們實際處理過的速度問題
下面這些，都是我們這陣子在自己做的網站上真的動手改過的，不是網路上抄來的清單。
1. 中文字型太大
中文字型動不動就是好幾 MB，因為中文字有上萬個。網站想用有質感的字型，又不想讓客人等，就要處理。
我們的做法是字型子集化：只把頁面真的用到的字切出來。飛碟私塾把中文字型依字元範圍切成好幾塊，用到哪塊才下載哪塊；ocash 先預載首屏標題會用到的那一小份字，完整字型等客人第一次互動、或載入後幾秒再補上，避免一開始就因為換字型讓畫面重畫。伊瓦官網的標題字型也是只放用到的字。
2. 圖片格式和尺寸
最常見的就是手機上載了一張電腦尺寸的大圖。
我們把圖片改成 WebP 或 AVIF 這類比較輕的格式，並且依螢幕準備不同尺寸：大飛談直銷的首頁主視覺，就準備了好幾種寬度，手機還另外有直式裁切，瀏覽器會挑適合的那張。ocash 的商品縮圖改成 WebP、logo 也重新壓縮過。
3. 首屏最重要的東西先出來
客人打開第一眼看到的那塊，決定他覺得快不快。
伊瓦官網的網站設計頁，我們把首屏的大圖設成預先載入；手機版則改成文字先出來，圖片在後面，讓客人一打開就有東西可以讀。飛碟私塾的二手球列表，第一顆球的照片會優先載入。
4. 版面跳來跳去
你一定遇過：正要點按鈕，上面突然冒出一張圖，整個畫面往下掉，結果點錯。這叫版面跳動。
處理方式是先把位置留好。飛碟私塾的購物車和二手球列表，我們都先預留高度，資料載進來的時候畫面不會亂跳。
5. 追蹤碼和影片延後載入
網站常會裝 Google Analytics、行為分析工具、嵌入影片，這些都是外部的程式，一起擠在開頭就會拖慢。
伊瓦官網的做法是：GA 等頁面載完、瀏覽器有空再載；行為分析工具更晚，等訪客第一次捲動或點擊才載。大飛談直銷裡的 Facebook 影片，先放一張本機的封面圖，客人按下去才真的載入播放器。伊瓦的短影片也是捲到畫面裡才開始播。
6. 快取設好
同一個客人看第二頁、第二次回來，圖片和字型不該再下載一次。
我們會針對圖片、字型、影片分別設定快取時間，字型這種不太會變的就放長一點。ocash 的靜態資源也做了快取設定。
速度是基本功，不是比賽
網站快，是讓客人願意留下來讀你的內容。分數只是幫你找問題的工具。
所以我們做網站的時候，每一款都會附上實測分數給你看，有問題就在交件前處理掉，而不是做完才發現手機卡卡的。
如果你現在的網站讓你覺得慢，先別急著重做，很多時候是上面幾個地方沒處理好，改完就差很多。