你一定要知道的 Chrome DevTool 新功能

使用 Lighthouse 来提高网页质量

Chrome开发团队致力于那些让我们的浏览和开发体验变得更好的功能和改进。谷歌I/O 2017 开发者大会在四月成功举办,期间Google 向外界展示了很多重要的东西,其中一部分是有关Chrome DevTool的。因此作为使用Chrome进行开发的Web开发者们,我们自然也会受其影响。Chrome 60 在DevTool中加入了很多新功能和变化。最令人惊喜的是全新的Audits面板。

新的Audits面板基于Lighthouse, 它提供了一整套全面的测试来评估网页的质量。测试类别分别是性能、辅助功能、最佳实践和 PWA(Progressive Web Apps)

在本文中,我们将研究一下Audit这个功能,了解它测试的类别,在热门网站上实际应用一下这个功能,并分析一下测试得出的结果,最后简单说下Lighthouse的架构。


Chrome60 之前的版本

Audits 面板在DevTool中已经存在了一些时间了。只不过在Chrome 60之前的版本中, 这个面板只包含网络使用率和页面性能两个测量类别。现在Audits面板已经被Lighthouse的集成版取代。

从外观和感觉上来看,新老版本的Audit面板的差异还是很明显的,所以谷歌把它当做一个全新的功能提了出来。在旧版本的Chrome中你需要安装扩展或者node命令行工具才能使用Lighthouse,但在Chrome 60 中它已经是一个内置的功能了。 

Chrome 60之前的Audit功能


Lighthouse

Audits面板基于谷歌开发的Lighthouse,它提供了一整套的测试来评估网页的质量,并且它还是一个开源的项目。 Lighthouse 的口号是“Do Better Web” ,旨在帮助Web开发者改进他们现有的Web应用程序。通过运行一整套的测试,开发者可以发现新的 Web平台 API,意识到性能的隐患,并学习(新的)最佳实践。换句话说,就是让开发者在Web 开发上做得更好!DBW 作为一套独立的收集器和审查器与 Lighthouse 的核心测试同时运行。

想了解更多有关Lighthouse 是如何工作的,你可以查看谷歌I/O2017 开发者大会上关于它的一段演讲:

这段演讲主要讲述了Lighthouse 中都有哪些新功能,以及它是如何演变成现代Web开发的黄金搭档的。此外,还谈到了如何在不同环境(如,Node CLI,Chrome DevTools,WebPageTest和Headless Chrome)下使用Lighthouse,它的架构,它与GitHub /Travis/CI的结合,Headless Chrome,以及如何在网站上运行自定义审查项来扩展Lighthouse的功能。


如何使用Lighthouse

Audits 标签是DevTool内置选项卡的最后一个标签。想要使用它的话,需要安装Chrome 60 的开发版或者Canary版。

你可以按照以下步骤来审查页面:

  1. 按F12来打开DevTool。
  2. 点击 Audits 标签
  3. 点击 Perform an audit
  4. 点击 Run audit。Lighthouse启动DevTool来模拟一个移动设备,在页面上运行一堆测试,然后将结果显示在Audit 面板中。

在执行审查之前,带有Lighthouse logo的Audits 面板。


面板

Lighthouse 从4个方面来分析页面: 性能、辅助功能、最佳实践和 PWA。Lighthouse 会在一系列的测试下运行网页,比如不同尺寸的设备和不同的网络速度。它还会检查页面对辅助功能指南的一致性,例如颜色对比度和ARIA 最佳实践。

每个类别的审查报告

报告顶部的分数是每个类别的总分。报告的其余部分是决定得分的每一个测试项的具体描述。每个类别的分析结果都会以适当的结构展示在指定的面板中。


PWA

PWA 是可靠的,快速的,迷人的,尽管有很多因素会影响PWA的体验是中规中矩的,还是可圈可点的。 为了帮助团队创造最好的体验,Lighthouse整理了一份详细的清单,里面列举了想要创建一个Baseline PWA需要满足的条件,你也可以通过提供更有意义的离线体验,让应用与人交互得更快,以及关注其他更多的重要细节来升级成Exemplary PWA。

