Lighthouse
Lighthouse是用于提高网页质量的开源自动工具。 您可以在公开或需要身份验证的任何网页上运行它。 它对性能，可访问性，渐进式Web应用程序，SEO等进行审核。 您可以在Chrome DevTools中，从命令行或作为Node模块运行Lighthouse。 您为Lighthouse提供一个URL进行审核，它对页面进行一系列审核，然后生成有关页面效果的报告。 从那里，将失败的审核用作改进页面的指示。 每个审核都有一个参考文档，解释了为什么审核很重要以及如何解决它。
一、使用Lighthouse生成性能报告
-
打开自己项目页面控制台
-
command + shift + p打开选项 -
搜索
lighthouse并选中 -
使用
lighthouse生成报告右边显示移动端还是PC端，左边点击
Generate report进行报告生成 -
生成一个惨不忍睹的性能报告
二、针对性的性能优化-39条优化建议
1. 适当大小的图像
2. 提供新一代格式的图像
3. 视频格式替换动图(gif/apng)
4. 预加载关键请求
5. 删除未使用的JavaScript
6. 避免大量的网络负载
7. 确保文本在Webfont加载期间保持可见
8. 图像元素要有明确的宽度和高度
9. 通过有效的缓存策略服务静态资源
10. 减少主线程工作，避免长时间的主线程任务
11. 避免DOM太大
12. 减少JavaScript执行时间
13. 避免链接关键请求
14. 保持低请求数量和传输大小
15. 避免大的布局修改
16. 避免非合成动画
17. 消除render-blocking资源
18. 推迟屏幕外图像
19. 压缩CSS
20. 压缩JS
21. 删除未使用的CSS
22. 图片base64编码
23. 启用文字压缩
24. 资源预连接
25. 让主文档的响应时间短
26. 避免多次页面重定向
27. 使用http2
28. 删除JavaScript包中的重复模块
- 删除重复的JavaScript模块，以减少网络活动消耗的不必要字节。
29. 避免将旧版JavaScript提供给现代浏览器
30. 最大限度地减少第三方使用
31. 使用被动侦听器改善滚动性能
32. 不要使用document.write()
33. 使用https
- 所有站点都应使用HTTPS保护，即使是那些不处理敏感数据的站点也是如此。 这包括避免混合内容，尽管最初的请求是通过HTTPS服务的，但其中的某些资源仍通过HTTP加载。 HTTPS可以防止入侵者篡改或被动监听您的应用程序与用户之间的通信，这是HTTP / 2和许多新的Web平台API的先决条件。
