AI建站生成的网页加载太慢，前端性能怎么优化？

学完这篇，你能按一套可复现的流程，把 AI 建站生成的网页从“三四秒打不开”优化到 LCP 2.5 秒以内，并知道每一步在哪个面板、哪个菜单里操作。

第一步：用 Lighthouse 量出慢在哪

这一步要拿到一份性能报告，知道是 LCP、TBT 还是 CLS 拖后腿。打开 Chrome 120 以上版本，按 F12，顶部标签选 Lighthouse，模式选 Navigation，设备选 Mobile，Categories 只勾 Performance，点 Analyze page load。等 30 秒左右，看 Metrics：LCP 目标小于 2.5s，TBT 小于 200ms，CLS 小于 0.1。下面的 Opportunities 会直接列出“Properly size images”“Eliminate render-blocking resources”。

注意：一定用无痕窗口跑，并禁用所有扩展，否则分数会虚高或虚低。

第二步：在 Network 面板找出最重的资源

这一步要按体积排出文件列表，通常前三个就是元凶。在 DevTools 里切到 Network，勾选 Disable cache，刷新页面，右键表头勾选 Size，点 Size 列降序。AI 建站常见问题：首屏图是 3MB 的 PNG、Google Fonts 加载了四个字重、一个 800KB 的 JS bundle。记下这些文件的 URL。

第三步：压缩图片并替换

这一步要把首屏图片从 2-3MB 压到 200KB 以内。本地用 Squoosh（squoosh.app）或命令行：

cwebp -q 80 hero.png -o hero.webp
avifenc --min 20 --max 30 hero.png hero.avif

然后在 HTML 里替换：

<img src="hero.webp" width="1200" height="600" loading="eager" fetchpriority="high" alt="">

首屏以下的图片加 loading="lazy"。如果平台是 Wix：编辑器 → 点击图片 → 设置 → 质量选“高”以下 → 保存。Framer：选中图片组件 → 右侧 Properties → Image → 打开 Optimize → Format 选 WebP。

注意：LCP 图片不要加 loading="lazy"，否则只会更慢。

第四步：字体和第三方脚本瘦身

这一步要减少阻塞渲染的请求。字体只保留实际用到的字重，比如只留 400 和 700，并在 <link> 末尾加 &display=swap。更彻底的做法是改用系统字体：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

第三方脚本：删掉不用的统计、客服、地图。必须保留的加 defer：

<script src="https://example.com/chat.js" defer></script>

Google Analytics 可以延迟到用户滚动或点击再加载。

注意：在线客服和地图组件是 TBT 大户，能去掉就去掉。

第五步：开压缩和 CDN 缓存

这一步让服务器传得更小、缓存更久。如果域名接在 Cloudflare：登录 dash.cloudflare.com → 选域名 → Speed → Optimization → 打开 Brotli 和 Auto Minify 的 HTML/CSS/JS；Caching → Configuration → Browser Cache TTL 设为 1 年；Caching → Cache Rules → Create rule，匹配 *.css、*.js、*.webp，Edge Cache TTL 设为 1 month。如果托管在 Netlify 或 Vercel，默认已开 Brotli，检查响应头是否有 cache-control: public, max-age=31536000, immutable。

第六步：重新跑 Lighthouse 对比

这一步确认优化是否生效。重复第一步，记录新的 LCP、TBT、CLS。如果 LCP 仍大于 2.5s，检查 LCP 图是否预加载：

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

小结

• 先用 Lighthouse 定位问题，再动代码，不要瞎猜。
• 图片是 AI 建站最大的性能债，优先转 WebP/AVIF 并设宽高。
• 字体只留必要字重，第三方脚本能删就删，必须留的加 defer。
• 开 Brotli 和 CDN 缓存，静态资源设一年强缓存。
• LCP 图不要懒加载，必要时加 preload 和 fetchpriority="high"。
• 改完必须用无痕窗口重新跑分，数据说话。