这两天在微信小程序的群里,有一个网友提出他自己的小程序加载十分慢,我决定接下这个活做一波优化。

小程序运行机制:小程序做前端展示,wordpress直接做后台,小程序通过调用wordpress的 REST Api接口,直接拿到数据;

服务器环境配置:阿里云双核8G云服务器,带宽10M(搞摄影的土豪客户,就这个服务器配置可以吊打很多小公司的服务器);

拿到小程序源码,先测试看看是什么问题:



前两个请求,是客户自己服务器上wordpress REST Api的请求,最后一个请求,是为了对比,加入了我自己服务器wordpress REST Api的请求,可以看出,请求的时间过长,是平常的4-6倍,因为配置高、带宽高的情况下有这种问题,肯定是服务器环境导致的,远程连接服务器,环境为 windows server,并且启用了一键部署功能,也就说,最初直接生成了wordpress运行环境,但诡异的是,服务器上面没有安装数据库、PHP环境等,那么这时候就有个可怕的阴谋论:如果用户在阿里云中初始化服务器时,选择某个服务器系统,并且启用一键部署某某某环境的选项,看起来给你生成了,但实际上!生成的环境全部在另一台共享服务器中,这台服务器,可能有成千上万人的一键部署环境放在其中,所以导致请求十分缓慢!当你觉得慢找服务商时,解决方案很简单:加钱!其实从人性方面分析,选择一键部署的用户,肯定对服务器一知半解,那么服务商对于此类用户打上标签:“小白、人傻钱多”,就算宰了你也无所谓,因为你不属于核心用户群体。当然这只是我不经过大脑的阴谋论。

回到正题,解决方法很简单,“网管!电脑卡了!”   网管:“重启!” , 那我们就直接重装服务器系统,换为CentOs + nginx环境,备份数据库、使用wordpress导出功能、重新选择系统镜像、安装宝塔面板、安装环境……

全部完成、恢复数据库、恢复wordpress相关备份,至此已经完成了一半的优化;

接下来先看看小程序中的请求响应时间:

已经比以前快了很多,现在要做的是在小程序中进行图片优化,就像我之前文章(浅谈前端优化(一)    浅谈前端优化(二))的提到的优化方案,使用七牛云的CDN及、云存储及图片优化调整功能,进一步加快图片加载速度:



还是一样,七牛云建立OSS存储空间,绑定一个加速二级域名,镜像源站资源……建立新的图片处理样式,因为之前很多图片是高清图,并且部分格式为gif,平均大小在1.5M – 2M不等,所以需要将小程序首页的gif格式图片全部通过图片处理参数格式化为jpg格式,在图片样式中,添加一个新的类名:



限制图片宽度全部为600PX,格式为.jpg格式,图片质量为原图的90%,搞定!

接下来需要做的是,在小程序中调用新的图片路径,优化前的图片调用路径为:https://www.17studio.cn/xxx/xxx/abc.jpg,那么优化后经过七牛云CDN加速的图片调用路径应该为:https://resource.17studio.cn/xxx/xxx/abc.jpg*maxWidth,以首页为例,肯定是在请求后,将已有数据中的图片地址替换为新的地址,并且加上*maxWidth处理参数:

        for (let i = 0; i < data.length; i++) {
          let src = data[i].featured_media;
          let result = src.replace('www','resource');
          let finallSrc = `${result}*maxWidth`;
          data[i].featured_media = finallSrc;
          //setdata['posts[' + (offset + i) + ']'] = data[i];
        }

其实就是拿到原地址,使用replace方法将地址中的www换为resource,再到地址末尾加上*maxWidth参数即可,可以看到最终生成的地址:



只要有图片的地方全部这样优化处理,保证图片路径为七牛云CDN加速的地址就行。看一下最终优化效果:

500大洋到手: