Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

摘要:Lighthouse 是 Google 开发的一款开源自动化工具,用于分析网络应用和网页,收集现代性能指标和见解,让开发人员根据生成的评估页面,来进行网站优化和完善,提高用户体验。

审查(Lighthouse)

Lighthouse 是 Google 开发的一款开源自动化工具,用于分析网络应用和网页,收集现代性能指标和见解,让开发人员根据生成的评估页面,来进行网站优化和完善,提高用户体验。

Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

点击 Generate report(生成报告),Lighthouse 会收集该网页的相关信息,并生成报告,如下图:

Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

有5个指标:

  • Performance 性能
  • Accessibility 无障碍功能
  • Best Practice 最佳做法
  • SEO 搜索引擎优化
  • Progressive Web App 渐进式网页应用程序

关于 PWA(渐进式网页应用程序)的具体描述请浏览 What's PWA? 这篇文章。

Tools menu(工具菜单)

点击右上角的︙(Tools menu,工具菜单),这里有 7 个选项,分别为:

Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

  • Print Summary:打印摘要,可另存为 PDF;
  • Print Expanded:打印详细信息,可另存为 PDF;
  • Copy JSON:复制 JSON;
  • Save as HTML:另存为 HTML;
  • Save as JSON:另存为 JSON,json 格式的报告可以通过 Lighthouse Report Viewer(Lighthouse 报告查看器)打开;
  • Open in Viewer:在 Lighthouse Report Viewer 中打开报告;
  • Toggle Dark Theme:切换为黑夜主题。

Performance(性能)

Performance(性能)有 6 个指标,分别为:

Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

  • First Contentful Paint(FCP):初始渲染,首次内容渲染时间。
  • Speed Index(SI):速度指数,用来衡量页面可见内容填充快慢的指标。
  • Largest Contentful Paint(LCP):最大内容绘制,用于监控网页可视区内“绘制面积”最大的元素开始呈现在屏幕上的时间。
  • Time to Interactive(TTI):交互时间,页面达到完全可交互状态所需要的时间。
  • Total Blocking Time(TBI):总阻塞时间,任务执行时间超过 50ms 时,FCP 和交互时间之间的所有时间段的总和,以毫秒为单位。
  • Cumulative Layout Shift(CLS):累积布局偏移,指网页布局在加载期间的偏移量,用来衡量视觉界面稳定性的一个指标。

而这 6 个指标对应的权重分别为 10%、10%、25%、10%、30%、15%,通过加权平均计算出性能总分为图中的 95 分,具体可查看 Lighthouse Scoring Calculator(Lighthouse 评分计算器)。

View Original Trace(查看原始跟踪)

在 Metrics(指标)部分下,有许多快照来显示如何加载此网页。单击 View Original Trace(查看原始跟踪)按钮将转到 Performance(性能)面板,在其中跟踪加载详细信息。

Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

View Treemap(查看树形图)

单击 View Treemap(查看树形图)会在新标签页中打开 Lighthouse Treemap,查看 JS 的 Resource Bytes(字节大小)、Unused Bytes(未使用字节)以及 Coverage(覆盖率)。

Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

Show audits relevant(显示相关审核)

Show audits relevant(显示相关审核)按 ALL、FCP、LCP、TBT、CLS 五个指标显示,往下滑动可以看到 Opportunities、Diagnostics 两个部分。

Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

在这里面可以看到给出各个方面的性能优化建议,比如图片、css、js 这些文件的处理,还有 html 里面标签的使用、缓存处理等建议,可以根据这些来对网站进行优化。

  • Opportunities 指的是优化机会,它提供了详细的建议和文档,帮助我们具体进行实现和改进,这些建议可以帮助您更快地加载页面;
  • Diagnostics 指的是诊断存在的问题,显示了有关应用程序性能的更多信息,为进一步改善性能的实验和调整给出了指导;
  • Passed audits 是通过审核的的各项良好性能参数。

Accessibility(无障碍功能)

当我们说某个网站具有 Accessibility(无障碍功能)时,我们的意思是网站的内容可用,其功能可由任何人操作。所有用户都能使用键盘、鼠标或触摸屏,与网页内容进行清晰明了的交互,这会让使用者获得良好的体验。

我们在探讨无障碍功能时往往是围绕身体有缺陷的用户,比如由于视力、身体、年龄方面的限制,造成阅读内容、触控操作、声音信息等方面的获取困难。下面我们来看一个示例:

Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

我们可以看到上面的图中存在的一些问题:

  • 文本对比度低,这会让弱视用户难以阅读;
  • “Remember details?” 标签未关联复选框,因此您只得点按或点击标签旁那个小方框,而不能直接点击标签;
  • 将标签置于左侧,而将字段置于右侧,会让许多人难以将它们关联起来,也会让需要进行放大的人几乎无法使用页面;
  • 此外,使用屏幕阅读器的用户会难以弄清楚关联问题。

