企业官网建设流程全解析

• 人工智能
• AI Agent
• 代码智能体
• Agent 编排
• CLI
• AI 应用

导读

本文以当前仓库内置的 core-web-vitals 技能文档 为核心骨架，系统讲解 LCP（Largest Contentful Paint）、INP（Interaction to Next Paint）、CLS（Cumulative Layout Shift）这三项影响页面体验与搜索排名的核心指标：从官方阈值、常见问题定位、可复制的修复代码，到实验室测量与真实用户数据采集，再到 Next.js / React / Vue 的框架级快速修复。读完本文，你将掌握一套可直接执行的 Web 性能优化方法论，也能理解 GSD-2 是如何把这份技能通过触发词机制注入到 Agent 会话中的。

一、Core Web Vitals：衡量页面体验的三大指标

Core Web Vitals 是 Google 为统一衡量页面加载、交互与视觉稳定性而制定的三组核心指标。它们共同决定了用户感知的页面质量，并直接影响 Google 搜索排名与整体页面体验评分。

1.1 三个指标与判定阈值

1.2 统计口径：75 分位

Google 以75 分位（75th percentile）进行统计——也就是说，页面必须有 75% 的访问次数满足 "Good" 阈值，才能被判定为达标。这一点对采样和优化目标设定至关重要：不要盯着单个样本或平均值，而是要保证绝大多数用户（尤其是移动端用户）都能处于 "Good" 区间。

技能使用场景：在本仓库中，当用户提出 "improve Core Web Vitals"、"fix LCP"、"reduce CLS"、"optimize INP"、"page experience optimization" 或 "fix layout shifts" 等请求时，SKILL.md 的前置描述（frontmatter）中登记的触发词会命中并引导 Agent 按本技能执行优化。

二、LCP：最大内容绘制

LCP（Largest Contentful Paint）衡量的是视口内最大的可见内容元素完成渲染的时刻。最常见的 LCP 元素包括：

• 首屏 Hero 图或视频
• 大段文本块
• 背景图片
• <svg>元素

从更精确的规范看，LCP 的候选元素具体为<img>元素、<svg>内部的<image>元素、带 poster 图的<video>元素、通过url()引用背景图的元素，以及包含文本节点的块级元素（详见 references/LCP.md）。

2.1 LCP 时间线

LCP 时间由三段构成：

[ Server Response ][ Resource Load ][ Render ] TTFB Download Paint └─────────────────────────────────────┘ LCP Time

这意味着优化 LCP 需要分别针对服务端响应（TTFB）、资源加载、渲染三个阶段逐个击破。

2.2 常见 LCP 问题与修复

问题 1：服务端响应慢（TTFB > 800ms）

Fix: CDN, caching, optimized backend, edge rendering

修复手段：接入 CDN、启用缓存、优化后端代码、使用边缘渲染。在 references/LCP.md 中进一步给出了两个具体方案：

// 动态内容使用边缘函数（Vercel 示例） export const config = { runtime: 'edge' }; // 使用 stale-while-revalidate 缓存策略 // Cache-Control 响应头 res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate=300');

TTFB 过慢的常见成因包括：服务端/数据库查询缓慢、没有 CDN 或边缘缓存、后端代码低效、serverless 冷启动等。

问题 2：渲染阻塞资源

<!-- ❌ 阻塞渲染 --> <link rel="stylesheet" href="/all-styles.css"> <!-- ✅ 关键 CSS 内联，其余延后 --> <style>/* Critical above-fold CSS */</style> <link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

问题 3：资源加载缓慢

<!-- ❌ 无预加载提示，资源被发现得过晚 --> <img src="/hero.jpg" alt="Hero"> <!-- ✅ 高优先级预加载 --> <link rel="preload" href="/hero.webp" as="image" fetchpriority="high"> <img src="/hero.webp" alt="Hero" fetchpriority="high">

