作者:腾讯WeTest
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原则”的,也就是:
- 当用户能够在2秒以内得到响应时,会感觉系统的响应很快;
- 当用户在2-5秒之间得到响应时,会感觉系统的响应速度还可以;
- 当用户在5-8秒以内得到响应时,会感觉系统的响应速度很慢,但是还可以接受;
- 当用户在超过8秒后仍然无法得到响应时,会感觉系统糟透了,或者认为系统已经失去响应,而选择离开这个Web站点,或者发起第二次请求。
从腾讯大数据的数据来看,用户对于H5的容忍程度显然更低,在5-6秒的时候,已经开始无法忍受了,因此根据这样的现实情况,对于移动页面,我们更应该关注一个全新的“1-2-5原则“:
- 当用户能够在1-2秒内打开H5页面,看到信息的展示,或者能够开始进行下一步的操作,用户会感觉速度还好,可以接受;
- 页面如果在2-5秒后才进入可用的状态,用户的耐心会逐渐丧失;
- 如果一个界面超过5秒甚至更久才能显示出来,这对用户来说基本是无法忍受的,也许有一部分用户会退出重新进入,但更多的用户会直接放弃使用。
举个例子:
2016年11月24日晚上九点半,一个名为《薛之谦2个月没写段子,结果憋了个大招》的腾讯动漫的H5引爆了朋友圈,仅仅三个小时就已经突破120W的PV,而第二天早上的PV大概是270W左右。
该H5采用长图文+视频的形式,在屏幕划到某一个位置,自动播放准备好的Mp4文件,起初,这个时长2分51秒的视频大小是34.5MB,,如果在网络环境较好的情况,用户可以很流畅的观看,没有卡顿和延迟,但是为了提升用户的体验感受,H5进行了全面的优化,整体大小被下降到了24.3MB。
腾讯动漫的H5整体大小从40MB左右优化到了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页面针对性能势必进行更多的测试以及优化,保证用户在越来越多的场景下可以体验到最好的效果。
End.