如何用AI建站生成一个能通过Core Web Vitals检测的营销落地页？

学会这套流程，你能用 AI 在半小时内生成一个落地页，并用可复现的步骤把它压进 Core Web Vitals 的及格线（LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1）。

第一步：先定验收标准，再选对工具

这一步要确定"通过"到底指什么，避免做完才发现方向错了。Core Web Vitals 的官方阈值按真实用户的 75 分位统计：LCP（最大内容绘制）≤ 2.5 秒，INP（交互到下次绘制）≤ 200 毫秒，CLS（累积布局偏移）≤ 0.1。验收入口有两个：https://pagespeed.web.dev/ 看真实用户数据（CrUX），Chrome DevTools 的 Lighthouse 面板看实验室数据。

工具选 v0 by Vercel（网址 v0.dev，2024 年后的界面为左侧对话、右侧实时预览）。它生成的是 Next.js App Router + Tailwind 代码，自带 next/image、next/font 优化能力，比拖拽式建站的第三方脚本少得多。

注意：如果你用 Wix、Durable 这类"套模板"建站，页面里会自动塞入统计、客服、A/B 测试等脚本，INP 很难压到 200ms 以内。营销页追求性能时，优先选能拿到源码的方案。

第二步：用提示词生成页面骨架

这一步让 AI 输出一个结构干净的单页落地页，得到可预览、可部署的代码。在 v0.dev 输入框粘贴下面这段提示词：

做一个响应式营销落地页，单页，Next.js App Router + Tailwind，不要引入任何第三方 UI 库或 jQuery。
结构：顶部导航（Logo + 一个 CTA）、首屏 Hero（大标题 + 一句副标题 + 主 CTA 按钮 + 一张产品截图）、三个卖点卡片、一个邮箱留资表单、页脚。
要求：图片统一用 next/image，必须写 width 和 height；首屏那张图加 priority；字体用 next/font/google 的 Inter，display: swap；颜色用黑白灰加一个强调色。

生成后点右侧预览确认布局，再点右上角 "Deploy"。

注意：提示词里写"不要第三方库"很关键。AI 默认喜欢装 shadcn、framer-motion，动画库是 INP 和包体积的头号来源。

第三步：部署到 Vercel 拿到线上地址

这一步把代码变成可测的网址。点 v0 右上角 "Deploy" → 选择 "Vercel" → 授权 GitHub 并创建仓库，Vercel 会自动构建，约 1 分钟给出 xxx.vercel.app 域名。回到 Vercel 项目页，进 Settings → Functions → Function Region，把区域改成 Hong Kong (hkg1)。

注意：默认区域在美国东部，如果你的受众主要在国内，首字节时间会明显拖长 LCP。改区域只影响服务端渲染，静态页影响小，但顺手改掉没坏处。

第四步：处理图片，这是 LCP 的最大变量

这一步把首屏大图压到 200KB 以内。把产品图放进项目 public/ 目录，代码里用：

<Image src="/hero.webp" alt="产品界面" width={1200} height={750} priority sizes="(max-width: 768px) 100vw, 1200px" />

priority 让首屏图预加载，width/height 预留空间防 CLS，Next.js 会自动转 WebP/AVIF。

注意：直接写 <img src="https://..."> 外链原图是最常见的翻车点——一张 3MB 的 PNG 能让 LCP 直接飙到 5 秒以上。

第五步：字体和第三方脚本降级加载

这一步解决 INP 和渲染阻塞。字体已经在第二步用了 next/font/google，确认 display: 'swap'。统计代码（GA4、百度统计、热图）统一用：

import Script from 'next/script'
<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXX" strategy="lazyOnload" />

lazyOnload 会在浏览器空闲时才加载，不抢主线程。

注意：GTM 容器里挂了 5 个以上标签页是 INP 恶化的重灾区。上线前在 GTM 后台逐个禁用不用的标签。

第六步：用固定比例消除 CLS

这一步让页面加载时元素不跳动。所有非首屏图片、视频容器、广告位都加固定比例：

.video-wrap { aspect-ratio: 16 / 9; width: 100%; }

表单、卡片同理，不要靠内容撑高度。

注意：不要在页面顶部插入"延迟加载的公告横幅"，它会把下方所有内容顶下去，CLS 直接爆表。

第七步：实测并对照阈值

这一步拿到最终成绩。打开 https://pagespeed.web.dev/，在"输入网址"框粘贴你的域名，点"分… 数据的 LCP、CLS，以及 Field 数据（可能显示"数据不足"，说明流量还不够）。再用 Chrome 按 F12 → 顶部 "Lighthouse" 面板 → Mode 选 "Navigation"、Device 选 "Mobile" → 勾选 "Performance" → 点 "Analyze page load"。

达标线：LCP < 2.5s、CLS < 0.1、TBT < 200ms（INP 的实验室近似值）。哪一项标红就回到对应步骤重做。

小结

• 选能拿到源码的 AI 工具（v0 + Vercel），别选塞满脚本的模板站。
• LCP 靠 next/image + priority + 压缩图片；CLS 靠 width/height 和 aspect-ratio；INP 靠砍第三方脚本、lazyOnload。
• 部署后改 Function Region 为 hkg1，减少国内访问延迟。
• 验收必须用 PageSpeed Insights + Lighthouse 双测，别凭感觉。