非开发者用Cursor(AI)基于Astro建站，Core Web Vitals问题修复异常求助

• 优先回滚恢复原有功能
  若使用Git版本控制，执行git reset --hard HEAD~1回退到修复前的提交版本，或用git restore .撤销本地修改，先确保网站布局、交互功能完全正常，再重新处理性能问题。

• 拆分性能问题逐个修复
  Google Page Speed Insights的Core Web Vitals问题分为LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累积布局偏移）三类，不要一次性提交所有问题给AI处理。每次只聚焦一类问题修复，验证网站正常后再推进下一类。

• 针对Astro框架的性能优化细节

  • 图片优化：替换原生<img>为Astro内置<Image>组件，自动生成适配多设备的WebP/AVIF格式图片，同时指定固定宽高避免CLS问题。
  • 客户端组件延迟加载：对非首屏的交互组件添加client:lazy指令，减少初始加载的脚本体积。
  • 冗余资源清理：检查并移除未使用的第三方CSS/JS，启用Astro的自动CSS代码分割功能，避免不必要的资源加载。

• 修复后即时双重验证
  每次修改后，先通过npm run dev在本地遍历所有页面，确认布局、交互无异常；再重新运行Page Speed Insights检测，验证目标性能问题已解决且未引入新问题，再进行下一轮修复。

• 给AI明确的修复约束
  下次向Cursor提交修复需求时，明确补充约束：「仅针对指定的Core Web Vitals问题做性能优化，不得修改网站现有布局、交互逻辑及页面内容」，避免AI过度修改导致功能损坏。

内容的提问来源于stack exchange，提问作者Super Bear Adventure