1、移动端广告落地页预加载技术实践目录 背景介绍 预加载技术与实践 预加载的机遇和挑战4 / 33背景介 绍创意落地转化：用户和广告交互后，发生了业务上有意义的行为（购买了商品、拨打电话等）点击率 = 点击次数 / 展示次数转化率 = 转化次数 / 点击次数eg. 创意有 1w 次展示，有 2k 次点击，有 100 次转化，点击率 = 2k/1w = 20% 转化率 = 100/2k = 5%点击和转化等数据涉及计费，所以埋点准确性非常重要，这也是广告落地页相比于普通网页的不同。5 / 33预备广告知识落地页主要有两种形式：1. Native：端上提供模板，下发数据做拼合。体验好，但是不够灵活。2
2、. Web：页面由 HTML 实现。足够灵活，但是可能存在性能问题。6 / 33背景介 绍头条 App 加载时长和转化率关系252015105002468101214加载时长在 0 1.5s 内，转化率都在 15% 以上。加载时长超过 1.5s 的落地页，转化率变化不大（后面的数据波动是由于样本数据较少）。优化落地页加载时长到 1.5s 内，能显著提升落地页转化率。7 / 33广告落地页性能优化广告落地页也是移动端的网页，常规的优化手段可以使用。CSS/JS下载页面下 页面解载 析页面/JS/CSS/图片下载页面解析/JS 执影响因素体积大小减少体积用户的网络JS 复杂程度JS 引擎性能不可控
3、（目前不是优化方向缩短时长精简代码，减少阻塞瓶颈）8 / 33广告落地页性能优化常规的优化做完，再想进一步优化，就需要考虑广告落地页的自身特点广告落地页运行在固定的环境内（字节系 App），我们称之为端能力。9 / 33广告落地页的预加载字节跳动的广告落地页分为：1. 自有落地页：通过橙子建站制作的广告落地页2. 第三方落地页：广告主自己制作或者找代理商制作的广告落地页对比项制作方式自有落地页拖拽生成统一第三方落地编码技术栈统一程度可控程度（服务器资源）端能力协同各异完全可控支持不可控少部分结合端能力和落地页情况，我们将小目标定为：自有落地页的预加载10 / 33预加载技术11 / 33预加载
4、原理关键两步：1. 预加载2. 打开时拦截预请求页面资源页面资源返回页面资源URL请求内容双击刷新用户浏览点击创意广告呈现12 / 33基于资源列表的预加载1. 橙子建站的每个落地页发布时，生成对应的 preload_resouces.json2. 用户刷新 feed 时，端上根据得到的资源列表，依次下载资源3. 用户点击创意4. 端上拦截 HTTP 请求，检查是否在本地已存在，若是，则直接返回。预下载：端上根据资源列表下载拦截：打开时，端上拦截请求并返回本地已有资源13 / 33基于资源列表的预加载Url：资源地址url: https:/ 2334,content-type: text/ht
5、ml,level: 2Size: 资源体积Content-type: 写入格式Level: 可缓存级别，1 为通用资源，2为独特资源,url: https:/vendor.af23.js,size: 5233,content-type: application/javascript,level: 1Screen: 图片在第几屏,url: https:/xxx.jpeg,size: 234343,screen: 2,content-type: image/jpeg,level: 2preload_resources.json 示例14 / 33“字节跳动是个只会 A/B Test 的公司”？15
6、 / 33A/B 测试基础知识使用一部分总流量如（20%），基于用户（User ID）或者设备（Device ID）进行分流，分为实验组和对照组。UID/DID业务 ServerA/B 测试平台A or B ?UID/DIDApp业务处理16 / 33基于资源列表的预加载 A/B 测试方案实验组和对照组：对照组：不进行预加载 vid = A实验组：实施预加载的 vid = BA/B 测试平台UID/DID A or B ?if B用户浏览 feedApp 预下载 json 中的资源用户点击创意App 拦截 HTTP 请求，匹配本地橙子建站 Server业务 Serverpreload_reso
7、uces.jsonif (A) 只下发 vidUID/DIDIf (B) 下发 json + vidApp 刷新17 / 33基于资源列表的 A/B 测试方案数据结果指标：1. 技术指标：页面加载时长（实际加载时长）、预加载完成率（预加载是否充分）2. 业务指标：转化数、转化率、广告主价值网络4GWiFi预加载时长网页加载时长转化数1.62s - 2.47s3.9s - 3.0s增加近 4%最高提升近 5%1.21s - 1.72s3.4s - 2.8s小幅波动小幅增加广告主价值结论：1. 技术指标：页面加载时长都有不同程度的缩短 10% - 20% 、预加载完成率 99% 以上2. 业务指标
8、：转化数和广告主价值一定程度提升，转化率提升比较有限18 / 33基于资源列表的预加载方案总结优点：1. 对于资源的控制把控力度强（何时何种条件预加载） ，能清晰还原状态2. 不依赖于外部特性（cache header 等），直接可用缺点：1. 开发成本比较高，特别是埋点方案。开发- 测试 - 发版 - 灰度 - 实验，过程至少1 个月。19 / 33基于 Webview 的预加载原理核心是依赖于浏览器的缓存机制，手段是借助 prefetch/preload 实现Loader HTMLlink rel=prefetch href=/example.js as=script /link rel=
9、prefetch href=/example.css as=style /link rel=prefetch href=/example.jpg as=image /tips：1. prefetch 是获取下一个页面要用到的资源，preload 是获取本页面用到的资源，优先级更高。2. iOS 不支持 prefetch，可以考虑使用 preload 替代；3. iOS 11.2 及以下不支持 preload，可以考虑使用 ajax 或 fetch，不过会涉及跨域问题*参考：https:/ / 33基于 Webview 的预加载Loader HTMLLanding Pagelink rel=st
10、ylesheet href=/example.cssscript src=/example.js点击link rel=“prefetch” href=“/example.js” as=script /link rel=prefetch href=/example.css as=style /link rel=prefetch href=/example.jpg as=image /img src=/example.jpg alt=”exampleloader.html落地页实验过程：1. 橙子建站发布时，每个落地页生成对应的 loader.html2. 刷新广告时，若在实验组里，初始化一个不可
11、见的 webview 加载 loader.html3. Webview 会在空闲时下载 loader.html 里面写明的资源4. 用户打开广告，webview 基于资源的 response header 判断是走缓存还是网络。预下载：利用 HTML 自身机制下载拦截：webview 利用浏览器的缓存策略拦截21 / 33基于 Webview 的预加载方案总结优点：1. 开发成本比较低2. 如果 Webview 复用，能做到 cache from memory3. 可伸缩性较好，很容易地支持从单 Case 到规模化产出的落地页缺点：1. 对于资源把控力度较弱，如开始预加载时机、当前的状态以及过
12、程中埋点2. 依赖于浏览器机制，不符合条件的资源需要改造 HTTP Header22 / 33方案对比两个方案各有优缺点，对比如下：对比项开发成本基于资源列表基于 W大强小对于资源的把控度I/O 速度弱Disk Cache高最快可以 Memory Cache对端能力要求低23 / 33其他相关的方案代码打包到 App：提前将需要用到的资源打包到 App 的安装包中，可以做到页面彻底的离线化，很多 Hybrid App 在使用。预渲染：刷新广告时，初始化一个不可见的 webview，直接加载落地页。用户点击打开时，将 webview 设置为可见。24 / 33四个方案各自的特点以及渐进式预加载方
13、法特点打包到 App基于资源列表基于 webview简单，基于 HTML 机制复杂，需要处理各种情况简单，但是要做拦截随包发版，不够灵活简单粗暴对资源把控度不够，加载细节和进度不可控开发成本高，需要处理缓存一致性问题初始化需要运行的脚本以及音/视频自动播放等问题资源把控度减弱，开发成本减少25 / 33预加载的机遇和挑战26 / 33预加载的机遇和挑战问题：如何比较快的推进预加载项目？解决：小步快跑，规模化成本较高，步子不用迈大、可以从单个页面、单个广告位先开始。eg. 先用少数页面做实验，评估出可取得的收益，然后衡量 ROI27 / 33预加载的机遇和挑战问题：广告位形态各异，预加载方案能否
14、通用化？因地制宜，围绕广告位的特点进行设计，同时可以多种方案结合eg. 开屏广告位 vs. 信息流广告位eg. 通用性资源打进 App，个性资源使用 webview 预加载28 / 33预加载的机遇和挑战问题：如何找到资源消耗和收益的平衡？对资源消耗和收益做精确量化，同时利用技术手段进一步优化资源消耗。eg. 结合广告行为预测，对预估点击率高于一定阈值的才进行预加载，并且反馈修正预测模型。29 / 33预加载的机遇和挑战问题：第三方落地页如何做预加载？解决：可基于现有方案扩展，额外需要解决第三方落地页服务器抗压能力、资源变动不可控以及干扰检测埋点的问题。eg. 提前抓取第三方落地页资源，并定时更新。干扰埋点可以增加特殊标识并告知广告主。30 / 33总结 预加载技术是结合端能力的全新尝试，是解决落地页性能问题的杀手锏。 预加载关键词：预下载和拦截，所有预加载都是如此； 基于资源列表的预加载：通过资源列表，端上完成下载和拦截； 基于 webview 的预加载：通过 loader.html，webview 完成下载和拦截； A/B 测试是一种科学的验证策略优劣的方法； 预加载的机遇和挑战：小步快跑、因地制宜、精确量化、扩展范围。31 / 33
