许多人认为 Lighthouse 这类自动化审计工具需要复杂配置，或必须依赖 JavaScript 运行才能获得准确结果。事实并非如此，尤其是在 SEO 和无障碍这两个核心领域，Lighthouse 的工作方式出乎意料地“直接”——它本质上是一个高级的 HTML 结构扫描器。

其核心逻辑基于静态 DOM 分析：不执行任何 JavaScript，只专注于解析页面加载完成后，浏览器所呈现的最终 HTML 结构、语义标签、属性以及元信息。这意味着，只要页面的 HTML 输出完整，Lighthouse 就能立即捕捉到所有影响搜索引擎友好度和可访问性的结构性问题。换句话说，它审计的是你交付给浏览器和爬虫的“原始材料”。

SEO 友好度审计：完全依赖真实的 HTML 元素与属性

在 SEO 审计类别下，Lighthouse 会逐项检查原始 DOM 中是否存在对搜索爬虫至关重要的结构信号。这些检查全部基于 HTML 源码或渲染后的 DOM 节点，与 JavaScript 的动态生成无关。具体来看，它重点关注以下几个关键点：

• 标题与描述： 标签是否存在，且长度是否在 30 到 60 个字符的理想范围？ 是否具备，内容长度是否在 50 到 160 字符之间？
• 图片可读性：所有 元素是否都带有非空且有意义的 alt 属性？对于纯装饰性图片，是否已正确设置为 alt="" 并配合 role="presentation"？
• 内容结构：
  是否唯一且不为空？标题层级是否合理，是否出现跳过
  直接使用
  等破坏大纲结构的情况？
• 链接语义： 链接的锚文本是否具备描述性，还是充斥着“点击这里”、“了解更多”等对爬虫和屏幕阅读器用户无意义的模糊词汇？
• 基础配置：页面是否使用了 HTTPS？ 标签是否通过 lang="xx" 属性声明了页面语言？

可以看出，所有这些检查点都直接映射到 HTML 的书写规范上，无需任何运行时脚本参与。

无障碍得分：由原始 DOM 结构一锤定音

Accessibility（无障碍）审计更是纯粹的静态扫描，只关注 DOM 层面的语义、属性与元素间的关系。常见的扣分项几乎百分之百源于 HTML 写法问题：

• 表单关联：表单控件是否缺失通过 进行的显式关联，或者未被 标签直接包裹？
• 交互元素：通过
  模拟的按钮类元素，是否缺少让键盘可聚焦的 tabindex="0" 和说明其作用的 aria-label？
• 图标语义：SVG 图标是否包裹在 标签内以提供描述？对于装饰性图标，是否设置了 aria-hidden="true" 以避免干扰？
• 视觉对比：文本节点与背景色的对比度是否足够？Lighthouse 会提取 DOM 中文本计算后的 color 与 background-color 值进行评估，但前提是该文本在 DOM 树和样式继承链中明确存在。
• 表格结构： 是否缺少 摘要？表头单元格是否使用

  并正确标注了 scope 属性？ 同样，修复这些问题完全不需要改动 JavaScript 逻辑，只要修正 HTML 输出，分数就能立竿见影地提升。 如何确保审计反映真实的原始结构？ 为了获得最准确、最能反映页面“出厂状态”的审计报告，操作时需注意几个细节： 精准配置：在 Chrome DevTools 的 Lighthouse 面板中，只勾选 SEO 和 Accessibility 类别，取消其他选项。设备类型建议选择 Desktop，以避免移动端 User-Agent 可能触发的服务端渲染差异。 时机把握：确保测试前页面已完成服务端渲染（SSR）或静态生成（SSG）。若使用 React、Vue 等客户端框架，建议等待 useEffect 或 mounted 生命周期后再运行审计，以确保 DOM 已完全水合（hydrated）。 保持状态：不要勾选 “Clear storage” 或 “Disable cache” 选项，否则可能意外触发重定向或资源加载失败，导致审计时 DOM 结构不完整。 登录态处理：如果页面依赖登录状态，直接在已登录的浏览器标签页中打开 DevTools 并运行 Lighthouse，它会保留当前 Cookie 和会话信息。 快速修复指南（不碰逻辑，不写 JS） 提升分数其实有捷径可走，大多无需改动后端逻辑或编写一行 JavaScript： 完善所有图片：给每一个 补上 alt 属性。功能性图片写清描述，纯装饰性图片统一使用 alt="" 并加上 role="presentation"。 规范交互元素：将 直接改为语义化的 。若确实不能改标签，至少确保加上 role="button"、tabindex="0" 和清晰的 aria-label。 关联表单标签：确保每一个 、 或 都有一个显式的 与之关联，无论是通过匹配的 for 和 id 属性，还是直接嵌套包裹。 声明页面语言：在 标签上加上 lang="zh-CN"（或其他对应语言代码），这是最基本也最容易被忽略的无障碍与 SEO 要求。 优化元描述：重写 的内容，确保每个页面唯一、包含核心关键词，并且是一个语义完整的句子。 归根结底，Lighthouse 的 SEO 和无障碍报告不是一种预测，而是对你当前 HTML 输出的一份客观“快照”。修复结构，分数自然就会提升——这个过程通常不需要改造复杂的构建流程，也完全不依赖特定的运行时环境。