Google Analytics跟踪网站页面速度
网站的访问速度，与用户的体验高度相关，从而还影响了SEO的效果。它是网站用户体验中最重要的元素。
本篇文章我们将结合Google Analytics，为读者揭示影响网站速度，页面加载速度的各种因素，并为您对网站速度的优化提供一些帮助。
Google Analytics是如何监测您的网站速度的？
Google Analytics使用HTML5 Navigation Timing 接口或装有 Google 工具栏的浏览器进行对网站速度进行跟踪。也就是说除了Safari，我们现有的Chrome浏览器、Firefox 7以上、Internet Explorer 9以上、Android 4.0以上，以及装有谷歌工具栏的旧版Internet Explorer都可以正常跟踪页面打开的速度。
请注意，在此我们用的是浏览器的API，所以说该侦测速度并不影响您网页打开的速度本身。换句话说，Google Analytics对网页速度的监测不会影响您的页面打开速度，这里不存在薛定谔的猫的问题。
默认情况下，Google Analytics只会对1%的样本进行速度检测。如果你需要更多的样本，如果你的网站浏览的量并不充足，那么你可以手动调高样本的比例。当你使用经典的Google Analytics部署方法时，你可以添加下面的代码，可以自定义样本率：
ga(‘create’, ‘UA-XXXX-Y’, {‘siteSpeedSampleRate’: 10});
如果你使用的是gtag：
gtag(‘config’, ‘UA-XXXX-Y’, {‘site_speed_sample_rate’: 10});
上面的例子将样本率提高到了10%。如果你使用Google Tag Manager来部署Google Analytics。那么你只要在GA设置中添加该参数的设定即可。
页面打开的整个过程分解
打开页面是一个非常复杂的过程，我们可以用下面的流程图进行拆解。
这整个流程可以给我们非常多的启示：
页面跳转会影响我们的页面打开时间
许多大型网站的内链有许多跳转链，也就是说，当用户点击一个链接以后，需要进行多次跳转以后才能达到目的页面，这会影响页面打开的速度。
在Google Analytics中也会记录页面跳转所用的时间，因此站外的那些链接跳转的时间也会被包含在内，毕竟这些跳转时间以浏览器的API进行记录。
DNS的解析时间是页面打开时间的一部分
我们刚才说了，站外的那些跳转。那些跳转也需要进行DNS解析，这里有许多不可控的因素，但是你完全是可以优化自己网站的DNS解析时间的。因此选取优秀的DNS解析服务器，对网站的加载速度有非常大的提升。
许多DNS解析服务会对不同的线路进行优化。如电信、联通、移动、海外，甚至对于搜索引擎进行不同的优化。
您还可以使用预解析的方法（dns prefetch）加快这一过程。
HTTP连接的建立需要花费时间
大多数浏览器在同时只会开启六个并行的线程进行HTTP连接，而一个复杂的页面读取往往需要建立上百个HTTP连接。因此您需要考虑是否使用HTTP2来加快页面内容的传输速度。
HTTPS加密连接需要耗费额外的时间
我们看到HTTPS的连接需要额外的时间，但是我们认为这些时间是必要的，它极大地增强了网站的安全性。
一些大型网站，对于未登录的用户使用未加密的HTTP协议；而对登录页面和登陆后的用户使用HTTPS协议，这也是对网站页面加载速度的考虑。不过这样的做法可能造成许多重复的页面，不利于搜索引擎优化。
高性能的服务器，和简单的程序脚本会提升网页打开速度
当客户端进行请求以后，服务器将会根据情况，计算、运行脚本，来获得返回的内容。
当您使用Server-side-rendering（服务器端渲染）时，需要计算的工作量增加，响应的速度会变慢，但是这样可以减轻搜索引擎蜘蛛对您网页内容的理解进行的投入；反之，当您使用Client-side-rendering（客户端渲染）时，您的服务器的负担会减轻，返回的速度会变快，但是这样搜索引擎需要花额外的资源，用CSS和JS去渲染您的页面，来理解您的页面内容。
我们需要对这两种方法进行权衡，于是就有了Dynamic Rendering（动态渲染）和Hybrid Rendering（混合渲染）。篇幅有限，就不在这里展开了。
DOM过程是页面加载的重要内容
DOM 是 Document Object Model（文档对象模型）的缩写。客户端下载了服务器端传来的HTML后将会依此建立DOM树。
DOM树决定了页面元素的结构和内容，此外CSS文件还规定了各个DOM元素的展示方法，JS文件会潜在地对DOM树进行增添和裁剪。
您或许听说过一句老话，要把CSS放在<head></head>中，把JS放在页面最后，就是这个道理。我们要最快画出页面的样子，同时要保证JS不会对页面的渲染，进行阻塞。
但现代的实际操作中，我们也会把部分CSS放在HTML中，这是为了减少请求，最快展示首屏的页面内容。对字体来说，在字体下载完成前先展示内容，使用@font-face在下载完成后重新画出页面也是常用的增进体验的方法。
Google Analytics中页面读取速度各指标的意义
我们再来回顾一下，GA眼中的页面打开过程如下图所示：
还有两个指标无法用上图解释，那就是Document Interactive Time（文档互动时间）和Document Content Loaded Time（文档内容加载时间）。
文档互动时间
文档互动时间就是从开始访问到文档可以与用户互动的这段时间。它对应了流程图中Navigation Start到DOM Interactive之间的时间。
文档互动时间越短，客户实际等待的时间就越短。可以开始互动，意味着用户可以上下滚动页面，也可以点击一些链接。但是页面的下半部分可能还看不到。比如导航出来了，页脚还没有出来。
文档内容加载时间
文档内容加载时间就是从开始访问到文档内容除了延迟下载执行的那些元素之外已经完成的这段时间。它对应了流程图中Navigation Start到DOM Content Loaded End之间的时间。此时仍然没有DOM Complete，一些CSS、图像和子框架可能还没有加载完成。它的结束通常意味着JS可以开始执行了。
文档内容加载时间越短，用户可以看到完整页面的时间就越早。这意味着用户可以看到完整的页面，并与其进行互动。这个时候可能图片还没有出来，只能看到图片的替换文字，因为JS尚未执行幻灯片还是静态的样子。
参考这两个指标，可能比页面总加载时间更具科学性。
总结一下
本篇我们介绍了页面加载的整个过程，并顺带讲了部分加快页面加载速度的方法。提高页面加载速度是个非常大的话题，无法用一篇文章的篇幅来讲透。
正如下图沃尔玛对页面加载速度和转化率关系的分析，我们需要重视的不仅仅是页面速度与SEO的关系，而是把它看成真正影响你的收入的一个因素。
Google Analytics为我们提供了可靠的页面加载速度的手段，由于基于浏览器，它不会因为GA脚本下载的延迟而发生偏差。你可以自由地调节样本率，以对指标更好地理解来指导页面速度的优化。
