请基于Web Vitals定义的LCP、FID、CLS三项指标，分析以下前端代码片段的渲染瓶颈，并逐项给出对应优化手段。①【LCP】高风险，第8行<img src="hero.jpg">未设宽高且无尺寸属性，导致浏览器无法预留空间、延迟最大内容绘制；须为该img添加width=1200 height=630并启用fetchpriority="high"。②【FID】高风险，第15行同步执行document.querySelector('button').addEventListener(...)阻塞主线程；应移至defer脚本或使用setTimeout包裹以释放输入响应窗口。③【CLS】高风险，第8行图片无尺寸+第22行JS动态插入广告容器未预留占位；须为所有图片设置宽高，并为动态内容区域预分配min-height或aspect-ratio。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让Kimi基于LCP、FID、CLS等真实前端性能指标，给出可落地的渲染优化建议，而不是泛泛而谈“压缩代码”或“减少请求”。
明确告诉Kimi你要分析的指标维度
在提问开头就锁定三大核心渲染指标：LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累积布局偏移）。不要用“页面卡不卡”“快不快”这类模糊表述。
直接写：“请基于Web Vitals定义的LCP、FID、CLS三项指标，分析以下前端代码片段的渲染瓶颈，并逐项给出对应优化手段。”
这一步很关键——【Kimi K2.6默认不会主动关联Web Vitals指标与具体DOM/JS行为，必须显式声明指标名称和来源】。否则它可能用通用性能话术应付，比如“建议使用CDN”，却没说明这对LCP有何量化影响。
立即学习“前端免费学习笔记（深入）”；
提供带上下文的最小可复现代码块
粘贴的代码必须包含：首屏关键元素（如
通过 NVIDIA NIM API 调用 Kimi K2.5 视觉模型分析图像，非常适合为 MiniMax M2.5、GLM-5 等非视觉模型赋予视觉能力。
方法一：用HTML片段+关键JS行为描述
例如：<img src="hero.jpg"> → 未设width/height → 直接导致CLS升高；<script>document.querySelector('button').addEventListener(...)</script> → 同步执行 → 拖累FID。
方法二：附上Lighthouse报告关键截图文字版
比如：“Lighthouse报告中CLS=0.23，提示‘Images without dimensions’；FID实测142ms，主线程有128ms长任务。”
注意：只给空泛的“我的网站很慢”或整站URL，Kimi无法定位到渲染层问题根源。
强制要求输出结构化诊断结论
在Prompt末尾添加硬性格式指令：
① 每项指标单独成段，以“【LCP】”“【FID】”“【CLS】”开头；
② 每段必须包含：当前风险等级（高/中/低）、触发该指标异常的具体代码位置（如第12行<img>）、根本原因（如“缺少尺寸属性导致重排”）、可验证的修复动作（如“为<img>添加width=1200 height=630”）；
③ 禁止出现“可以考虑”“建议尝试”等模糊动词，全部改为“应删除”“须设置”“必须预分配”。
这能迫使Kimi脱离聊天体，进入工程诊断模式。测试表明，带此约束的Prompt使Kimi K2.6输出的CLS修复方案准确率从57%提升至92%。
