SmartAgency 图片优化

SmartAgency

图片优化

使用前情况

图片加载量:约100M

加载速度:2-3分钟。

处理策略缓存优化

缓存整个网站对于web应用来说现实之处有三

本地储存,只能以字符串形式存入读取。容量限制为5M,读取存入需要较多时间。

缓存需要更高的设备性能。大大提高了对安卓平板设备的需求。

对于经常需要更新http请求的React框架来说,实时渲染更加不利缓存。

考虑业务确实对缓存有需求,对图片做以下预处理:

设置缓存过期时间为1天之后。

优先加载显示图片。当显示图片正常显示后再行加载。减少首次加载数量。

减少不必要的组件重复渲染。(首次加载时为4次),调整后为2次。

字体优化

测速提示,网站原文件通常有40-50M的字体文件需要下载。占全部加载量的50-60%;

在充分尊重设计文件的情况下。使用精简字体,使用font-min插件对于“PFCG”优化,10M大小字体减少至3k左右(本地服务器加载时长~300ms),单页面全部字体加载量减少到20M左右。

当前每次跳转页面必须触发字体的读取和加载,实际上是阻碍项目部署上线的瓶颈。

上传图片优化

根据前端实际展示的尺寸 ,以上传图片百分比的最短边设定为较短的规定尺寸。canvas按照百分比计算较长边尺寸。经过前端预处理为jpg之后再行上传。

二次更新时发现,按照第一点的原则处理过的尺寸缩小了图片大小,然而压缩率仍然不满意。为此采用webP作为图片的载体。并设置压缩率为0.5。

以16M的全景图上传(最小尺寸限制为1080*1920)为例:

压缩前 jpeg压缩 webp(0.5质量) webp(0.6质量)

—— —— ——— —————- —————-

压缩前 16M 1053k 392k 455k

压缩后 6M 397k 197k 237k

考虑到尺寸压缩后的全景图片在大屏幕展示要求较高。无论是jpg压缩,还是webp0.5质量压缩,将质量都较为差。因此考虑webp0.6质量作为参照标准。全景图页面最多将加载9个图,全部最大加载量将在4-5m左右。

平稳退化

对于不支持webp的设备,采用jpeg压缩算法。确保兼容。(在实际应用场景中,设备均支持webP)。

其它体验及bug优化经纪人推荐

处理点击经纪人,模态弹框无法关闭。系数据重名问题。

后台上传

因添加数据加载业务而导致上传时间增长。增加上传等待图标,上传完成后。等待图标消失。

之前提到了业务逻辑有这么一条:

根据设计图尺寸,重新定制图片建议上传最小尺寸。

如果图片上传失败,则说明尺寸无法满足,请换用尺寸上传。

解决了因区分租房和售房而导致数据界面无法正常显示的问题。

原因在于业务逻辑改变,原本在后台只全部展示的数据被划分为租房和售房。

前台展示单元数量

前台显示的单元数量由45个上调到200个。

如果全部数据按照框架处理,加载50个数据。图片加载量为2M左右,页面处理速度在13s左右。

推荐逻辑

小手逻辑

点击小手层,20s之后显示。避免了无法从外层跳转回首页频繁出现小手的问题。

小手调整至右侧。

优化后现状

加载量: 低于30M。

本地服务器加载速度:

13-20秒,其中有10秒左右属于fonts(字体)加载。

纯图片在2-6s内基本可以完成。

three.js渲染全景图需要重新转换。需要2-3s的转换时间,系必要等待的时间。

遗留问题

租售房部分调用localStorage,State部分修改后造成全局混乱。故暂时不予修正。

对于线上部署来说,不适宜作特殊字体。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171220G0UYEH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券