作者:oliver, 腾讯压测大师团队产品经理
商业转载请联系腾讯 WeTest 获得授权,非商业转载请注明出处。
原文链接:http://wetest.qq.com/lab/view/327.html


WeTest 导读

天天 P 图” 军装照” 活动交出了一份 10 亿浏览量的答卷,一时间刷屏朋友圈,看到这幕,是不是特别想复制一个如此成功的 H5?不过本文不教你如何做一个爆款 H5,而是介绍天天 P 图在 “军装照” 活动过程中,如何面对 10 亿流量时的后台承载。


一、10 亿浏览量,“军装照” 火了

这两天,相信 “军装照” 活动已经刷爆了朋友圈,这个活动是由人民日报客户端策划出品并主导开发,腾讯天天 P 图提供图像处理支持的一款 H5 产品。

天天 P 图智能换脸

这款 H5 于 7 月 29 日晚一经推出,浏览量就迅猛攀升。7 月 30 日 24 时,浏览次数突破 6000 万,在 7 月 30 日 23:03 时,H5 迎来了这次活动的最高峰值,图片生成请求达到每分钟 117 万次,8 月 1 日 13 时突破 5 亿。截至 8 月 2 日 17 时,“军装照” H5 的浏览次数累计 8.2 亿,独立访客累计 1.27 亿,一分钟访问人数峰值高达 41 万。

后台数据截图

一般来说,一个 H5 产品浏览次数能超过 500 万就很不错了,超过 1 亿的十分罕见。如果以 1 亿为标准,这款 H5 产品能够申请 10 次世界纪录。

创纪录的浏览量背后,自然需要坚强的后盾,腾讯云与腾讯 WeTest 帮助天天 P 图对图片上传下载,存储,智能分析、融合处理以及压力测试等服务提供技术支持,让 “军装照” 活动可以顺利延续影响力,保证用户的良好体验。

二、一个刷屏级的 H5 有多难?

在见证了一个个精妙的 H5 活动后,我们渐渐意识到,制作一个刷屏级的 H5 越来越难了。

面对 H5,用户越来越 “丧失耐心”

腾讯大数据 2016 年的《移动页面用户行为报告》中表示如果页面加载超过 5 秒就会有 74% 的用户离开页面。

页面加载超过 5s 就会有 74% 的用户离开页面

(图片来源:腾讯大数据《移动页面用户行为报告》)

这样的数据是符合交易响应时间的 “2-5-8 原则” 的,也就是:

1、 当用户能够在 2 秒以内得到响应时,会感觉系统的响应很快;

2、 当用户在 2-5 秒之间得到响应时,会感觉系统的响应速度还可以;

3、 当用户在 5-8 秒以内得到响应时,会感觉系统的响应速度很慢,但是还可以接受;

4、 当用户在超过 8 秒后仍然无法得到响应时,会感觉系统糟透了,或者认为系统已经失去响应,而选择离开这个 Web 站点,或者发起第二次请求。

从腾讯大数据的数据来看,用户对于 H5 的容忍程度显然更低,在 5-6 秒的时候,已经开始无法忍受了,因此根据这样的现实情况,对于移动页面,我们更应该关注一个全新的 “1-2-5 原则 “:

1、 当用户能够在 1-2 秒内打开 H5 页面,看到信息的展示,或者能够开始进行下一步的操作,用户会感觉速度还好,可以接受;

2、 页面如果在 2-5 秒后才进入可用的状态,用户的耐心会逐渐丧失;

3、 如果一个界面超过 5 秒甚至更久才能显示出来,这对用户来说基本是无法忍受的,也许有一部分用户会退出重新进入,但更多的用户会直接放弃使用。

举个例子:

2016年11月24日晚上九点半,一个名为《薛之谦 2 个月没写段子,结果憋了个大招》的腾讯动漫的 H5 引爆了朋友圈,仅仅三个小时就已经突破 120W 的 PV,而第二天早上的 PV 大概是 270W 左右。

该 H5 采用长图文 + 视频的形式,在屏幕划到某一个位置,自动播放准备好的 Mp4 文件,起初,这个时长 2 分 51 秒的视频大小是 34.5MB,,如果在网络环境较好的情况,用户可以很流畅的观看,没有卡顿和延迟,但是为了提升用户的体验感受,H5 进行了全面的优化,整体大小被下降到了 24.3MB。

(图片来源:《深度解析!薛之谦的二次元 H5 为什么又翻天了!》)

对于一个 H5 的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原本 H5 的渲染性能就不及 native 的 app,所以,H5 的性能是一个绕不开的话题。

三、腾讯云 +WeTest “军装照” H5 攻克最后技术难关

为了保证 “军装照” H5 能够被用户顺利的访问,,天天 P 图与腾讯 WeTest 压测大师合作,对 H5 的主要接口进行了多次压力测试。

1、制定测试目标

根据之前多次 H5 活动经验,天天 P 图对活动流量通常都有一个稳定的预期。天天 P 图的技术团队将 H5 的压测目标制定如下:

事务成功率: 99.9%

响应时间: 500ms

TPS: 10000qps

网络流量: 15G

压测人数配置(示例)

2、确认压测场景

对于 “军装照” H5 活动,最为重要的一个接口就是用户上传图片到天天 P 图 “人脸融合” 后台的接口,通过完成接口地址的配置,天天 P 图技术团队完成了压测的配置。

接口地址配置(示例)

天天 P 图团队不断的通过压测大师测试接口,获取实时的承载数据,对服务器进行持续优化,从而实现一个最为稳定的状态。

压测数据结果(demo 数据)

在完成了服务器架构的最佳优化之后,天天 P 图在 “军装照” 活动爆红之后,依赖腾讯云海量处理能力和灵活扩展性,天天 P 图团队紧急在腾讯云调动服务器,进行弹性扩容,从一开始的 400 台,再到 800 台,最终在最高峰动态部署了 4000 台腾讯云服务器。此外腾讯云还采用了智能分流、柔性策略等办法,确保稳定应对海量用户的请求。这样的弹性扩展因而支撑了 “军装 H5” 10 亿次的浏览。

H5 技术的兴起,注定着这款重要的网络语言将要承载越来越多的内容,为了满足用户越来越 “不耐心” 的响应时间要求,未来的 H5 以及 Web 页面针对性能势必进行更多的测试以及优化,保证用户在越来越多的场景下可以体验到最好的效果。


腾讯WeTest压测大师运用了沉淀十多年的内部实践经验总结,服务了包括王者荣耀、龙之谷手游、轩辕传奇手游、火影忍者等多款高星级手游,也包括天天P图、NOW直播等明星产品,通过基于真实业务场景和用户行为进行压力测试,帮助开发者发现服务器端的性能瓶颈,进行针对性的性能调优,降低服务器采购和维护成本。

为了让外部更多产品能够享受到简单易用的压测产品,腾讯 WeTest 决定将这份服务器测试能力产品化,以产品” 压测大师 “的形式,正式对外开放。* 目前更有 10 元 10000VUM 的压测优惠,欢迎大家的使用!*

体验地址:http://wetest.qq.com/activity/paygaps0808

如果对使用当中有任何疑问,欢迎联系腾讯 WeTest 企业 qq:800024531


↙↙↙阅读原文可查看相关链接,并与作者交流