前端性能优化经常被提及，那么如何给网页性能打分？让性能这个比较抽象的概念具现化！

有没有一个开源免费的工具，能给网页性能评分？

答案是有的，chrome 浏览器的 lighthouse 可以做到。

此工具的github介绍是这么说的 Automated auditing, performance metrics, and best practices for the web.翻译过来的意思是针对web的自动化审核、性能指标和最佳实践。

如何使用

本文编写时Google Chrome版本为 119.0.6045.124（正式版本） （64 位）

如果浏览器低于此版本，可以在chrome应用商店搜索lighthouse插件进行安装。

1. 启动开发者工具

• 方法一：任意网页点击鼠标右键，选择“检查”菜单即可启动开发者工具
• 方法二：任意网页上按键盘“F12”按键也可以启动开发者工具
• 方法三：任意网页上按键盘“ctrl+shift+i”也可以启动开发者工具
• 方法四：浏览器右上角菜单工具启动，参考以下截图：

2. 找到 lighthouse 菜单

3. 打开你要检测的网页，点击 “分析网页加载情况”，等待工具执行结果~~~

百度翻译这几个指标意思是：

• Performance：性能
• Accessibility：可访问性
• Best Practices：最佳实践
• SEO：搜索引擎优化
• PWA：渐进式WEB

针对评分较低的项，可以点击查看原因，然后根据建议优化即可。

由于网络存在波动情况，每次检测结果可能不同，建议多检查几次取平均值

个人建议 Performance 指标是最重要的，这涉及到一个网页打开速度，其他几个指标可以根据实际情况优化即可。