研究背景：开A/B test 期间， wpt的指标 Start Render 上升比较明显
工具：GA、 wpt
研究目标：明确背景，了解异常数据指标，分析可能的影响因素，控制变量实验观测。可通过优化实验配置/方式/工具减少A/B test 对页面Start Render时间的影响，提升用户体验。
wpt的一些指标：
Load Time: The Load Time is the time from when the user started navigating to the page until the Document Complete event (usually when all of the page content has loaded).
First Byte: The First Byte time is the time from when the user started navigating to the page until the first bit of the server response arrived. The bulk of this time is usually referred to the "back-end time" and is the amount of time the server spent building the page for the user.
Start Render: The Start Render time is the first point in time that something was displayed to the screen. Before this point in time the user was staring at a blank page. This does not necessarily mean the user saw the page content, it could just be something as simple as a background color but it is the first indication of something happening for the user.
浏览器第一次显示除空白页之外的其他内容时/白屏后首次出现内容的时间。
Speed Index: 速度指数，页面呈现出来的平均时间。比Start Render更人性化的指标。详细计算方式参考：Speed Index
实验过程：
- 以现有的实验方式尝试重现异常。GA使用Redirect方式需要要将防闪烁代码段添加到网站，请在会加载优化工具容器的每个网页的 <head> 部分插入以下代码，使其位于网页上的任何其他代码之前。此外，您还必须使用优化工具容器 ID 替换字符串 GTM-XXXXXX：
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-XXXXXX':true});</script>
实验开启前：
测试1.1： 未进入优化页面，页面加载 First View start render 指标在 0.9~1s
测试1.2：加入google code 页面Head会加载防闪烁代码片段， First View start render 指标在 2.7s
实验开启后：
测试1.3：First View start render : 4.8s。
结论1：实验开启后实际速度没有wpt 统计页面慢那么多，大概会慢4s 左右，并没有重现异常。
-
测试A/B type 的实验是否会对 start render 的影响小一些。
设置google code进入优化，a/b test type不需要加入防闪烁代码片段。测试2.1：设置变体是页面上的某个div文字更换，First View start render : 2.8s。比1.2中开启前慢了0.1s左右，影响不大
测试2.2：将2.1中的文字改动多处，效果通2.1
结论2：使用这种实验方式有利于避免研究背景中的异常问题。
- 尝试修改实验代码的加载方式代码：按GA中实验提示的加载代码修改。
<script src="https://www.googleoptimize.com/optimize.js?id=GTM-XXXXXXX"></script>
页面加载 First View start render 指标在 0.9~1s，接近于未开启a/b test 前1.1的速度。
结论3：改变实验的加载方式有利于提升wpt的start render速度。
实验分析：
需要确认A/B test的需求是否都可以用a/b 方式实现。使用a/b方式实现，页面HEAD不需要加载防闪烁代码片段，wpt的start render指标相对于实验前变化不大。
改变实验加载方式，页面加载 First View start render速度会提升不少，是可以试用的一项改变。
关于实验的一些思考：分析造成异常数据的原因，对于实际的生产环境不能靠猜测。需要先深入了解因变量的定义、来源、生成过程做一定的了解，缩小考虑范围，从而尽可能找出可能的自变量。（这一个过程其实需要靠丰富的经验）。对每一个自变量需要进行试验，一行代码，一个配置点就可能会对结果造成很大的影响，解决问题的一个优化方式就会错过。
实验出真知，还是不能偷懒，靠知识的积累进步是缓慢的，学习的正确方式是在解决问题的实践中丰富经验。比如我去看一天书，其实第二天就会忘记一些，但是去花半天去学习分析一个问题，其实会去做很多知识检索，接受一些实验方法的传授，解决难题的能力才会提升。
