性能测评工具lighthouse的使用.pdfVIP

性能测评⼯具lighthouse的使⽤

1、⾕歌插件lighthouse的基本介绍

Lighthouse是⼀个⽹站性能测评⼯具，它是GoogleChrome推出的⼀个开源⾃动化⼯具，能够对PWA和⽹页多⽅⾯的效果指标进⾏评测，并给出最佳实践的建议以帮助开发者改进⽹站的

质量。

它能够⽣成⼀个有关页⾯性能的报告，通过报告我们就可以知道需要采取哪些措施来改进应⽤的性能和体验。

1.1、什么是PWA

PWA，全称直译过来就是渐进式⽹页应⽤（ProgressiveWebApp）。它是⼀种⽹页应⽤，它可以离线使⽤，可以变成独⽴应⽤安装到系统中。它⾮常的轻量化，在多平台上⾯拥有⼀致的界

⾯。

PWA可以在浏览器上访问，也可以单独安装成⼀个应⽤在系统上。

在电脑端，最简单的就是使⽤Chrome浏览器。当Chrome检测到当前访问的⽹页⽀持PWA的时候，在地址栏的右端就会出现⼀个安装按钮，点击即可将这个PWA变成⼀个应⽤安装到浏览器

中。⽽在Android上，使⽤Chrome浏览PWA站点时也会有相应的提⽰，添加到应⽤之后就会⾃动进⾏编译安装。iOS上⾯使⽤Safari打开⽹站然后在菜单中选择添加到HomeScreen就可以

了，之后点开应⽤图标就会以独⽴应⽤形式出现，⽽不是通过Safari加载⽹页。

⼀些可⽤的PWA应⽤：微博PWA（）和飞猪（）。有兴趣的打开看看，可以看到浏览器右上⾓有⼀个安装按钮，点击即可将该应⽤安装到系统中

参考：

有多种⽅法可以使⽤lighthouse来对我们的⽹站进⾏性能测评，在需要使⽤到node时，node的版本会对lighthouse有影响，低版本的node将执⾏不了lighthouse，node版本应该保持8.9

及以上版本（或更新）。

各使⽤⽅法如下：

2、使⽤Chrome插件lighthouse

（注意，插件的下载和报告的查看可能都需要墙后才能看）

可以在Chrome扩展商城⾥搜索lighthouse，或者通过以下地址来下载lighthouse添加⾄Chrome浏览器中。

插件商城下载地址：

（上⾯地址应该需要墙才能访问，这⾥给⼤家分享⼀个⽹盘下载链接：链接：提取码：4ysn）

插件安装成功后，点击浏览器的右上⽅可以看到灯塔的按钮标记。

先访问需要评估的⽹站，⽐如，然后点击灯塔按钮，选择generatereport即可。lighthouse会运⾏⼀系列的测试审查这个页⾯，然后它会把关于页⾯执⾏的⼀些性能指

标以报告的形式展⽰给你。你可以参考这份报告中的⼀些指标提⽰来提升你的⽹站应⽤。Lighthouse能够⽣成⼀份JSON或HTML报告，⽐如下图：

lighthouse可以⽣成HTML和json格式的报告，HTML可以直接打开，json格式的报告可以通过这个地址来打开。

3、直接使⽤Chrome浏览器开发者⼯具（F12）⾃带功能

在⾼版本（应该是=60）的Chrome浏览器中，Lighthouse已经直接集成到了调试⼯具DevTools中了，因此不需要进⾏任何安装或下载。

按F12打开开发者⼯具，可以看到在console、security等选项后⾯有⼀个Audits（安装了lighthouse插件或者是⾼版本的⾕歌浏览器可能显⽰的是lighthouse）选项，选择该选项，然后点

击generatereport即可。

4、使⽤npm包lighthouse

通过下载npm全局包lighthouse，我们可以直接在命令⾏当中使⽤lighthouse来对⽹站进⾏性能测评。

⾸先，需要先安装Node，需要Node8LTS(8.9)及以上版本。然后安装全局包lighthouse：

npminstall-glighthouse

安装完成后我们就可以直接对某⼀个⽹站运⾏lighthouse命令了：

lighthousehttp:///

默认情况下，会在执⾏命令的当前⽬录下⽣成⼀个HTML⽂件，直