references/LCP.md 补充了更完整的 LCP 图片加载方案——支持响应式图片与多格式回退：

<!-- 预加载 LCP 图片（含 srcset 与 sizes） --> <link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-400.webp 400w, /hero-800.webp 800w" imagesizes="100vw" fetchpriority="high"> <!-- 现代格式 + 回退 --> <picture> <source srcset="/hero.avif" type="image/avif"> <source srcset="/hero.webp" type="image/webp"> <img src="/hero.jpg" width="1200" height="600" fetchpriority="high" alt="Hero"> </picture>

对于文本（Web 字体）资源，则使用font-display: swap让回退字体立即显示：

@font-face { font-family: 'Heading'; src: url('/fonts/heading.woff2') format('woff2'); font-display: swap; /* Show fallback immediately */ }

问题 4：客户端渲染延迟

// ❌ 内容依赖 JavaScript 加载 useEffect(() => { fetch('/api/hero-text').then(r => r.json()).then(setHeroText); }, []); // ✅ 服务端渲染或静态渲染 // 使用 SSR、SSG 或流式渲染，让 HTML 直接携带内容 export async function getServerSideProps() { const heroText = await fetchHeroText(); return { props: { heroText } }; }

2.3 渲染阻塞资源的进阶处理

references/LCP.md 给出了关键 CSS 与脚本延后的完整模式：

<head> <!-- 内联关键 CSS --> <style> /* 仅首屏上方样式，< 14KB */ .hero { /* ... */ } .nav { /* ... */ } </style> <!-- 延后非关键 CSS --> <link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> </head>

<!-- ❌ 阻塞解析 --> <script src="/app.js"></script> <!-- ✅ 延迟执行（HTML 解析完成后运行） --> <script defer src="/app.js"></script> <!-- ✅ ES Module（默认延迟） --> <script type="module" src="/app.mjs"></script>

2.4 客户端渲染的三种解法

服务端渲染（SSR）：

// Next.js export async function getServerSideProps() { const data = await fetchHeroContent(); return { props: { hero: data } }; }

静态站点生成（SSG）：

// Next.js export async function getStaticProps() { const data = await fetchHeroContent(); return { props: { hero: data }, revalidate: 3600 }; }

流式渲染（Streaming SSR，React 18+）：

import { Suspense } from 'react'; function Page() { return ( <Suspense fallback={<HeroSkeleton />}> <Hero /> </Suspense> ); }

2.5 LCP 优化检查清单

- [ ] TTFB < 800ms（使用 CDN、边缘缓存） - [ ] LCP 图片使用 fetchpriority="high" 预加载 - [ ] LCP 图片已优化（WebP/AVIF、尺寸正确） - [ ] 关键 CSS 内联（< 14KB） - [ ] <head> 中无渲染阻塞 JavaScript - [ ] 字体不阻塞文本渲染（font-display: swap） - [ ] LCP 元素位于初始 HTML 中（而非 JS 渲染）

2.6 LCP 元素识别与调试

// 找出你的 LCP 元素 new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; console.log('LCP element:', lastEntry.element); console.log('LCP time:', lastEntry.startTime); }).observe({ type: 'largest-contentful-paint', buffered: true });

references/LCP.md 提供了更完整的调试信息采集：

new PerformanceObserver((entryList) => { const entries = entryList.getEntries(); const lastEntry = entries[entries.length - 1]; console.log('LCP:', { element: lastEntry.element, time: lastEntry.startTime, size: lastEntry.size, url: lastEntry.url, renderTime: lastEntry.renderTime, loadTime: lastEntry.loadTime }); }).observe({ type: 'largest-contentful-paint', buffered: true });

2.7 LCP 常见问题速查表

三、INP：交互到下一帧绘制

INP（Interaction to Next Paint）衡量的是页面访问期间所有交互（点击、触摸、按键）的响应性，报告的是其中表现最差的交互（高流量页面取 98 分位）。

