如何提升小程序的打开速度?图片、代码、后端配置都需要!

2024-07-16

首页 > 行业资讯 > 小程序开发 > 如何提升小程序的打开速度?图片、代码、后端配置都需要!

昨天同事说,客户小程序下拉的加载更多内容,等了3秒才加载出来,实在是太慢了。而另外一个客户的小程序,下拉1秒就加载出来了。虽然只相差了2秒,但是这2秒给用户带来的体验,简直是千差万别。现在的用户可没那么多耐心,都希望是秒开。针对小程序的加载速度,今天我来做一个全面的解决方案。

我从小程序外部配置和内部配置(登录微信小程序后台可以进行的配置)两个方面一起解决。首先我来讲解外部配置。我们需要结合下面的多种方法进行“彻底”解决。

小程序图片及代码加载优化:

优化1:jpg转webp格式。使用webp格式的图片首先我们知道,在小程序中是支持webp格式的图片的,所以我们可以将图片转换为webp格式,这样可以减少图片体积,提升加载速度。 公司使用的阿里云oss进行图片存储,阿里云oss是支持格式转换的,只需要在图片url后面加一定的参数即可,我们可以给图片后面加上?x-oss-process=image/format,webp即可。我用压缩网站把jpg转换为webp之后,从1595kb变成了390kb,图片大幅减小了!尤其是图片比较多的情况,这种方法非常非常适用!

优化2:代码实现oss图片压缩。根据需求设置适当的分辨率阿里云oss支持在图片后面加上参数来设置图片的分辨率,image标签图片宽度均为小程序图片默认宽度;即为width: 320px;,所以我们可以给图片url后面加上/resize,w_320即可,其中w_320表示图片宽度为320px。图片大小大幅度减少!加载速度提升了5倍!针对不同的网络环境,可以写一个检测用户网络状态的方法,在不同的网络环境下加载不同分辨率的图片。

优化3:使用雪碧图。写前端代码的小伙伴都知道,原来我们适用backgroud-position的时候,会加载一张很多icon拼接在一起的图片,然后用top,left的相对定位调取对应的图片,这样做的目的是可以减少请求,假设一个小程序会调用100个图标,如果每个图标的地址都不一样,那么就需要调用100次,如果用一张雪碧图,那么调用一次就保存到缓存里面,加载的速度会大大加快。

小程序后台功能配置优化:

很多小伙伴不知道,在微信小程序的后台也有对应的小程序加载优化选项。我们只要开通配置上面的选项,就会让我们小程序“提速”不少。我接着前面的优化序号进行编写。

优化4:数据周期性更新。登录小程序的管理后台之后,点击左侧开发管理,右侧->服务器域名配置下面。找到数据更新周期功能。开启功能后,小程序可在后台每隔12小时下载数据到本地,使小程序在弱网或无网条件下也可以正常使用。周期性更新能够在用户未打开小程序的情况下,也能从服务器提前拉取数据,当用户打开小程序时可以更快地渲染页面,减少用户等待时间,增强在弱网条件下的可用性。

优化5:数据预拉取。在数据周期性更新下面,找到数据预拉取。开启功能后,在用户打开小程序时,小程序可提前拉取所需要的数据,从而提升小程序的加载速度。预拉取能够在小程序冷启动的时候通过微信后台提前向第三方服务器拉取业务数据,当代码包加载完时可以更快地渲染页面,减少用户等待时间,从而提升小程序的打开速度 。

有关小程序的制作,上架,价格,优化等相关问题,请与成都小火软件公司在线客服沟通。



推荐文章

微信小程序备案说明(含不通过的原因)

2024-09-19 18:14:32

同城送水小程序-同城配送小程序

2024-09-19 17:47:27

现在做一个小程序需要多少钱?

2024-09-16 22:18:15

同城配送APP软件2025新版本

2024-09-15 10:57:14

苗木产品交易小程序

2024-09-12 15:32:15

2024新版美容院微信小程序上线反馈

2024-09-12 15:11:25

全国性质的二手闲置平台小程序软件

2024-09-10 13:38:20

成都抖音小程序制作公司介绍

2024-09-09 14:08:55

Core competence

高质量软件开发公司-成都小火科技

多一套方案,多一份选择

联系小火科技项目经理,免费获取专属《项目方案》及开发报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线 191-1355-1853

在线提交需求 191-1355-1853