【儀表板效能】用開發者工具量出「到底是哪裡慢」，再一項一項修

charles

這篇的內容（6 段）

1. 做完這篇你會有什麼
2. 11-1 資料庫太大
3. 11-2 有裝置在狂回報
4. 11-3 網路
5. 第十二步：瀏覽器本身
6. 最後一個心得

儀表板開起來要等三秒的時候，大部分人是憑感覺猜原因，然後亂砍一通。這篇教你量。

先量出數字、判定是哪一個原因、改掉、再量一次確認真的有差 —— 每一步都有明確的判準。

每一步都有「你會看到什麼」。做完第三步能自己確認第三步成功了，才走第四步。



做完這篇你會有什麼

• 三個數字：LCP、傳輸量、請求數，以及它們各自代表什麼
  
• 一個決定性的測試，十秒內判斷問題出在前端還是後端 —— 方向搞錯的話後面全部白做
  
• 七個常見原因，每一個都附「怎麼確認是它」的實際操作
  
• 一份照順序做的優化清單
  

⚠ 先講一件事：不要在改之前就開始砍東西

「把 HACS 外掛砍掉一半」這種做法有時候真的會變快，但你不會知道是哪一個造成的，下次又慢的時候只能再砍一輪。

量一次的成本是兩分鐘，而且它會直接告訴你該動哪裡。

---

第一步：量基準線（改任何東西之前先做）

用電腦版的 Chrome 或 Edge。手機量不了，但手機慢的原因幾乎都跟電腦上量到的是同一個。

• 打開你覺得慢的那一頁
  
• 按 F12 開開發者工具
  
• 切到 網路 Network 分頁
  
• 把 停用快取 Disable cache 勾起來（這個勾不打的話量到的數字沒有意義，因為第二次開當然快）
  
• 按 Ctrl+Shift+R 重新整理
  
• 等到畫面完全畫好，看最下面那條狀態列
  

你會看到什麼：一行摘要，大致長這樣：

1. 87 requests   4.2 MB transferred   6.1 MB resources
2. Finish: 3.42 s   DOMContentLoaded: 0.89 s   Load: 2.11 s

複製代碼

把這三個數字抄下來：

• requests —— 瀏覽器總共去要了幾個檔案
  
• transferred —— 實際下載了多少資料
  
• Finish —— 全部要完花了多久
  

這三個數字本身沒有「及格線」，它們的用途是跟你改動之後的數字比較。所以現在只要抄下來就好。

真正有絕對標準的是下一步那個。

---

第二步：量 LCP（這個才有客觀門檻）

LCP（Largest Contentful Paint）的意思是「頁面上最大的那塊內容畫出來花了多久」，白話說就是使用者感覺到「頁面開好了」的時間點。

• 在開發者工具切到 效能 Performance 分頁
  
• 不用按錄製，它一打開就在量
  
• 回到 HA 那個分頁按 Ctrl+Shift+R，等畫面畫好
  
• 再切回 Performance 分頁
  

你會看到什麼：上方一塊「本機指標（Local metrics）」區域，列出 LCP 和 CLS，各自帶一個綠／橘／紅的評價；你在頁面上點過東西之後還會多出一個 INP。

門檻（這是有官方標準的，可以當硬指標）：

• LCP —— 2.5 秒以內是良好，2.5 到 4.0 秒待改善，超過 4.0 秒是不良
  
• INP（點下去到畫面有反應）—— 200 毫秒以內良好
  
• CLS（畫面有沒有亂跳）—— 0.1 以內良好
  

LCP 在綠色範圍 → 你的儀表板其實不慢，慢的感覺可能來自 INP（點了才卡）或是後端。跳到第四步。

LCP 超過 2.5 秒 → 往下走，我們要找出是哪一段慢。

小提醒：這是你這台電腦、你這條網路量出來的，不是真實使用者的統計。但對「我家的 HA 慢不慢」這個問題來說，這正是你要的答案。

---

第三步：錄一段，讓它直接告訴你問題在哪

Performance 面板改版之後多了一個 Insights 側邊欄，它會把原本要自己看波形圖才看得出來的東西直接列成清單。

• 還在 效能 Performance 分頁
  
• 按左上角那個重新整理圖示的錄製按鈕（它會自動重新載入頁面並錄製，不是圓點那顆）
  
• 等它自己停下來
  
• 看左邊的 Insights 側邊欄
  

你會看到什麼：一串檢查項目，沒通過的各自展開成一個區段，通過的會被收合在最下面的「Passed insights」裡。

最該看的是 LCP by phase，它把 LCP 那 2.5 秒拆成四段：

以下還有約 80% 的內容
登入後即可閱讀完整教學

登入繼續閱讀使用 Google 登入