首页 开发者工具 lighthouse - 前端网站性能评测工具

lighthouse - 前端网站性能评测工具

用户数 : 500000 分类 : 开发者工具 扩展大小 : 26.35KiB 最后更新时间 : 2019-11-19 版本 : 100.0.0.0
prev extension banner next extension banner
                            

lighthouse插件 - 前端网站性能评测工具背景

对于前端开发者来说,应该都非常熟悉lighthouse插件了。它是一款由谷歌官方团队开发的开源网站性能测评工具,中文别称“灯塔”,主要用于测试网站页面性能、PWA、可访问性(无障碍)、SEO等内容。

lighthouse插件会对任意网页的各个测试项的结果打分,并给出优化建议报告,是一个非常实用的可视化网站优化工具。


lighthouse插件 - 前端网站性能评测工具介绍

Lighthouse 是一款开源的自动化工具,用于改进网络应用的质量。 开发者可以将其作为一个Chrome 扩展程序运行,或从命令行运行。在前端开发中,开发人员通常对于自己写的的app或者web page性能的好坏,是难以用肉眼辨别的。

这时候前端工程师们就需要专业且客观的网站测试工具,来帮助分析和查找网页还有哪些需要优化的地方。

lighthouse插件就可以快速分析网站,并以简单易懂的界面呈现各项指标和优化建议,能让开发人员根据生成的评估页面进行完善,提高用户体验。


lighthouse插件 - 前端网站性能评测工具功能

- 安装lighthouse插件之后,在需要测试的网站上点击谷歌浏览器地址栏上的插件图标。再点击【Generate report】按钮,等待分析结果。

- 然后可以得到一份完整的性能测试报告。报告主要分为性能、辅助功能、最佳实践、SEO、渐进式WEB应用这五个方面。

- 在报告中,你可以看到它给你各个方面的建议,比如加载速度,图片、css、js这些文件的处理,还有html标签的使用,缓存处理等建议,开发人员可以根据这些来对网站进行优化。

- 对于SEO来说,这个工具也能帮助发现不少细节上的优化。lighthouse插件可以评估网站在搜索引擎中的效果,这些检查可确保网页上针对搜索引擎结果排名进行了优化。

你还可以看到它们最后的更新时间,如果它们有自己的主页,还可以对它们进行分类和其他更多的功能。


lighthouse插件 - 前端网站性能评测工具安装

点击本页面的下载按钮,将解压后的crx文件拖拽到浏览器扩展管理页面(注:需打开开发者模式)。


lighthouse插件 - 前端网站性能评测工具使用

安装好chrome插件后,直接点击扩展按钮即可对已安装的脚本进行便捷管理了。


Lighthouse is an open source automation tool for improving the quality of web applications. Developers can run it as a Chrome extension or from the command line. In front-end development, it is difficult for developers to distinguish the performance of their own written apps or web pages with the naked eye.

######## Features ########
-After installing the lighthouse plug-in, click the plug-in icon on the Google browser address bar on the website you want to test. Then click generate report to wait for the analysis result.

-Then a complete performance test report can be obtained. The report is mainly divided into five aspects: performance, auxiliary function, best practice, SEO and progressive web application.

-In the report, you can see the suggestions it gives you in various aspects, such as the loading speed, the processing of images, CSS, JS files, the use of HTML tags, cache processing and other suggestions. Developers can optimize the website according to these suggestions.

-For SEO, this tool can also help to find many details of optimization. Lighthouse plug-in can evaluate the effect of the website in the search engine, and these checks can ensure that the page is optimized for the ranking of search engine results.

Thanks for using lighthouse. :)

########## Bugs ##########

Please DON'T report bugs by a review, BUT HERE:
- https://github.com/GoogleChrome/lighthouse

######## Changelog #######

https://github.com/GoogleChrome/lighthouse

########## FAQ ###########

https://github.com/GoogleChrome/lighthouse

查看更多
下载 如何离线安装? Chrome store

分享

全部评论

    展开更多评论

    错误提示保存失败
    成功提示保存成功
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“插件”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功
    下载遇到问题?请添加QQ群:398095333
    close
    qr-code

    为打击盗链困扰,本站已启用公众号验证
    微信扫码关注上方公众号,回复“脚本”二字获得验证码,验证码5分钟内全站有效。

    正在验证
    验证成功