dtcms 模板下载 整数转换 k8s 5G bash winforms sas odbc Ractivejs 百度seo关键词 后台管理页面模板 mac安装hadoop matlab中log函数 collection框架的结构 etl数据 mysql插入 python基础教程 python编程语言 java入门学习 学java基础 java包名 java的多线程 方正流行体 idataparameter ip地址转换器 惠普战99 坐标标注插件 英雄联盟设置 jarsigner 淘宝店铺采集 相册制作软件 vs2008中文版下载 红米手机怎么连接电脑 黑道圣徒4去马赛克 hdcp是什么 上单艾克出装 c4d克隆 cdr群组快捷键 楷体gbk qq提取安装文件失败
当前位置: 首页 > 学习教程  > 编程语言

前端性能优化大全:使用Lighthouse来针对性提高页面性能

2021/1/13 19:22:18 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

lighthouse Lighthouse是用于提高网页质量的开源自动工具。 您可以在公开或需要身份验证的任何网页上运行它。 它对性能,可访问性,渐进式Web应用程序,SEO等进行审核。 一、使用Lighthouse生成报告 打开自己项目页面控制台 command shift p…

lighthouse

Lighthouse是用于提高网页质量的开源自动工具。 您可以在公开或需要身份验证的任何网页上运行它。 它对性能,可访问性,渐进式Web应用程序,SEO等进行审核。

一、使用Lighthouse生成报告

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

  2. command + shift + p 打开选项

  3. 搜索 lighthouse
    lighthouse

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

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

二、针对性的性能优化

1. 适当大小的图像

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

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

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

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

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

4. 预加载关键请求

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

5. 删除未使用的JavaScript

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

6. 避免大量的网络负载

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

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

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

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

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

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

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

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

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

11. 避免DOM太大

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

12. 减少JavaScript执行时间

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

13. 避免链接关键请求

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ap65GiXZ-1610531071028)(https://note.youdao.com/src/74AFB42C805D4E1087B99DD8CF3993CB)]

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

本文链接: http://www.dtmao.cc/news_show_600046.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?