我的博客有多快？

哪个男孩不想拥有一个速度非常快的博客（跑）。之前我写过一些文章介绍如何统计网页的加载性能，在「前端性能监测和回传 Google Analytics」一文中就介绍了 Navigation Timing API 和 Google Analytics 的 Measurement Protocol。我的博客使用自己写的 cloudflare-workers-async-google-analytics 已经数个月了，今天分享一些统计数据，看看我的博客到底有多快。

DNS 查询时间

skk.moe 使用的权威 DNS（Name Server）是 Constellix 的一家 Partner，根据 DNSPerf 数据，Constellix 是全球第 10 快的权威 DNS。而由于 DNS 缓存的存在，数据看起来十分理想，将近 85% 的请求的 DNS 查询时间小于 0.1 秒，DNS 查询时间大于 1 秒的请求仅占 2%。

服务器连接时间

服务器连接时间指的是从请求开始到开始下载资源之间的耗时，包括 TCP 连接和 SSL 握手等耗时。当与服务器的连接建立以后，下载就开始了。

blog.skk.moe 使用的是 Cloudflare，大部分访客又来自中国，这个数据看起来并没有那么理想。但是平均连接时间为 0.26 秒，将近 94% 的访客的连接耗时在 1 秒内。由此可见，Cloudflare 也并非那么慢。

服务器响应时间

当与服务器建立连接后，浏览器就会开始等待服务器发送资源。这一数据可以用于衡量后端耗时。由于我的博客是静态博客，因此通过这一时间我可以得知 Cloudflare 回源时的耗时。将这一时间与服务器连接时间加在一起就可以得到 TTFB（首字节时间）。

文档互动时间

文档互动（DOMInactive）指的是浏览器解析 DOM Tree 所使用的时间，只有解析完成后，页面渲染才会开始。如果网页结构越复杂、DOM 节点越多、浏览器解析耗时就越长。性能较弱的移动端平台也会影响解析耗时。

从数据分布上看，将近 50% 的访客在 0.5 秒内就可以完成浏览器的页面渲染，与访客中桌面端占比接近。不过，90% 的访客仍然能够在 3 秒内完成对页面的解析。

内容加载时间

根据 Google Developers 文档，内容加载时间是 DOM 加载完成耗时——从 TCP 请求开始一直到 DOMContentLoaded 触发的时间。在这个时间点，整个页面的框架基本被载入、大部分关键资源已经完成加载、访客已经可以看到页面中大部分内容。注意这个指标和 First Contentful Paint（首次内容绘制）的区别。

从数值分布上看，在 3 秒内完成加载的占 85%，平均加载时间 1.86s。一般来说，3 秒是一个业内通用的分水岭。如果一个网站不能在 3 秒内加载出大部分内容，就会访客就会失去等待的耐心。

网页加载时间

网页加载时间是指从 TCP 请求开始到 Load 的用时。在这个时间点，当前页面的所有资源已经全部加载完成，window.onload 事件开始被触发，用户已经可以看到所有内容。最直观的体现就是此时浏览器的加载进度条将会消失。

从数据上来看，将近 80% 的访客在 3 秒内加载完页面，平均网页加载时间在 2.5 秒以内。但是也有将近 5% 的访客网页加载时间超过 10 秒。

首次渲染时间

和网页加载时间不同，首次渲染时间指的是当用户在浏览器中可以看到内容的时间。此时浏览器的加载进度条仍在滚动，但是此时访客已经可以看到部分内容，因此这个指标可以更直观地反应访客的体验。在 Chrome 浏览器中，已经提供了对首次渲染时间的 API，可以通过 Performance Observer 或 Performance Paint Timing 获取。

从数据上来看，首次渲染事件触发的平均时间不到 2 秒，将近 92% 的用户可以在 3 秒内看到页面大部分内容。