3.1 INP 的构成拆解

总 INP = 输入延迟（Input Delay） + 处理时间（Processing Time） + 呈现延迟（Presentation Delay）

3.2 常见 INP 问题

问题 1：长任务阻塞主线程

// ❌ 长同步任务 function processLargeArray(items) { items.forEach(item => expensiveOperation(item)); } // ✅ 分块处理并让出主线程 async function processLargeArray(items) { const CHUNK_SIZE = 100; for (let i = 0; i < items.length; i += CHUNK_SIZE) { const chunk = items.slice(i, i + CHUNK_SIZE); chunk.forEach(item => expensiveOperation(item)); // 让出主线程 await new Promise(r => setTimeout(r, 0)); // 或使用 scheduler.yield()（可用时） } }

问题 2：重型事件处理器

// ❌ 所有工作都在处理器内完成 button.addEventListener('click', () => { // 重量级计算 const result = calculateComplexThing(); // DOM 更新 updateUI(result); // 埋点 trackEvent('click'); }); // ✅ 优先提供视觉反馈，再处理其余工作 button.addEventListener('click', () => { // 立即给出视觉反馈 button.classList.add('loading'); // 延迟非关键工作 requestAnimationFrame(() => { const result = calculateComplexThing(); updateUI(result); }); // 埋点使用 requestIdleCallback requestIdleCallback(() => trackEvent('click')); });

问题 3：第三方脚本

// ❌ 急切加载，阻塞交互 <script src="https://heavy-widget.com/widget.js"></script> // ✅ 在交互或可见时懒加载 const loadWidget = () => { import('https://heavy-widget.com/widget.js') .then(widget => widget.init()); }; button.addEventListener('click', loadWidget, { once: true });

问题 4：过度重渲染（React/Vue）

// ❌ 重渲染整棵组件树 function App() { const [count, setCount] = useState(0); return ( <div> <Counter count={count} /> <ExpensiveComponent /> {/* 每次 count 变化都会重渲染 */} </div> ); } // ✅ 记忆化昂贵组件 const MemoizedExpensive = React.memo(ExpensiveComponent); function App() { const [count, setCount] = useState(0); return ( <div> <Counter count={count} /> <MemoizedExpensive /> </div> ); }

3.3 INP 优化检查清单

- [ ] 主线程无超过 50ms 的任务 - [ ] 事件处理器快速完成（< 100ms） - [ ] 立即提供视觉反馈 - [ ] 重活通过 requestIdleCallback 延后 - [ ] 第三方脚本不阻塞交互 - [ ] 输入处理器按需防抖（debounce） - [ ] CPU 密集型操作用 Web Worker

3.4 INP 调试

// 识别慢交互 new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (entry.duration > 200) { console.warn('Slow interaction:', { type: entry.name, duration: entry.duration, processingStart: entry.processingStart, processingEnd: entry.processingEnd, target: entry.target }); } } }).observe({ type: 'event', buffered: true, durationThreshold: 16 });

四、CLS：累积布局偏移

CLS 衡量的是意外布局偏移——当可见元素在没有用户交互的情况下于两帧之间改变了位置，即发生一次偏移。

CLS 计算公式：impact fraction × distance fraction

4.1 常见 CLS 成因与修复

成因 1：无尺寸的图片

<!-- ❌ 加载时导致布局偏移 --> <img src="photo.jpg" alt="Photo"> <!-- ✅ 预留空间 --> <img src="photo.jpg" alt="Photo" width="800" height="600"> <!-- ✅ 或使用 aspect-ratio --> <img src="photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">

成因 2：广告、内嵌内容和 iframe

<!-- ❌ 加载前尺寸未知 --> <iframe src="https://ad-network.com/ad"></iframe> <!-- ✅ 用 min-height 预留空间 --> <div style="min-height: 250px;"> <iframe src="https://ad-network.com/ad" height="250"></iframe> </div> <!-- ✅ 或用 aspect-ratio 容器 --> <div style="aspect-ratio: 16/9;"> <iframe src="https://youtube.com/embed/..." style="width: 100%; height: 100%;"></iframe> </div>

