前端性能优化提示词：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 条评论
还没有评论，来抢沙发～