第 4 周 · 技术 SEO
技术 SEO 是什么
前三周你学的都是"内容层面"的优化——写什么、怎么写、怎么组织。
技术 SEO 是"基础设施层面"的优化——确保搜索引擎能顺利地找到、读取、理解你的网站。
一个类比：内容优化是把菜做好，技术 SEO 是确保餐厅的门开着、灯亮着、菜单清晰。菜再好，门关着没人能进来。
本周覆盖：
- 网站速度和 Core Web Vitals（本课）
- 移动端与可爬取性（第 2 课）
- 结构化数据 Schema Markup（第 3 课）
- 站点架构与安全（第 4 课）
技术 SEO 对不同读者的含义
如果你有独立网站（自建 WordPress、Hugo、Hexo 等）：本周的所有内容都适用于你，很多设置你可以直接操作。
如果你用第三方平台（小红书、知乎、公众号、哔哩哔哩、Medium）：你不能控制平台的底层技术，但你仍然需要理解这些概念——因为你将来可能会建站，也因为理解"搜索引擎为什么喜欢快速的页面"会帮你在选平台时做出更好的判断。对于平台用户，本课每个部分结尾都会注明"你现在能做什么"。
网站速度为什么重要
对用户：
- 页面加载每延迟 1 秒，转化率下降 7%
- 加载超过 3 秒，53% 的手机用户会直接离开
- 用户对速度的容忍度在逐年降低
对 SEO：
- Google 明确声明：网站速度是排名因素
- 2026 年 3 月核心更新进一步加大了 Core Web Vitals 的权重
- 约 10% 的网站因 CWV 差而在这次更新中下降
- 百度同样将网站速度纳入排名参考，通过"百度搜索资源平台"可以看到速度相关的体验评分
对 GEO：
- AI 爬虫（GPTBot、PerplexityBot）和 Googlebot 一样不愿意等
- 网站太慢 = 爬虫爬取的页面数量减少 = 被 AI 索引的内容减少
- 速度不直接影响 AI 引用决策，但影响 AI 能不能读到你的内容
平台用户能做什么：你无法控制小红书、知乎的服务器速度，但你能控制上传的图片大小。图片过大会导致你的笔记/文章加载更慢——尤其是在网络信号差的环境下。上传图片前先压缩，这个习惯在任何平台都适用。
Core Web Vitals（核心网页指标）
Core Web Vitals（简称 CWV，直译"核心网页生命体征"）是 Google 定义的三个衡量用户体验的指标。它们是直接的排名因素。
把它们想象成给网站做体检：医生会测血压（速度）、心率（响应性）、体态（视觉稳定性）。三项都正常才算健康。
LCP（Largest Contentful Paint，最大内容绘制）
衡量什么：页面上最大的可见元素（通常是主图或标题文字块）多快加载完成。
白话解释：用户打开页面后，多久能看到"主要内容"——不是整个页面加载完，而是第一眼能看到的最大块内容出现的速度。
| 评分 | 时间 | 含义 |
|---|---|---|
| 🟢 好 | ≤ 2.5 秒 | 用户体验良好 |
| 🟡 需改进 | 2.5 - 4 秒 | 可以接受但有优化空间 |
| 🔴 差 | > 4 秒 | 用户很可能离开 |
常见拖慢 LCP 的原因：
- 未压缩的大图片（最常见！）
- 服务器响应慢
- 渲染阻塞的 CSS/JavaScript（即页面在加载样式和脚本时，暂停了内容显示）
- 没有使用 CDN（内容分发网络——把你的网站文件存储在离用户更近的服务器上）
快速修复：
- 把首屏主图压缩到 100KB 以内，使用 WebP 格式（WebP 是新一代图片格式，同等画质下文件更小）
- 对首屏图片用
fetchpriority="high"，不要懒加载首屏图（懒加载是"滚动到才加载"的技术——首屏图片不适合用） - 检查服务器响应时间（TTFB 即第一字节时间，应 < 800ms）
INP（Interaction to Next Paint，交互到下一次绘制）
衡量什么：用户点击按钮/链接后，页面多快响应。
白话解释：页面"卡不卡"。你点了一个按钮，多久之后页面有反应。
| 评分 | 时间 | 含义 |
|---|---|---|
| 🟢 好 | ≤ 200 毫秒 | 感觉即时响应 |
| 🟡 需改进 | 200 - 500 毫秒 | 有轻微延迟感 |
| 🔴 差 | > 500 毫秒 | 明显卡顿 |
INP 在 2024 年取代了旧的 FID（First Input Delay，首次输入延迟）指标。两者都是衡量响应速度的，但 INP 更全面——它衡量整个页面生命周期中最差的一次交互延迟，而不只是第一次点击。
常见拖慢 INP 的原因：
- 主线程被大量 JavaScript 阻塞（JavaScript 是让网页有交互效果的代码，太多会让页面反应迟钝）
- 第三方脚本（广告、分析工具、聊天插件）太多
- 复杂的 DOM 操作（DOM 是浏览器内部的页面结构，操作太复杂会变慢）
快速修复：
- 延迟加载非关键的第三方脚本（特别是广告和聊天插件）
- 减少页面上的 JavaScript 总量
- 对于静态内容网站（博客/文档）：INP 通常不是问题，可以先不管
CLS（Cumulative Layout Shift，累积布局偏移）
衡量什么：页面加载过程中，元素意外移动了多少。
白话解释：你正在读文字，突然一个广告插进来把文字推下去——这种体验有多糟。CLS 就是量化这种"布局跳动"的程度。
| 评分 | 分数 | 含义 |
|---|---|---|
| 🟢 好 | ≤ 0.1 | 页面稳定 |
| 🟡 需改进 | 0.1 - 0.25 | 有一些跳动 |
| 🔴 差 | > 0.25 | 元素到处跳 |
常见导致 CLS 的原因：
- 图片没有声明宽高（浏览器不知道图片有多大，等图片加载完才撑开空间，把已有内容推走）
- 字体加载导致文字大小变化（先用系统字体显示，字体包下载完后切换，文字大小改变导致跳动）
- 动态插入的广告/横幅
- iframe 没有预留空间
快速修复：
- 所有图片声明 width 和 height 属性：
<img src="photo.webp" width="800" height="600"> - 用
font-display: swap处理字体加载（告诉浏览器：先用备用字体显示，字体加载好了再换） - 为广告位预留固定大小的占位空间
怎么测量 Core Web Vitals
工具 1：Google PageSpeed Insights（推荐首选）
网址：pagespeed.web.dev
具体操作步骤：
- 打开浏览器，输入
pagespeed.web.dev，按回车 - 在页面中间的输入框里输入你的网址（如
https://yoursite.com） - 点击右侧的蓝色"分析"按钮
- 等待 10-30 秒，结果会出现在下方
- 页面顶部会显示"移动设备"和"桌面设备"两个标签，先看移动设备
- 你会看到三个彩色评分圆圈：LCP、INP、CLS——绿色是好，橙色是需改进，红色是差
- 向下滚动，你会看到"机会"（Opportunities）部分——这些是有具体优化空间的项目，按节省时间从多到少排列
- 再向下是"已通过的审核"——这些你做得不错，可以忽略
使用建议：先看移动端评分，因为 Google 使用移动端优先索引（第 2 课会详细说）。
工具 2：百度搜索速度评测（中文网站必看）
如果你的目标用户在中国，百度的加载速度同样关键。百度搜索资源平台（ziyuan.baidu.com）提供网站速度相关的抓取数据。
具体操作：
- 访问
ziyuan.baidu.com，用百度账号登录 - 添加并验证你的网站
- 在左侧菜单选"数据引导" → “抓取统计”，可以看到百度爬虫的访问情况
- “链接提交"功能可以主动推送新页面让百度更快收录
PageSpeed Insights 测的是 Google 的体验标准；百度搜索资源平台告诉你百度爬虫实际的抓取情况。两个都看。
工具 3：Google Search Console
如果你的网站已经添加到 Search Console（第 2 课会讲如何设置）：
- 导航到"体验” → “核心网页指标”
- 可以看到整个网站的 CWV 状况（而非单页面）
- 基于真实用户数据，比 PageSpeed Insights 的实验室数据更可靠
- 如果某些指标显示"差"，它会列出具体是哪些 URL 有问题
工具 4：Chrome DevTools 的 Lighthouse
在 Chrome 浏览器中：
- 按 F12 打开开发者工具（Mac 用户按 Command + Option + I）
- 点击顶部菜单中的 “Lighthouse” 标签（如果没有，点
>>展开更多标签） - 左侧选中 “Performance”（性能）
- 选择"移动设备"或"桌面设备"
- 点击 “Analyze page load”（分析页面加载）
- 等待 1-2 分钟，会生成详细报告
适合开发者做详细诊断。对于初学者，用 PageSpeed Insights 就够了。
平台用户的替代方案
如果你没有独立网站，你仍然可以用 PageSpeed Insights 测试你发布内容的平台：
- 测试你的知乎个人主页或某篇文章的 URL
- 测试你的微信公众号文章（虽然你不能优化，但了解平台速度有助于理解用户体验）
- 这让你了解平台的技术状况，也是学习理解这些指标的好方法
实际优先级
对于内容型网站（博客、文档、资讯）——大多数 SEO+GEO 学员的情况：
| 指标 | 通常的问题大小 | 优先级 |
|---|---|---|
| LCP | 大——图片和服务器速度经常是瓶颈 | ⭐⭐⭐ 最优先 |
| CLS | 中——图片宽高和字体是常见问题 | ⭐⭐ |
| INP | 小——纯内容站交互少，通常没问题 | ⭐ |
如果你只有时间做一件事：把图片压缩到位、用 WebP 格式。 这一步通常能解决 60% 的 LCP 问题。
图片压缩工具推荐
- Squoosh（squoosh.app）：Google 出的免费图片压缩工具，可以转换 WebP 格式，无需注册，在浏览器里直接用
- TinyPNG/TinyJPG（tinypng.com）：上传图片自动压缩，支持批量，简单易用
- ImageOptim（Mac 应用）：拖入图片自动压缩，适合批量处理
- 百度图片优化建议：100KB 以内为佳，格式首选 WebP，不支持 WebP 的场景用 JPEG
常见误区
误区 1：PageSpeed 分数越高越好，要追求 100 分
现实是三个 CWV 指标都在"绿色"区间就够了。从 90 分到 100 分的提升对排名的影响微乎其微，而这段优化往往极其耗时（比如为了再省几毫秒需要重构整个构建流程）。你的时间更应该花在内容质量上。
误区 2：只在桌面端测速，忽略移动端
Google 用移动端版本来排名——移动端评分才是影响 SEO 的那个。很多网站桌面端 90 分、移动端只有 60 分，结果排名受影响。测速时先看移动端。
误区 3：测一次没问题就不管了
网站速度会随时间变化。你每加一个插件、每嵌入一个第三方服务，速度可能都会下降。建议每季度跑一次 PageSpeed Insights，确保没有"悄悄变慢"。
误区 4：Core Web Vitals 只是 Google 的东西，百度不管
百度虽然没有完全相同的指标体系，但同样关注用户体验——加载慢的网站在百度的排名同样会受影响。2024 年百度在其质量评估指南中明确将"页面体验"列为评分维度。
误区 5：用 WordPress 主题就不用管速度了
很多 WordPress 主题加载了大量不必要的 CSS 和 JavaScript，本身就很慢。特别是功能复杂的多用途主题（如 Divi、Avada）。安装后必须跑 PageSpeed 验证。
验证你做对了
改完之后，怎么确认优化有效？
- 改动前先记录数字：截图 PageSpeed Insights 的当前评分，特别是 LCP 的毫秒数值
- 做一项改动（如压缩所有图片）
- 等 5-10 分钟让缓存更新
- 再次运行 PageSpeed Insights，对比前后数值
- 如果 LCP 下降了（如从 3.8s 降到 2.1s），说明有效
- 达到绿色区间后，在 Google Search Console 的"核心网页指标"报告中，点击"验证修复"——Google 会重新评估你的网站
不要过度优化
标准：LCP < 2.5s、INP < 200ms、CLS < 0.1——达到就行，不需要追求满分。
一旦三个指标都进入绿色区间，把时间花在创作高质量内容、建立反向链接上，ROI 远高于继续刷分。
本课小结
- 网站速度是直接的排名因素，也影响 AI 爬虫的抓取量；百度和 Google 都关注速度
- Core Web Vitals 三指标：LCP（加载速度）、INP（交互响应）、CLS（视觉稳定）
- 对内容型网站，LCP 最优先——压缩图片（用 Squoosh 或 TinyPNG）通常能解决大部分问题
- 用 PageSpeed Insights 测量，先看移动端；中文站同时看百度搜索资源平台
- 达标就行，不要过度优化——内容质量的投入回报更高
- 平台用户无法控制服务器，但可以控制上传图片的大小
下一课：移动端优化与可爬取性——确保搜索引擎和 AI 爬虫能顺利访问你的所有内容。