成因 3：动态注入内容

// ❌ 在视口上方插入内容 notifications.prepend(newNotification); // ✅ 在视口下方插入，或使用 transform const insertBelow = viewport.bottom < newNotification.top; if (insertBelow) { notifications.prepend(newNotification); } else { // 用动画避免偏移 newNotification.style.transform = 'translateY(-100%)'; notifications.prepend(newNotification); requestAnimationFrame(() => { newNotification.style.transform = ''; }); }

成因 4：Web 字体导致 FOUT（未替换字体的闪烁）

/* ❌ 字体切换导致文本位移 */ @font-face { font-family: 'Custom'; src: url('custom.woff2') format('woff2'); } /* ✅ 可选字体（慢则不切换，无偏移） */ @font-face { font-family: 'Custom'; src: url('custom.woff2') format('woff2'); font-display: optional; } /* ✅ 或匹配回退字体度量 */ @font-face { font-family: 'Custom'; src: url('custom.woff2') format('woff2'); font-display: swap; size-adjust: 105%; /* Match fallback size */ ascent-override: 95%; descent-override: 20%; }

成因 5：动画触发布局

/* ❌ 动画化布局属性 */ .animate { transition: height 0.3s, width 0.3s; } /* ✅ 改用 transform */ .animate { transition: transform 0.3s; } .animate.expanded { transform: scale(1.2); }

4.2 CLS 优化检查清单

- [ ] 所有图片都有 width/height 或 aspect-ratio - [ ] 所有视频/内嵌内容都预留空间 - [ ] 广告使用 min-height 容器 - [ ] 字体使用 font-display: optional 或匹配度量 - [ ] 动态内容插入在视口下方 - [ ] 动画只使用 transform/opacity - [ ] 不在已有内容上方注入内容

4.3 CLS 调试

// 追踪布局偏移 new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (!entry.hadRecentInput) { console.log('Layout shift:', entry.value); entry.sources?.forEach(source => { console.log(' Shifted element:', source.node); console.log(' Previous rect:', source.previousRect); console.log(' Current rect:', source.currentRect); }); } } }).observe({ type: 'layout-shift', buffered: true });

五、测量工具：实验室测试与真实用户数据

Core Web Vitals 的测量分为两类：实验室测试（Lab）与真实用户数据（Field）。

5.1 实验室测试

• Chrome DevTools→ Performance 面板、Lighthouse
• WebPageTest→ 详细的瀑布图、filmstrip 逐帧视图
• Lighthouse CLI→npx lighthouse <url>

5.2 真实用户数据（Field）

• Chrome User Experience Report（CrUX）→ 通过 BigQuery 或 API 获取
• Search Console→ Core Web Vitals 报告
• web-vitals 库→ 采集并发送到你的分析系统

import {onLCP, onINP, onCLS} from 'web-vitals'; function sendToAnalytics({name, value, rating}) { gtag('event', name, { event_category: 'Web Vitals', value: Math.round(name === 'CLS' ? value * 1000 : value), event_label: rating }); } onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics);

注意示例中对 CLS 做了value * 1000的换算：CLS 是比值（如 0.05），而 LCP/INP 是毫秒数，上报前需要统一单位。

六、主流框架的快速修复

6.1 Next.js

// LCP: 使用 next/image 并标记 priority import Image from 'next/image'; <Image src="/hero.jpg" priority fill alt="Hero" /> // INP: 使用动态导入 const HeavyComponent = dynamic(() => import('./Heavy'), { ssr: false }); // CLS: Image 组件自动处理尺寸

更完整的 LCP 配置（来自 references/LCP.md）：

