Lazada 容器深度优化之旅

作者：魏扼(文射)、范磊(蓄能)

近年来东南亚数字经济持续发展，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，并建立实时监控：

路由和容器初始化监控

页面加载监控

<