Optimize

/impeccable optimize

适用场景

• 介面感覺緩慢、卡頓或沉重。
• 你需要在不掏空設計的情況下降低成本。
• 效能現在已成為可見的產品問題。

何時使用

/impeccable optimize 適用於感覺緩慢的介面。首次繪製花費太久、捲動卡頓、圖片晚出、互動感覺遲鈍、套件配送了 800KB 的 JavaScript。當 Core Web Vitals 很差或使用者抱怨東西很慢時使用。

不要將它用作過早的最佳化。如果 LCP 是 1.1s 且 INP 是 80ms，停止。設計工作更重要。

運作方式

技能從五個效能維度進行處理：

1. 載入和 Web Vitals：LCP、INP、CLS。識別什麼阻擋了首次繪製、什麼延遲了互動、什麼造成了版面位移。
2. 渲染：不必要的重新渲染、缺少 memoization、高成本的 reconciliation、迴圈中的版面配置抖動。
3. 動畫：是否有任何東西在對版面屬性做動畫，是否只有 transform 和 opacity 被觸碰，will-change 在這裡是幫助還是傷害。
4. 圖片和資產：延遲載入、響應式圖片（srcset、sizes）、現代格式（WebP、AVIF）、設定的尺寸以防止 CLS。
5. 套件體積：未使用的 import、過大的依賴、缺少的程式碼分割、死碼。

技能會在修改前後測量。每個修復都被量化。如果一個變更沒有改善指標，它會被撤銷。

試試看

/impeccable optimize the homepage

預期格式：

LCP: 3.2s → 1.4s
  - Hero image preloaded (-800ms)
  - Removed render-blocking font stylesheet (-240ms)
  - Deferred analytics script (-180ms)

INP: 240ms → 90ms
  - Debounced scroll handler
  - Memoized expensive list render
  - Removed synchronous layout read in event loop

CLS: 0.18 → 0.02
  - Set dimensions on hero image and logo
  - Reserved space for async header badge

Bundle: 340KB → 180KB
  - Removed unused lodash import (52KB)
  - Code-split the playground route (78KB)
  - Dropped deprecated icon set (30KB)

注意事項

• 在測量之前最佳化。 沒有基線指標，你無法判斷什麼有幫助。用具體的 Web Vitals 數字執行 /impeccable optimize，而不是感覺。
• 追逐微小的收益。 一個花一週時間的 20ms INP 改善很少值得。Optimize 有邊際效益遞減；知道何時停止。
• 忘記在每次變更後重新測量。 建構可能以技能未預期的方式讓事情變得更糟。驗證。

相关命令

• Audit
• Harden
• Animate