LEARN · ARTICLE
網站改版先上預覽站，手機效能顧在 90 分以上
作者：Rock Lee 實測日期：2026-11-09（Asia/Taipei）
為什麼寫這篇
網站改版最怕兩件事：一是改完直接上正式站，手機版才發現變慢或跑版；二是開了測試站卻忘了擋搜尋引擎，半成品被 Google 收錄，跟正式站搶同樣的內容。
這次 rocki.org 加了繁中教學區，版面改了兩輪。我們的規矩是：所有改動先上預覽站，手機效能分數達標、人看過，才上正式站。 這篇把設定、量測方法和中途掉分的經過完整記下來，數字都來自當天的實測報告。
實測環境
| 項目 | 實測值 |
|---|---|
| 網站 | rocki.org（Next.js 15.5.25） |
| 主機 | Vercel；本機 Vercel CLI 59.15.1、Node.js 24.22.1 |
| 預覽網址 | preview.rocki.org |
| 量測工具 | Lighthouse 手機模式（改版期 12.2.0；上線後 13.6.0） |
| 量測頁面 | /tw、/tw/learn、兩篇教學文 |
步驟
1. 開一個固定的預覽網址，並自動加 noindex
Vercel 每次部署都會給一個新的隨機網址，不好分享也不好記。我們在團隊層級設了一個固定別名 preview.rocki.org。它不是專案綁定的正式網域，所以正式部署不會動到它，只有我們主動執行 vercel alias set 時才會換。
接著在 vercel.json 放第一條規則：只要網址是 preview.rocki.org，回應就加上 X-Robots-Tag: noindex, nofollow。這樣預覽站永遠不會被收錄，也不用記得每次手動加。
2. 用腳本部署預覽，並確認別名真的換過去
預覽腳本做四件事：
vercel deploy（不加--prod），拿到這次的部署網址vercel alias set把 preview.rocki.org 指過去- 用
vercel inspect比對別名指到的部署編號，對不上就重試，最多 3 次 curl -I確認回應裡有 noindex
第 3 步是吃過虧才加的：10/22 以前的舊腳本把錯誤訊息藏起來，也不檢查別名，曾經「看起來成功、其實沒換」。
3. 先看懂預覽站的 SEO 分數為什麼低
在預覽站跑 Lighthouse，SEO 只有 66～69 分。點開扣分項只有一個：「Page is blocked from indexing」，來源就是我們自己加的 noindex。這是預期的，不用修；但要記得，預覽站的 SEO 分數不能拿來判斷正式站。
4. 改版後量效能，發現掉分
第一輪改版（R3）加了大張封面卡片，看起來豐富多了，但手機效能掉了：
- 教學列表 89 → 84
- 向量教學篇 90 → 89
- Antigravity 篇 94 → 87
教學列表的 LCP（畫面中主要內容出現的時間）從 3.1 秒變成 3.8 秒。我們推測是封面大圖成了頁面上「最大的內容」，它載得慢，分數就掉。
5. 針對大圖修，而且跑三次取中位數
第二輪（R4）不拿掉封面，改成讓它「載得聰明」：
- 每張封面另外輸出 480 和 800 寬的 WebP，用
srcset／sizes讓手機只拿小張 - 第一張封面
preload加fetchpriority="high"，搶先載；後面的封面loading="lazy"，捲到才載 - 首屏不做捲動淡入動畫，避免主要內容晚出現
- 網頁字型只留用得到的字重
- 封面固定 16:9 比例，載入時版面不會跳
Lighthouse 的分數單次會晃。所以每頁跑 3 次、取中位數：
| 頁面 | 三次效能分數 | 中位數 |
|---|---|---|
| /tw 首頁 | 91、92、93 | 92 |
| /tw/learn | 93、89、92 | 92 |
| 向量篇 | 90、95、89 | 90 |
| Antigravity 篇 | 90、94、91 | 91 |
注意教學列表和向量篇都有一次低於 90。如果只跑一次，剛好抽到 89，就會誤判沒達標；反過來抽到 95 也會太樂觀。
6. 上正式站前記下「退路」，上線後立刻驗收
2026-11-09 17:00 上正式站。上線前先記下當時正式站的部署編號，萬一出事可以切回舊版。上線後馬上驗收：
- 13 個重要網址都是 200，而且沒有 noindex
- 測試用的假文章回 404
- sitemap 148 個網址，非 200 的 0 個
結果
上線後，我用 Lighthouse 13.6.0 手機模式在正式站 rocki.org/tw/learn 跑了 3 次：效能 95、95、95，無障礙 96，最佳做法 96，SEO 100，LCP 2.8 秒，CLS 0。SEO 從預覽站的 69 變 100，正好說明預覽站的低分只是 noindex 造成的。
但要老實說：改版期用的是 Lighthouse 12.2.0，上線後是 13.6.0，版本不同，不能把 92 → 95 解讀成「又進步了」。比較前後時，要用同一個版本、同樣設定。
還沒解決的：無障礙扣在文字顏色對比不夠；最佳做法扣在主控台有一個「資源 404」錯誤，還沒追是哪個檔案。文章頁的 CLS 0.028，我們推測是字型替換造成的，仍在良好範圍內。
踩坑紀錄
- 別名默默沒換。 部署成功不代表預覽網址指到新版本，一定要比對部署編號。
- 拿預覽站的 SEO 分數嚇自己。 noindex 一定會扣 is-crawlable，看扣分原因再判斷。
- 只跑一次 Lighthouse。 同一頁三次可以差到 6 分（向量篇 89～95），單次結果不可靠。
- 為了好看放大圖，卻沒處理載入順序。 大封面本身沒錯，錯在手機也下載大張、而且沒有優先順序。
- 跨版本比較分數。 12.2 跟 13.6 的結果放在一起比，會得到錯的結論。
- 上線前沒記退路。 舊版部署編號要在上線「之前」記，出事時才不用慌著找。
常見問題
Q1：一定要固定預覽網址嗎？用 Vercel 每次給的網址不行嗎？ 可以，但每次網址都不同，不好分享給人看，也不好寫成固定的檢查腳本。固定別名加 noindex 規則，管理起來簡單很多。
Q2：noindex 用 meta 標籤還是回應標頭？ 我們用回應標頭，因為一條規則就能涵蓋整個預覽網域，包含圖片、llms.txt 這類不是 HTML 的檔案。只用 meta 標籤的效果，這次未測。
Q3：為什麼是 90 分？ Lighthouse 把 90 以上標成綠色，我們拿它當自己的底線。這不是 Google 的排名門檻或 AdSense 條件。
Q4：Lighthouse 跑在自己電腦上準嗎？ 它是模擬手機和網路，數字會受電腦負載影響，所以我們跑三次取中位數，並記錄版本與時間。真實使用者的數據要看 Search Console 等工具，這篇未涵蓋。
複製這段給你的 AI agent
目標：替一個 Vercel 上的網站做「預覽部署＋手機效能量測」，只動預覽，不碰正式站。 前提與禁止事項： - 只使用已登入的 Vercel CLI；不要讀取、印出或寫入任何 token、.env、憑證檔。 - 禁止執行 vercel deploy --prod、vercel promote、vercel rollback，或任何改變正式網域的指令。 - 不要 git push、不要刪檔、不要改 DNS。 步驟： 1. 確認 vercel.json 對預覽網域有 X-Robots-Tag: noindex 規則；沒有就停下來回報，不要自行加入正式設定。 2. 執行 vercel deploy（不加 --prod），記下部署網址與部署編號。 3. 若有固定預覽網址：vercel alias set <部署網址> <預覽網址>，再用 vercel inspect <預覽網址> 確認部署編號一致。 4. curl -sI <預覽網址>，確認回應有 x-robots-tag: noindex。 5. 對指定的每個頁面，用 Lighthouse 手機模式各跑 3 次（記錄 Lighthouse 版本），回報每次與中位數的效能、無障礙、最佳做法、SEO，以及 LCP、CLS。 6. 列出效能中位數低於 90 的頁面，附 Lighthouse 指出的主要扣分項。 驗收：預覽網址有 noindex、部署編號比對一致、每頁 3 次分數與中位數齊全；回報中沒有任何金鑰或帳號字串。