网站性能调优开发工具:Lighthouse

  Google成立于1998年9月4日,由拉里·佩奇和谢尔盖·布林共同创建,被公认为全球最大的搜索引擎公司。

  Google是一家位于美国的跨国科技企业,业务包括互联网搜索、云计算、广告技术等,同时开发并提供大量基于互联网的产品与服务,其主要利润来自于AdWords等广告服务。

  作为一个半吊子的前端,却患了和众前端大佬们的通病–折腾。或许是兴趣,或许是喜欢一串串优雅的代码放到编辑器然后让他没有bug地运行在浏览器时那种奇怪的赶脚。

  小弟不才,除了折腾,还是折腾,这不,作为Google的粉丝今天就给大家带来一个Web页面性能调试工具的插件——>Lighthouse 下面给大家贴出官方的插件描述:

原文

Lighthouse

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

翻译

Lighthouse

Lighthouse是一种开源的自动化工具,用于提高Web应用程序的性能,质量和正确性。

在审核页面时,Lighthouse针对该页面运行一系列测试,然后生成一个关于页面执行情况的报告。从这里,您可以使用失败的测试作为指标,了解您可以采取哪些措施来改进您的应用。

如何使用


方法一:

作为 Chrome 扩展程序运行,或作为命令行工具运行。Chrome 扩展程序提供了用户友好的界面,方便读取报告。而命令行工具允许您将 Lighthouse 集成到持续集成系统。

开发者工具

你只需要打开 Chrome 的开发者工具,点击 Audits,然后就可以看到 Lighthouse 界面:
lighthouse插件界面截图


你可以到 chrome web store 下载并且安装 Lighthouse Chrome 扩展程序。
lighthouse生成的部分报告截图

方法二:

NPM安装

1、进入cmd,全局安装lighthouse
npm install -g lighthousenpm全局安装lighthouse


2、完成后,使用lighthouse命令,并且生成您想查看的域名
,具体格式为:lighthouse https://example.com --view
lighthouse生成过程


待程序运行结束后,浏览器会自动打开对应网站页面生成的性能报告

参考资料:

网站性能调优开发工具: Lighthouse, Puppeteer 以及进阶部分丨 Google 开发者大会 2018

-------------本文结束感谢您的阅读-------------

本文标题:网站性能调优开发工具:Lighthouse

文章作者:Edwardvoon

发布时间:2018年09月24日 - 22:09

最后更新:2018年09月29日 - 10:09

原始链接:https://edwardvoon.github.io/2018/09/24/lighthouse/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!