39条性能优化建议--前端性能优化大全：使用Lighthouse来针对性提高页面性能

Lighthouse

一、使用Lighthouse生成报告

1. 打开自己项目页面控制台

2. command + shift + p 打开选项

3. 搜索 lighthouse
   

4. 选择 lighthouse
   
   右边显示移动端还是PC端，左边点击Generate report进行报告生成

5. 生成一个惨不忍睹的性能报告
   

二、针对性的性能优化

1. 适当大小的图像

• 提供适当大小的图像，以缩短加载时间。

2. 提供新一代格式的图像

• 提供JPEG 2000，JPEG XR和WebP这样的图像格式通常比PNG或JPEG更好的压缩率，意味着更快的下载速度和更少的数据消耗。

3. 视频格式替换动图(gif/apng)

• 大的GIF不能有效地传递动画内容。 考虑将MPEG4 / WebM视频用于动画，将PNG / WebP用于静态图像，而不是GIF，以节省网络字节。

4. 预加载关键请求

• 考虑使用优先获取当前在页面加载中稍后请求的资源

5. 删除未使用的JavaScript

• 删除未使用的JavaScript以减少网络活动消耗的字节。

6. 避免大量的网络负载

• 大量的网络负载使用户消耗了更多的流量和更多的时间。

7. 确保文本在Webfont加载期间保持可见

• 利用字体显示CSS功能来确保在加载Web字体时用户可见文本。

8. 图像元素要有明确的宽度和高度

• 在图像元素上设置明确的宽度和高度，以减少布局偏移并改善CLS。

9. 通过有效的缓存策略服务静态资源

• 较长的缓存生存期可以加快对页面的重复访问。

10. 减少主线程工作，避免长时间的主线程任务

• 考虑减少花在解析，编译和执行JS上的时间。 您可能会发现提供较小的JS负载有助于解决此问题。

11. 避免DOM太大

• 较大的DOM将增加内存使用量，导致更长的样式计算，并产生复杂的布局重排。

12. 减少JavaScript执行时间

• 减少花在解析、编译和执行JS上的时间。提供较小的JS文件有助于解决此问题

13. 避免链接关键请求

• 下面的关键请求链向您显示了哪些资源被高优先级加载。 考虑减少链的长度，减小资源的下载大小，或推迟不必要的资源的下载以改善页面负载

14. 保持低请求数量和传输大小

• 要为页面资源的数量和大小设置预算，可以添加budget.json文件

15. 避免大的布局修改

16. 避免非合成动画

• 未合成的动画可能会变得过时并会增加CLS。

17. 消除render-blocking资源

• 资源阻塞了页面的第一幅画。 考虑内联交付关键JS / CSS并推迟所有非关键JS /样式。

18. 推迟屏幕外图像

• 在所有关键资源完成加载后，考虑延迟加载屏幕外和隐藏图像，以缩短交互时间

19. 压缩CSS

• 缩小CSS文件可以减少网络有效负载的大小

20. 压缩JS

• 缩小JavaScript文件可以减少有效负载大小和脚本解析时间。

21. 删除未使用的CSS

• 从样式表中删除无效规则，并延迟不用于首屏内容的CSS加载，以减少网络活动消耗的不必要字节。

22. 图片base64编码

• 优化的图像加载速度更快，消耗的数据更少。

23. 启用文字压缩

• 基于文本的资源应通过压缩（gzip，deflate或brotli）提供服务，以最大程度地减少网络总字节数。

24. 资源预连接

• 考虑添加“ preconnect”或“ dns-prefetch”资源提示以建立与重要第三方起源的早期连接。

25. 让主文档的响应时间短

• 使服务器对主文档(index.html)的响应时间短一些，因为所有其他请求都依赖于它

26. 避免多次页面重定向

• 重定向会导致页面加载之前的其他延迟。

27. 使用http2

• 与HTTP / 1.1相比，HTTP / 2具有许多优点，包括二进制标头，多路复用和服务器推送。

28. 删除JavaScript包中的重复模块

• 删除重复的JavaScript模块，以减少网络活动消耗的不必要字节。

29. 避免将旧版JavaScript提供给现代浏览器

• Polyfill和转换使旧版浏览器可以使用新的JavaScript功能。 但是，现代浏览器并不需要很多。 对于捆绑的JavaScript，采用采用模块/无模块功能检测的现代脚本部署策略，以减少交付给现代浏览器的代码量，同时保留对旧版浏览器的支持。

30. 最大限度地减少第三方使用

• 第三方代码会严重影响负载性能。 限制冗余第三方提供程序的数量，并在页面主要完成加载后尝试加载第三方代码。

31. 使用被动侦听器改善滚动性能

• 考虑将触摸和滚轮事件侦听器标记为“被动”，以提高页面的滚动性能。

32. 不要使用document.write()

• 对于连接速度较慢的用户，通过document.write()动态注入的外部脚本可能会使页面加载延迟数十秒

33. 使用https

• 所有站点都应使用HTTPS保护，即使是那些不处理敏感数据的站点也是如此。 这包括避免混合内容，尽管最初的请求是通过HTTPS服务的，但其中的某些资源仍通过HTTP加载。 HTTPS可以防止入侵者篡改或被动监听您的应用程序与用户之间的通信，这是HTTP / 2和许多新的Web平台API的先决条件。

34. 避免在页面加载时请求地理位置许可

• 考虑将请求绑定到用户操作时进行地理位置许可

35. 避免在页面加载时请求通知权限

• 考虑将请求绑定到用户操作时进行通知权限许可

36. 提供不同分辨率的不同图片

• 按照不同分辨率提供不同图像，不同分辨率加载不同图像，以最大程度地提高图像清晰度。

37. 避免应用程序缓存

• 不建议使用应用程序缓存。

38. 避免使用过时的API

• 弃用的API最终将从浏览器中删除。

39. 不要让错误日志反馈到控制台

• 尽量让控制台没有错误日志

参考

• Lighthouse
• Lighthouse performance scoring

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！