前端性能優化提示詞：Core Web Vitals 逐項排查（LCP 最大內容繪製、CLS 佈局偏移、INP 交互響應）
網頁打開慢、加載時內容跳動、點擊按鈕反應遲鈍，或者 PageSpeed Insights / Lighthouse 分數低時用：把檢測報告和頁面資訊給 AI，它按 LCP、CLS、INP 三項指標分別定位原因，給出按收益排序的優化清單和對應代碼。
通用大模型 對話模型通用
你是一名前端性能優化專家，熟悉 Core Web Vitals 各項指標的含義與優化方法。請幫我分析並優化頁面性能。 - 頁面類型與技術棧：[頁面類型與技術棧]（例：電商商品詳情頁，Next.js + 圖片 CDN） - 檢測報告（PageSpeed Insights、Lighthouse 或瀏覽器性能面板的關鍵數據與診斷項，原樣粘貼）： [粘貼報告] - 主要用戶的裝置與網絡：[如國內移動端、中低端安卓手機為主] - 頁面關鍵代碼（首屏結構、圖片與字體的加載方式、第三方腳本列表）： [粘貼代碼] 分析要求： 1. 先區分實驗室數據（單次模擬測試）和真實用戶數據（如果報告中有），說明兩者不一致時以哪個為準。 2. 按指標逐項分析，只分析報告中實際偏差的指標： - LCP：找出 LCP 元素是什麼；按「伺服器響應時間 → 資源加載延遲 → 資源加載耗時 → 渲染延遲」四段拆解耗時瓶頸；常見手段如首屏大圖優先加載、預連接、不對首屏圖片懶加載、減少阻塞渲染的樣式和腳本、合適的圖片格式與尺寸； - CLS：找出發生偏移的元素；圖片與影片未設定尺寸、廣告與嵌入內容未預留空間、字體切換導致的文字重排、在已有內容上方動態插入內容； - INP：找出耗時長的交互；主線程上的長任務、事件處理中做了過多同步計算、一次性渲染大量節點、第三方腳本佔用主線程；手段如拆分長任務、讓出主線程、延遲非關鍵工作、虛擬列表。 3. 輸出優化清單：問題 | 影響的指標 | 預計收益（高 / 中 / 低）| 改動成本 | 具體做法。按「收益高、成本低」優先排序。 4. 對排名前 3 的優化給出代碼示例。 5. 驗證方法：優化後如何對比（在相同條件下多次測試取中位數），以及如何在線上持續採集真實用戶的指標。 報告中沒有的數據不要編造；需要更多資訊時，告訴我在瀏覽器性能面板中具體看什麼。
高亮處換成你自己的內容：[頁面類型與技術棧]、[粘貼報告]、[如國內移動端、中低端安卓手機為主]、[粘貼代碼]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[檢測報告] 盡量包含「診斷」部分的具體條目，比如「最大內容繪製元素」「避免長時間的主線程任務」等，AI 才能對症分析。[主要用戶的裝置與網絡] 很重要，用高性能電腦和千兆網絡測出的結果，和用戶在中低端手機上的體驗差別很大。
常見坑：
- 給所有圖片都加上懶加載，結果首屏的主圖也被延遲加載，LCP 反而變差。首屏關鍵圖片應該優先加載。
- 只盯着實驗室分數優化。單次模擬測試波動很大，真實用戶數據更能反映實際體驗，要在相同條件下多測幾次取中位數。
- 第三方腳本（統計、客服、廣告）往往是 INP 和加載性能的主要拖累，卻最容易被忽視。逐個評估是否必須、能否延遲加載。
追問技巧：優化一輪後，把新的報告貼回去，問「剩下的主要瓶頸是什麼」；也可以追問「寫一段代碼，在線上採集真實用戶的這三項指標並上報」。
示例輸出
示例，僅供參考（商品詳情頁，移動端，節選）
| 問題 | 指標 | 收益 | 成本 | 做法 |
|---|---|---|---|---|
| 首屏商品主圖被懶加載 | LCP | 高 | 低 | 去掉懶加載，加高優先級提示 |
| 商品圖未設定寬高 | CLS | 高 | 低 | 設定 width、height 或 aspect-ratio |
| 規格選擇時同步計算全部庫存組合 | INP | 中 | 中 | 預先計算或拆分為多個小任務 |
| 客服腳本在首屏同步加載 | LCP、INP | 中 | 低 | 改為頁面空閒後加載 |
html
<!-- 首屏主圖：不懶加載，高優先級，預留尺寸 -->
<img src="/p/1001-800.webp" width="800" height="800" fetchpriority="high" alt="商品主圖">同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～