我们经过调整:

  • 将文本的颜色加深;
  • 修改设计,让标签靠近它们所标示的字段;
  • 修正标签,使其与复选框关联起来,以便点击标签同样可以进行状态切换。

Chrome F12 开发者工具 DevTools 审查(Lighthouse)说明

无障碍性功能每个指标项测试结果为 pass 或者 fail,与性能指标项的计算方式不同,当页面只是部分通过某项指标时,页面的这项指标将不会得分。

例如,如果页面中的一些元素有屏幕阅读器友好的命名,而其他的元素没有,那么这个页面的 screenreader-friendly-names 指标项得分为 0。

Best Practice(最佳做法)

Best Practice(最佳做法)评分的分数区间为 0-100,影响这项评分的指标项的权重都是相同的。

比如:推荐使用 https,跨域的跳转链接需要使用 rel 标识,不能使用废弃的 API 等等。

SEO(搜索引擎优化)

SEO(Search Engine Optimization):汉译为搜索引擎优化,它检查页面是否针对搜索引擎结果排名进行了优化。

SEO 是一种通过分析搜索引擎的排名规律,了解各种搜索引擎怎样进行搜索、抓取页面、确定特定关键词的搜索结果排名的技术,包含站外 SEO 和站内 SEO 两方面,其技术手段主要有黑帽(black hat)、白帽(white hat)两大类。

  • 通过作弊手法欺骗搜索引擎和访问者,最终将遭到搜索引擎惩罚的手段被称为黑帽,比如隐藏关键字、制造大量的 meta 字、alt 标签等。
  • 而通过正规技术和方式,且被搜索引擎所接受的SEO技术,称为白帽。

Progressive Web App(渐进式网页应用程序)

Lighthouse 使用 PWA 基准检查项列表(Baseline PWA Checklist)进行测评,测评结果将这些指标项分成了四个类别,共包含 12 个自动测试项和 3 个手动测试项,其中各个自动测试项的评分权重是相同的。

PWA 的评测指标对我们来说非常重要,我们可以从这四个类别详细了解一下基准指标项。

快速可靠

  • 页面在移动网络条件下能够快速加载;
  • 在离线条件下页面能够返回状态码 200,这里我们可以通过 Service Worker 来实现离线可用;
  • start_url 在离线条件下返回状态码 200,start_url 是 manifest.json 中的一个属性,它指定了用户打开该 PWA 时加载的 URL。

可安装

  • 始终使用 HTTPS;
  • 注册 Service Worker 来缓存页面以及 start_url;
  • 使用 manifest 文件来实现安装 PWA 的需求,浏览器能够主动通知用户将应用添加到桌面,增加留存率。

PWA 优化

  • 将 HTTP 流量重定向到 HTTPS;
  • 配置自定义启动画面;
  • 设置地址栏主题颜色;
  • 页面内容针对视口大小自适应,对移动用户的展示更友好;
  • 使用了 <meta name="viewport"> 标签,并设置了 width 或 initial-scale 属性;
  • 当 JavaScript 文件不可用时,提供降级措施,页面能显示基本内容而不出现白屏。

手动测试项

  • 站点跨浏览器可用,如主流浏览器 Chrome, Edge, Firefox 及 Safari 等;
  • 页面间切换流畅,即使在较差的网络环境下,切换动画也应该简洁顺畅,这是提高用户感知体验的关键;
  • 保证每个页面都有独一无二的 URL,能够在新的浏览器窗口打开,且方便在社交媒体上进行分享。

除了上述基准指标项之外,为了让 PWA 的体验更加完美,还有一些 Lighthouse 未实现检查的进阶指标,也就是可以作为示范性参考的 PWA 的指标,比如用户体验、缓存、推送通知等等。

版权声明:本文为博主原创文章,未经博主允许不得转载。http://www.dedenotes.com/html/devtools-lighthouse.html
(1)
打赏 微信扫一扫 微信 支付宝 QQ 扫码打赏

HTTP消息结构 HTTP请求报文和响应报文的格式

Dedenotes 赞(3)

HTTP 协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等),所有的 WWW(World Wide Web)文件都必须遵守这个标准。

meta

Dedenotes 赞(3)

meta 是 html 语言 head 区的一个辅助性标签,位于文档的头部,不包含任何内容,标签的属性定义了与文档相关联的名称/值对。meta 标签可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

防止表单重复提交的 4 种方法

Dedenotes 赞(3)

平时开发的项目中可能会出现下面这些情况:由于用户误操作,多次点击表单提交按钮;由于网速等原因造成页面卡顿,用户重复刷新提交页面;黑客或恶意用户使用 Postman 等工具重复恶意提交表单(攻击网站)。