作者:魏扼(文射)、范磊(蓄能)
近年来东南亚数字经济继续倒退,Lazada在买家和商家数量上持续放弃了强劲的持续增长态势。2020年的11.11有超过4000万个消费者、超过40万的商家和品牌来到Lazada平台,往年11.11当天有超过80万品牌和商家参加,Lazada 越南首小时同比去年销售额翻番,Lazada 新加坡首小时销售额较素日增长10倍!
一连串业务数据爆涨的背地,是流量的快速增长,容器作为H5业务的承载,也服务了越来越多H5业务:会场、Flash sale,Lazmall、钱包等等,因而,H5页面的用户体验受到更大的挑战。
在过来一年里,Lazada容器团队深耕H5容器优化,在面对线上弱网用户占比高,低端机型散布广等状况下,咱们采纳预渲染计划针对性优化了大促会场页面,独创性使用预热计划优化日常GCP页面和ICMS页面,同时对页面数据进行预取,动态资源提前缓存等计划,对头部H5页面流量业务进行深度优化,最终晋升H5业务的用户体验及业务转化。
问题剖析2020 D11大促当日,会场录屏首屏工夫9383ms,用户体验非常蹩脚,大部分用户无法忍受而间接退出页面,导致流量散失重大。
先剖析咱们关上会场页面的残缺链路,包含如下阶段:
整个流程工作沉重,网络开销大,导致页面渲染被拉到十分晚,首屏工夫长也就不奇怪了。
再分析线上用户的网络和用户机型的散布状况,如下图所示:
从上图能够看到线上大盘用户挪动网络占比高,低端机型占比大,特地是印尼用户,挪动网络稳定性状况更差,低端机型占比突出。那么针对低端机型以及弱网用户的优化成为咱们重点攻坚方向。
优化计划监控体系建设工欲善其事必先利其器,线上用户间隔咱们十分边远,他们的真实情况是怎么的,咱们很难体验到。那么只能从监控着手,对页面加载的各环节进行埋点上报,从具体的数据来掂量用户实在体验状况。对此,咱们将H5页面的加载环节进行了划分,具体参考如下:
包含路由、容器创立、页面加载、页面渲染、用户退出等环节,对每个环节进行埋点,将页面加载状态,工夫点、本环节耗时等信息上报到DP2和UT,并建设实时监控:
路由和容器初始化监控
页面加载监控
首屏工夫监控
容器预热:空间换工夫会场页面由GCP平台搭建进去的,剖析发现每个页面都会执行雷同的js,每个页面只有大量的业务js执行和渲染,通过探讨和验证,把公共的根底js形象进去,和业务js隔离,在用户关上页背后就将这些资源提前加载到webview中,一方面缩小用户点击后页面须要加载的资源,一方面提前对公共js、css进行了解析和预处理。
预热计划上线后,首屏工夫降到2s内,BDay预热命中率36%,通过埋点剖析,发现预热文档加载存在以下问题:
应用预热容器时, 预热工作未启动, 次要是唤端场景;预热未实现,预热耗时较长均匀耗时5000+ms,或者预热失败;应用预热容器时, 预热工作启动, 然而前端没有回调预热实现, 而过程存在保活机制, 一旦第一次没有回调, 预热webview可能始终不会被应用, 也不会重启预热工作, 除非重启过程;命中了预热容器, 前端未回调首屏, 导致不会再次创立新的预热容器, 下次启动页面无奈命中;未匹配预热规定。预热工夫提前针对预热文档加载耗时的问题,咱们把预热机会提前到首页可交互后,尽可能早地开启预热页面的加载,同时咱们将主文档资源通过ZCache提前缓存到本地,缩小网络传输。
预热重试机制预热启动机会在首页可交互,预热实现后,前端会告诉客户端预热实现事件,用户关上一个Web页面时,会判断是否预热实现,实现了才会去应用。这两头可能就会存在预热失败的状况导致客户端没有收到预热实现的告诉。另外在关上一个Web页面实现上屏之后,前端会回调一个首屏告诉,此时会触发预热一个新的WebView,通过数据分析,发现局部用户没有收到首屏告诉,导致下一次关上页面无奈命中预热。
针对上述情况,咱们提出了预热重试机制来晋升预热的命中率。次要是两种预热重试的场景, 第一种是首页闲时预热重试; 第二种是关上页面后预热重试,定义超时工夫,默认为10s,超时工夫到了之后会查看是否实现预热,没有实现预热则会触发一次新的预热,最多重试次数为3次。具体流程如下图:
预热链接匹配通过分析线上数据,发现某些GCP页面预热命中率为0,起因是命中预热须要匹配Web页面的链接与预热的主文档链接,须要Web页面链接的host和path与预热主文档的host和path要完全一致,然而因为种种原因,线上会存在host和path与预热主文档的不一样,导致无奈命中预热。针对这种状况,通过Orange配置下发正则匹配规定,页面链接只有匹配上了规定就能够应用预热容器,而不只是匹配繁多的预热主文档链接,同时配置对立整合了GCP页面和ICMS页面。
匹配规定示例:
prehot_regex={"id":[{"url":"https://pages.lazada.co.id/wow/gcp/route/lazada/id/upr_1000345_lazada/channel/id/upr-router/id_upr?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.co.id/wow/gcp/route/lazada/id/upr_1000345_lazada/channel/id/upr-router/id_upr"}],"my":[{"url":"https://pages.lazada.com.my/wow/gcp/route/lazada/my/upr_1000345_lazada/channel/my/upr-router/my?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.com.my/wow/gcp/route/lazada/my/upr_1000345_lazada/channel/my/upr-router/my"}],"sg":[{"url":"https://pages.lazada.sg/wow/gcp/route/lazada/sg/upr_1000345_lazada/channel/sg/upr-router/sg?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.sg/wow/gcp/route/lazada/sg/upr_1000345_lazada/channel/sg/upr-router/sg"}],"ph":[{"url":"https://pages.lazada.com.ph/wow/gcp/route/lazada/ph/upr_1000345_lazada/channel/ph/upr-router/render?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.com.ph/wow/gcp/route/lazada/ph/upr_1000345_lazada/channel/ph/upr-router/render"}],"th":[{"url":"https://pages.lazada.co.th/wow/gcp/route/lazada/th/upr_1000345_lazada/channel/th/upr-router/th?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.co.th/wow/gcp/route/lazada/th/upr_1000345_lazada/channel/th/upr-router/th"}],"vn":[{"url":"https://pages.lazada.vn/wow/gcp/route/lazada/vn/upr_1000345_lazada/channel/vn/upr-router/vn?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.vn/wow/gcp/route/lazada/vn/upr_1000345_lazada/channel/vn/upr-router/vn"}]}通过一系列优化,咱们大盘GCP页面和Flash sale页面预热命中率晋升到60%左右,主会场预热命中率靠近70%。
容器预渲染:极致用户体验为了进一步极致的晋升用户体验,达到真正的直出成果,咱们针对大促会场做了一个预渲染的前置动作,通过和首页模块的通信交互,容器端和前端的事件通信、上报屏蔽、流量管制等,提前预渲染会场页,在真正上屏的时候瞬开会场,此时整体会场自定义首屏工夫就是趋于0。
优化前后录屏成果,请点击查看:Lazada 容器深度优化之旅
录屏中优化前的是去年双十二期间页面,优化后应用的是BDay期间的页面,页面构造有变动,但加载的资源量级相当,从录屏成果看,优化后的体验,无论是预热还是预渲染比优化前都有质的晋升。
对于预渲染,咱们曾经在后盾实现了页面的加载和渲染操作,实践上应该是只须要合成上屏即可,然而录屏中有看到白屏过程,通过视频分帧能够看到,进场动画的时候的确是白屏状态:
通过试验,比照其余页面(如https://www.baidu.com) 命中预渲染的成果,发现它并没有白屏的过程。这两头的区别在于,会场页面上获取预渲染容器的同时,会发送一个上屏事件给前端,前端再去做一些软刷新等工作,这个软刷新工作会有业务js执行,导致阻塞了内核渲染流程,咱们将上屏告诉异步提早后,两头白屏工夫就少很多,录屏成果请点击查看:Lazada 容器深度优化之旅
在7.7大促期间对会场页面做测试,比照从点击到首屏的耗时,数据如下:
提早上屏告诉状况下的录屏耗时优化了12%,用户体感会有较大晋升。
SSR:唤端性能晋升利器预热/预渲染可极致优化用户从首页进入会场的体验问题,然而线上还存20%-40%用户是通过唤端冷却间接进入到会场落地页,这种状况下,是没有足够工夫来进行预热和预渲染的,所以晋升唤端页面加载速度是一个亟需解决的问题。
从前端角度来剖析,页面加载分为几个步骤:主文档加载、外围js加载、数据申请、页面渲染、上屏展现、图片申请展现,这几个步骤都是串行的,波及到大量资源文件的网络传输和js解析执行。通过和前端同学探讨, SSR是一个潜在的优化计划,将数据在服务端就召回并解析渲染成动态HTML,那就只须要下载一个主文档就能进行上屏展现,加上图片申请展现,就只须要两轮数据交互,从客户端角度看,缩小了3个数据交互环节,大大降低了数据传输量和连贯申请次数。
会场SSR计划
SSR与非SSR比照视频,点击查看:Lazada 容器深度优化之旅
...