第8章 冲刺提速：性能与SEO

第 8 章 · 冲刺提速：性能与 SEO

章节摘要：接力赛进入最后一百米，计时器与看台上的目光都盯了过来。本章把前面所有章的机制兑换成两个硬指标：跑得快（首屏加载、图片字体、Core Web Vitals）与被看见（Meta 管理、Open Graph、结构化数据）。以 Lighthouse 评分为纲，逐项讲优化动作与验证方法。读完本章，你面对一份不及格的 Lighthouse 报告，应该能逐条定位到具体章节的知识点并落地修复。

本章接力任务

阅读完本章，你应当能够：

1. 解释 LCP、INP、CLS 三大核心指标的测量口径与 Nuxt 中影响它们的常见因素；
2. 用首屏关键路径分析法定位加载瓶颈，区分网络、体积、渲染三类成因；
3. 配置图片模块与字体策略，消除两类最常见的资产浪费；
4. 用 useSeoMeta 与 useHead 管理页面级标题、描述与 Open Graph，并区分 SSR/SSG 下标签的生效时机；
5. 注入 JSON-LD 结构化数据，让页面获得搜索引擎的富摘要理解；
6. 跑 Lighthouse 审计并按"先测量、后优化、再验证"的循环迭代分数。

接力全景图

一句话点题：性能优化不是技巧堆砌，是测量驱动的循环——每一次改动都要在报告上看到数字变化，否则等于没做。

各棒次导览

8.1 首屏加载与图片字体优化

三大核心指标（LCP/INP/CLS）的测量口径先立起来，然后按"网络段、生成段、资产段"三段论拆解首屏关键路径（配落点图），集中治理图片与字体两类最大资产浪费。宽高占位防跳动、LCP 主图例外要 preload、中文字体必须子集化——这三条是内容站立竿见影的三个修复。

8.2 Meta 管理与结构化数据

被看见的工程：useSeoMeta 的页面级管理、Open Graph 协议（社交分享卡四要素）、JSON-LD 结构化数据注入（配页面到富摘要的链路图），以及它们在不同渲染模式下的生效时机——SSR 与 SSG 的标签进首份 HTML，SPA 模式的标签要等 JS，这直接决定 SEO 动作的有效性。做内站的读者可以略读，但 hreflang 与多语言 meta 是 9.4 的前置。

8.3 Lighthouse 评分实战

把前两节的能力放进审计循环：跑分、读报告、逐项归因、修复、复测。附一份常见扣分项到知识点的对照表。

节与节怎么衔接

8.1 管速度、8.2 管可见性、8.3 用分数把两者串成闭环——速度与 SEO 是 Lighthouse 报告的一体两面。

8.1 加载优化 ──► 8.3 审计闭环 ──► 8.2 元信息
   (跑得快)        (拿分数说话)      (被看见)
       │                               │
       └── 体积与资产治理               └── 分数里的SEO项
           承接第7章构建优化                直接兑分
​

本章大量复用前章成果：7.1 的体积分析、3.3 的 routeRules、7.3 的图片字体模块，都在冲刺阶段兑现价值。

赛前热身与后续赛程

• 前置知识：第 3 章渲染模式、第 7 章构建优化与模块生态；会用浏览器开发者工具的 Network 面板。
• 学习提示：8.1 的三段论分析法是方法论核心，指标口径与资产清单都是它的子项；8.3 的实战复盘展示了四轮小修复从五十八分到九十一分的完整过程，建议对照自己项目跑一遍。8.2 的内容相对独立，做内站（无 SEO 需求）的读者可以略读。本章所有优化都遵循同一纪律：先测量、后优化、再验证——没有报告数字变化的改动等于没做。
• 后续赛程：第 9 章冲线——测试保质量、部署到生产、全球化适配，接力赛的最后一段。8.3 的性能预算会作为关卡进入 9.3 的流水线。