微信小程序打开率提升

570 阅读2分钟
微信小程序后台有一个we分析工具,可以查看当前小程序的性能数据
其中有一项就是小程序的打开率

image.png

什么是打开率呢?

微信的官方解释就是冷启动情况下到首屏渲染完成的留存率。

image.png

那么,就容易理解了。只要首次打开的页面越快,打开率也就越高。

所以,如何提升首页(这里指小程序首次打开页面即启动页)的性能,加快渲染就显得至关重要了。

image.png

首先、先看下微信小程序的启动流程:

  1、资源准备阶段开发者一般无法干涉

  2、开发者代码注入阶段:可以做的有很多。比如主包大小,分包大小越小,下载时间就越短,自然打开就越快

一、代码包优化

  1、非主要页面迁移至分包。
  2、冗余代码处理、冗余样式处理、内联base64图片、font文件处理

二、冷启动各生命周期优化

  1、在小程序启动流程中,会依次并顺序执行App.onLaunch、App.onShow、Page.onLoad、Page.onShow。
  在这些生命周期中应避免使用复杂耗时的运算,以及wx.getStorageSync等wx同步api的频繁调用。

三、接口优化

1、减少首页接口调用,微信小程序能同时支持10个http并发请求。过多的请求也会导致渲染延时。
2、优化一些渲染数据的列表接口,减少接口返回数据量大小。

四、小程序app.json配置开启lazyCodeLoading

image.png

五、开启独立分包功能

image.png

六、静态页或者活动页可使用小程序webivew页面,迁移至H5。减少整个小程序包体积

image.png

七、首页如果存在过多的下拉分页列表数据,可以使用recycle-view组件,优化渲染。

image.png

八、使用初始渲染缓存技术

image.png

九、优化setData的调用。尽量避免频繁使用setData。