Lighthouse 是 Chrome DevTools 里一个非常实用的面板，可以从多个不同的维度对网站进行分析。

分析维度

• 性能（Performance）：衡量页面的加载速度与运行流畅度
• 无障碍（Accessibility）：检查页面是否便于所有用户（包括使用辅助技术的用户）访问
• 最佳做法（Best Practices）：检查页面是否遵循 Web 开发的最佳实践
• SEO：评估页面是否利于搜索引擎收录与理解
• 智能体浏览：评估页面是否便于 AI 智能体访问和理解，属于较新的能力

三种模式与两类设备

最新的 Lighthouse 支持三种模式和两类设备（mobile / PC）：

• 导航（Navigation）：加载页面后立即分析，模拟用户首次访问
• 时间跨度（Timespan）：在一段时间内分析用户的交互过程
• 快照（Snapshot）：分析页面当前的状态

实战：分析创见网站首页

这里使用导航模式、桌面设备对创见网站首页进行一次分析。

可以看到，创见首页的各项数据还是不错的：性能 91 分、无障碍 95 分、最佳做法 100 分、SEO 100 分、智能体浏览 1/2。

性能指标

性能指标包括：

• FCP（First Contentful Paint，首次内容绘制）：页面绘制出第一块内容所需的时间
• LCP（Largest Contentful Paint，最大内容绘制）：页面最大内容元素完成渲染的时间
• TBT（Total Blocking Time，总阻塞时间）：主线程被长任务阻塞的总时长
• CLS（Cumulative Layout Shift，累积布局偏移）：页面元素意外位移的程度
• Speed Index（速度指数）：页面内容可见填充的平均速度

其中主要是 CLS 为 0.162，拉低了我们的性能评分。

深入分析

继续往下，还有很多详细的数据分析结果。

首先，经过分析发现我们使用的是 HTTP/1.1 协议，性能没那么好。

其次，有两个 CSS 资源的请求阻塞了浏览器的 LCP。

我觉得最厉害的是，它给出了非常详细的布局偏移位置和原因。

无障碍

无障碍部分给出了两个问题：

1. 背景色和前景色的对比度不够
2. 文档缺少主要位置标记（main landmark）

最佳做法

最佳做法部分主要是一些安全方面的内容。

SEO

因为专门做过优化，所以 SEO 整体评分也达到了 100 分，评分项包括：

• 页面未被屏蔽，可编入索引
• 文档包含 <title> 元素
• 文档有 meta 描述
• 页面返回了有效的 HTTP 状态码
• 链接有描述性文字
• 链接都是可抓取的
• robots.txt 有效
• 图片元素具备 [alt] 属性
• 文档的 hreflang 有效
• 文档的 rel=canonical 有效

智能体浏览

智能体浏览看起来是新增的能力，主要是方便 AI 访问和理解页面。目前我们网站的主要问题是缺少 WebMCP 的适配，以及没有 llms.txt。

总结

整体来看，创见首页在最佳做法和 SEO 上已经做得很好，性能与无障碍仍有提升空间，可以优先从这几项入手：

• 修复 CLS 0.162 的布局偏移问题
• 将 HTTP/1.1 升级为 HTTP/2 或 HTTP/3
• 消除阻塞 LCP 的两个 CSS 请求
• 提升背景色与前景色的对比度
• 补全 main landmark
• 适配 WebMCP 并提供 llms.txt