Sukka's Blog

童话只美在真实却从不续写

  1. 1. DNS 查询时间
  2. 2. 服务器连接时间
  3. 3. 服务器响应时间
  4. 4. 文档互动时间
  5. 5. 内容加载时间
  6. 6. 网页加载时间
  7. 7. 首次渲染时间

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

DNS 查询时间

blog-prf/dns.png

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

服务器连接时间

blog-prf/tcp.png

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

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

服务器响应时间

blog-prf/resp.png

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

文档互动时间

blog-prf/domi.png

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

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

内容加载时间

blog-prf/dom.png

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

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

网页加载时间

blog-prf/load.png

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

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

首次渲染时间

blog-prf/fp.png

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

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

本文作者 : Sukka
本文采用 CC BY-NC-SA 4.0 许可协议。转载和引用时请注意遵守协议!
本文链接 : https://blog.skk.moe/post/how-fast-is-my-blog/

本文最后更新于 天前,文中所描述的信息可能已发生改变