再谈网页访问速度和衡量方法
长期关注极诣数字营销的读者一定知道在过去的几年中马老师多次讲解了有关优化网页加载速度和谷歌CWV指标的话题。事实上，多年来一些网站分析工具中都会提供一些指标来衡量网页加载速度。像Google Analytics这样的工具中就提供了这些指标。
注意，GA4还没有引进这些指标。马老师猜测谷歌认为这些指标的应用还有一定局限性，因此还没有加入到新版本中。如果你热爱添加这些老旧的指标，你可以查阅David Vallejo的博客，他提供了详尽的部署方法。国内也有人转载了，马老师就不重复劳动了。
那么好奇的读者有没有想过一个问题，网页载入的时候GA并没有加载，那么GA是如何知道网页加载速度的呢？是不是GA标签放在越前面，网页加载速度就越快呢？
其实这些都要归功于现代浏览器支持的Performance API。我们可以随便拿个浏览器，打开DevTools里的Console工具。然后输入window.performance.timing回车，就可以得到各个关键时间点的时间戳。
你在上图看到的166开头的一长串数字就是以毫秒为单位的时间戳。始于1970年1月1日。比如你可以算一下上图中1665653523203这个connectEnd的时间戳对应的日期时间，你可以在网站currentmillis.com直接计算。或者在Excel中用公式计算=[166….]/86400000+DATE(1970,1,1)+8/24
当我们理解了这一串数字背后的意义，我们就很容易去对它们进行排序并洞察一些时间指标了。你是否还记得马老师之前提供了页面加载的顺序？
现在是不是就对上了？我们可以把这些时刻进行一定的运算并得到一些关键指标，具体地来说：
- Page Load Time: loadEventStart – navigationStart
- Page Download Time: responseEnd – responseStart
- DNS Time: domainLookupEnd – domainLookupStart
- Redirect Response Time: fetchStart – navigationStart
- Server Response Time: responseStart – requestStart
- TCP Connect Time: connectEnd – connectStart
- DOM Interactive Time: domInteractive – navigationStart
- Content Load Time: domContentLoadedEventStart – navigationStart
上面这八个指标就可以通过时间戳的计算得出。一些时候我们会发现计算出来的时长为0，比如TCP Connect Time为0，这说明载入该页面时本身已经建立了TCP连接。再比如DNS Time为0，那就说明该域名的DNS查找已经被缓存，无需额外进行。
当我们理解到了这个层面，我们就可以更好地拆解载入页面的各个指标的影响因素了。
比如Page Download Time是响应开始到结束之间的经过时间，这就纯粹是下载时间，由带宽传输速度决定。如果客户端带宽很低那么你怎么样都无法优化。
又比如Server Response Time是请求开始到响应开始之间经过的时间，这会由伺服页面需要计算的复杂度决定，那么服务期的CPU和内存将会有直接影响。如果你选择更多的服务器端渲染并以此优化SEO，那么这个指标也会上升，因为你需要更多计算。
除了这些GA定义的指标，你也可以自己定义一些指标。比如新建一个DOM Load Time：
- DOM Load Time: domContentLoadedEventStart – responseEnd
这个指标将揭示页面在客户端拼装需要花费的时间，相对我们前面说的服务期渲染，这是客户端渲染的指标。那么这样我们也可以了解到如果Page Load Time很长，到底问题在哪里。
说到这里，马老师把2019年的坑给填了，可喜可贺。最后再说两点：
- 如果你想要对GA4应用这些指标，推荐结合Google Looker Studio（原Google Data Studio）这样处理毫秒级的指标间运算要方便许多。毕竟GA4里能提供的自由度太低了。具体的做法参考《GA4+Data Studio才是正确打开方式？》
- 这些本篇介绍的指标都相当精确。但是呢，精确不代表能反映实际情况。这也是为什么谷歌引进了Core Web Vitals来对用户体验进行更好的评估。如果你发现Core Web Vitals中的LCP和FID不太好（CLS和速度关联不大），那么可以利用这些指标来进行拆解深挖，定位具体问题出在哪儿，并采取相应措施。
