用 Lighthouse 给网页打个分

刚刚用 Lighthouse 给本站的首页做了一下审计,看看打分情况。Lighthouse 以前我就介绍过了,平时也在用,当然现在的 Lighthouse 已经是更新了很多版加了不少新的功能。

是使用的 Chrome 内置的 Lighthouse,版本是 Lighthouse 9.5.0。

上面这个评分是以移动设备上的展示为评分的基础的。同桌面不同,一般桌面评分会高很多。看看不够好的地方。

性能

首先是性能得分是 72,显示为红色,看上去是不太好,LCP 的时间高达 8.7 秒,还有就是 Time to Interactive 是 4.3 秒。这两个指标主要造成的原因都是第三方的,一个是 Google AdSense 的应用,似乎无法避免,除非去掉,还有一个就是微软的统计 Clarity。

因为是 Blog,而我用的是 Bootstrap 的框架,其 DOM 的尺寸在它看来有点过大,大约为 1069 个元素。稍后我看看能否做些删减。

无障碍易用性

在 Accessibility 部分,得分是 88,还不够好。提示了三个改进的方向。

  1. [aria-*] 属性没有对应其角色
  2. frame 或者 iframe 元素没有标题
  3. 标题元素没有按降序顺序排列

这里的三个问题,前两个都是 Google AdSense 带来的,第三个我倒是可以改动一下。

最佳实践

在 Best Practices 部分得分为 92,挺满意的。

唯一提示存在的问题就是 Cookie 的问题。

SEO

这是满分的,100分,完全通过了所有的审核点。

好吧,接下来就是改进的工作了,看看做了改进后有什么变化。

修改之后,重新做了评估,情况改进,还算满意。