PWA 结果 —失败的测试

当我们点击顶部的PWA圆圈时,我们首先看到的是失败的测试列表 。我们可以研究一下问题出来哪里,然后修复这些失败的测试。

PWA测试报告的后面部分是通过的测试列表需要手动检查的测试列表。为了验证某些检查结果,我们必须手动去运行检查。这些检查很重要,但不影响得分。 

PWA 报告 — 通过的测试项和需要手动检查的部分


性能

Web性能是指网页在浏览器上下载和显示的速度。web性能优化是提高web性能的一个技术领域。

更快的网站下载速度已被证明能增加访客的留存率、忠诚度和用户满意度,特别是对于网速较慢的用户和移动设备上的用户。

性能类别的第一部分是指标。这些指标从多个维度对应用程序的性能进行评估。 

性能的指标

正如你所看到的,页面加载有包括3个重点:

  • 首次有效绘制-衡量的是用户看到网页的主要内容所需的时间。
  • 首次互动 - 指的是页面加载完成必要的脚本和CPU空闲足以应付大多数用户输入时的所需的时间。
  • 持续互动 -指的是页面中的大多数网络资源完成加载并且CPU在很长一段时间都很空闲的所需的时间。

性能的下一个部分是可优化项。 例如你可以通过压缩资源图像和文本来让程序运行的更快,这些都是可优化的地方。

可优化项和诊断

最后一部分是诊断。这些诊断显示了有关性能的更多信息。其中一个就是关键请求链,它显示了页面首次渲染时所需的资源。我们可以通过减少请求链的长度、减少下载资源的大小或延迟下载不必要的资源来提高页面的加载速度。


辅助功能

辅助功能指的是那些可能超出“典型”用户范围之外的用户的体验,他们以不同于你期望的方式访问你的网页或进行交互。具体点说,它关注的是身体正在经历着某种损伤或残疾的用户 - 记住,这种状况可能不是身体上的也可能是暂时的。

辅助功能类别测试屏幕阅读器的能力和其他辅助技术是否能在页面中正常工作。例如:按元素来使用属性,ARIA属性的最佳实践,可辨别的元素命名等等。

辅助功能类别报告


最佳实践

最佳实践类别检查一些建议,使页面现代化,并避免性能陷阱。例如:应用程序缓存,HTTPS 使用,不推荐使用的API, 用户的权限请求等等。这部分包含“失败和通过的测试列表”。 

最佳实践类别报告


热门网站的评分

在这一部分中,我们将看到3个热门网站的最高分。首先是Weather.com的着陆页。第二个是Google的结果页。最后一个是Facebook 的墙页。

热门网站评分

我们可以看到,PWA是得分最低的类别,也许是因为PWA是Web里的一个新领域。也可以看出,谷歌的性能是最好的,而weather.com的性能并不好(需要25ms才能进行持续交互)。所有被测试网站的辅助功能都很好,得分都大于80。辅助功能是一个得到了很大关注的领域,一些国家还将其列入了法律。


Lighthouse是如何工作的 - 架构

Lighthouse的工作流程有几个主要的步骤。部分步骤发生在浏览器中,其余的步骤由Lighthouse 运行器执行。 

Lighthouse 架构

下面是Lighthouse 的组成部分:

  • 驱动-和Chrome Debugging Protocol 进行交互
  • 收集器 -使用驱动程序收集网页信息。最小化后处理。收集器的输出结果被称为 Artifact
  • 审查器- 将Artifact作为输入,审查器会对其运行1个测试,然后分配通过/失败/得分的结果。
  • 类别- 将审查的结果分组到面向用户的报告中(如最佳实践)。对该部分应用加权和总体然后得出评分。

结论

辅助功能和PWA成为了现代web开发的主要衡量标准。很多公司投入时间和金钱来改善他们的网页。Lighthouse 在DevTool中的整合是可行的。它有助于Web开发人员变得更专业,还会提高网页的质量。我确信将来我们会在Audits标签中花很多时间,然后在一些热门的网站上运行它,还会有更多的人也会这么做。

未经允许不得转载:前端头条 » 你一定要知道的 Chrome DevTool 新功能
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们