前端效能分析與優化指令
一句話結論找出網頁載入瓶頸並產出優先修復的效能改善清單。
指令介紹
網頁速度慢，SEO 排名掉、用戶跳離率高，但 Lighthouse 報告看不懂要從哪改起。這組指令會解析你的效能指標與頁面特徵，找出最高優先級的瓶頸，產出具體可執行的改善清單，包含圖片優化、JS 拆分、快取策略與 Core Web Vitals 改善方案，讓你優先處理影響最大的問題。
適用情境
Lighthouse 分析改善LCP/CLS 優化JS Bundle 瘦身Core Web Vitals 達標
懶人貼上・複製就能用
已填好範例複製就能直接用
▸ 想換成你自己的內容？點開填一填選填
AI 指令庫編輯的話
編輯實測指令按「影響程度排序加程式碼範例加預期改善幅度加監控」，效能優化有優先級不亂射。 這組「前端效能分析與優化指令」是 Prompts 編輯團隊實測整理的程式 AI 指令（Prompt），適合用 Claude、ChatGPT 執行。複製上方指令範本即可使用，免費、免註冊。
模型實測對照
瓶頸（依影響）：1 LCP 4.2s 超標，主因英雄圖未優先載入（High）→ 加 priority 屬性、改 WebP、next/image；2 TBT 800ms，JS 過大→ 動態 import 分割、移除未用套件（Bundle Analyzer）；3 CLS 0.25，圖片無尺寸設定→ 固定 width/height；4 第三方腳本阻塞→ next/script lazyOnload。目標：LCP < 2.5s, CLS < 0.1。監控：Vercel Speed Insights + Sentry Performance。
實測（Claude）：瓶頸加程式碼範例加預期改善加目標加監控，最可執行。
分析 Lighthouse 指標找出瓶頸並給改善方案。
實測（ChatGPT）：快速產出優化清單，適合快速行動。
為這個指令評分
常見問題
Vue 或 Nuxt 也適用嗎？
適用，在技術棧欄填入框架，優化方案會對應調整。
沒有 Lighthouse 數據怎麼辦？
描述症狀如「圖多載很慢」也能給方向，建議補跑 Lighthouse 更準確。
相關指令
猜你喜歡
每週 5 組最新台灣 AI 指令，寄到你信箱
免費訂閱電子報，第一時間收到新指令與實測心得；現在訂閱立即領取「50 組必備 AI 指令懶人包」。
訂閱成功！懶人包連結已寄到你的信箱，請收信。
不寄垃圾信，隨時可取消訂閱。