import Image from 'next/image'; // LCP 图片并标记 priority <Image src="/hero.jpg" priority fill sizes="100vw" alt="Hero" />

6.2 React

// LCP: 在 head 中预加载 <link rel="preload" href="/hero.jpg" as="image" fetchpriority="high" /> // INP: 记忆化 + useTransition const [isPending, startTransition] = useTransition(); startTransition(() => setExpensiveState(newValue)); // CLS: 始终在 img 标签中指定尺寸

6.3 Vue / Nuxt

<!-- LCP: 使用 nuxt/image 并预加载 --> <NuxtImg src="/hero.jpg" preload loading="eager" /> <!-- INP: 使用异步组件 --> <component :is="() => import('./Heavy.vue')" /> <!-- CLS: 使用 aspect-ratio CSS --> <img :style="{ aspectRatio: '16/9' }" />

Nuxt 的进阶写法（来自 references/LCP.md）：

<NuxtImg src="/hero.jpg" preload loading="eager" sizes="100vw" />

6.4 Astro

--- import { Image } from 'astro:assets'; import hero from '../assets/hero.jpg'; --- <Image src={hero} loading="eager" decoding="sync" alt="Hero" />

七、在 GSD-2 项目中该技能如何被触发与使用

这份core-web-vitals技能不是孤立文档，而是 GSD-2 技能体系中的一个可被 Agent 按需加载的能力单元。

7.1 触发词机制

在 system-context.ts 中，GSD-2 维护了一张BUNDLED_SKILL_TRIGGERS内置技能触发表，其中第 63 行登记了：

{ trigger: "Core Web Vitals — fix LCP, CLS, INP; layout shifts; page experience optimization", skill: "core-web-vitals" }

也就是说，当 Agent 收到与 LCP/CLS/INP、布局偏移、页面体验优化相关的任务时，会把该技能映射到core-web-vitals并加载 SKILL.md 作为执行依据。buildBundledSkillsTable()会遍历这张表，通过resolveSkillReference解析技能路径，且只把磁盘上真实存在的技能写入系统提示词（resolution.method === "unresolved"的技能会被跳过），从源码结构看，这保证了提示词中不会出现失效的技能引用。

7.2 回归测试保障

仓库中的 bundled-skill-triggers.test.ts 专门守护这张触发表：PR_5060_BUNDLED_SKILLS常量中明确列出了core-web-vitals，测试会断言每个条目都有非空 trigger 与 skill，并确保该技能始终被注册。这意味着本文所讲解的技能在后续版本迭代中不会被意外删除。

7.3 与周边技能的协同

core-web-vitals与同一批次的web-quality-audit（SKILL.md）形成互补：后者是覆盖性能、可访问性、SEO、最佳实践的 Lighthouse 风格全量审计，并在文中把三项 Core Web Vitals 阈值作为"必须通过"的门槛（LCP < 2.5s、INP < 200ms、CLS < 0.1），遇到具体优化问题时再反向引用本技能。此外，SKILL.md 末尾还链接了 code-optimizer 技能，用于处理更深层的代码级性能反模式（如主线程长任务、无效缓存等）。

八、参考与延伸阅读

• 本技能主文档：src/resources/skills/core-web-vitals/SKILL.md
• LCP 深度参考（时间线、SSR/SSG/流式渲染、常见问题影响量化）：src/resources/skills/core-web-vitals/references/LCP.md
• 全量 Web 质量审计技能（性能/可访问性/SEO/最佳实践）：src/resources/skills/web-quality-audit/SKILL.md
• 深层代码性能优化技能：src/resources/skills/code-optimizer/SKILL.md
• 技能触发机制实现：src/resources/extensions/gsd/bootstrap/system-context.ts
• 技能注册回归测试：src/resources/extensions/gsd/tests/bundled-skill-triggers.test.ts

• 人工智能
• AI Agent
• 代码智能体
• Agent 编排
• CLI
• AI 应用