网站速度：天下武功，唯快不破

在 SEO 的世界里，速度不是"锦上添花"，而是"生死攸关"。

Google 的逻辑很简单：用户讨厌等待。

• 如果你的网站加载超过 3 秒，53% 的移动用户会直接关掉。
• Google 不会把珍贵的首页位置浪费在一个"打不开"的网站上。

技术 SEO 的第一定律：先让网站变快，再谈其他。

---

核心指标：Core Web Vitals (CWV)

以前我们看"页面加载时间"（Load Time），现在 Google 看 Core Web Vitals。 这是 Google 2021 年推出的用户体验核心指标，直接影响排名。

1. LCP (Largest Contentful Paint) - "那个大图什么时候出来？"

• 含义：视口内最大的内容（通常是 Banner 图或 H1 标题）渲染完成的时间。
• 标准：< 2.5 秒（优秀）。
• 优化：压缩图片、使用 CDN、预加载关键资源 (rel="preload")。

2. INP (Interaction to Next Paint) - "点它有反应吗？"

• 注：INP 已于 2024 年 3 月取代 FID。
• 含义：用户点击按钮后，浏览器需要多久才能开始处理并给出反馈。
• 标准：< 200 毫秒。
• 优化：减少主线程阻塞，拆分长 JavaScript 任务，避免 hydration 耗时过久。

3. CLS (Cumulative Layout Shift) - "别乱动！"

• 含义：页面加载时元素是否会突然跳动（比如突然加载出一张广告，把文字顶下去了）。
• 标准：< 0.1。
• 优化：给图片和视频设定固定的 width 和 height，预留空间。

---

开发者专属：速度优化实战指南

作为开发者，我们手里的武器比普通营销人员多得多。

1. 图片优化 (Image Optimization)

图片通常占网页体积的 50% 以上。

• 格式：全线拥抱 WebP 或 AVIF。
• 尺寸：不要在手机上加载 4K 大图。使用 srcset 响应式图片。
• 懒加载：非首屏图片统统 loading="lazy"。
• Next.js：直接用 <Image /> 组件，它会自动处理上述所有事情。

2. 代码分割 (Code Splitting)

不要把整个网站的 JS 打包成一个巨大的 bundle.js。

• 路由懒加载：用户访问 /about 时，才加载 About 页面的代码。
• 组件懒加载：只有当用户点击"打开模态框"时，才加载模态框的代码。

3. 字体优化 (Font Optimization)

Web Font 虽然好看，但也容易阻塞渲染。

• 自托管：尽量把字体文件放在自己的服务器/CDN 上，别用 Google Fonts（国内访问慢）。
• 展示策略：使用 font-display: swap。
  • 效果：先用系统默认字体显示文字（不让用户看白屏），等字体下载好了再替换。

4. 预加载与预连接 (Preload & Preconnect)

告诉浏览器哪些资源是"急需"的。

<!-- 提前建立与 CDN 的连接 -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- 强制优先加载 LCP 图片 -->
<link rel="preload" href="/hero-image.webp" as="image">

---

常用测速工具

别靠感觉，要靠数据。

1. PageSpeed Insights (PSI)：Google 官方工具。既有实验室数据（模拟），也有真实用户数据（CrUX）。这是排名的依据。
2. Lighthouse：Chrome 开发者工具自带。适合本地开发调试。
3. WebPageTest：硬核工具，能看到详细的瀑布流（Waterfall），分析具体是哪个请求卡住了。

---

小结

速度优化是一场永无止境的战争。

1. 关注 Core Web Vitals：LCP, INP, CLS。
2. 图片是最大的敌人：压缩、转格式、懒加载。
3. JS 是主线程杀手：能少写就少写，能后加载就后加载。

让你的网站快如闪电，用户和 Google 都会爱死你。