全文4167字，预计学习时间11分钟。
图源：turnkeyInternet谷歌会找到很多文章，注明网页可以在2到5秒内加载。但是，是什么让2-5秒成为预设范围呢？直觉告诉你，答案一定比这个复杂。没错，真正的答案比任何试图回答它的时间范围都要微妙得多。问题出在问题本身。
不是所有的网站和访问者都是一样的。
这个问题有一个缺陷，就是不同的情况可以采用相同的标准。不同的网站有不同的网络情况供用户访问网站。
静态博客不同于图形编辑器，4G比2G快很多。静态博客可能根本不用Javascript，但是图形编辑用的很多。4G网络访问者可能只会经历50毫秒的延迟，而2G用户每次往返可能会经历整整一秒。
上表描述了理想条件下实现的数据速率。地下车库并不是一个理想的环境，但每个人都可能遇到这样的情况，这意味着用户访问网站所使用的网络条件是千变万化的。
网络条件的可变性
调整网络条件会导致页面加载时间完全不同。假设两个用户想通过移动网络访问作者的个人网站。只是一个静态网站，不会屏蔽Javascript。index.html的文件大小只有2.3kb，CSS的大小是1.8kb
第一个用户以400千比特的带宽接入，但是有100毫秒的延迟。第二个访问者的带宽为400kib，但延迟为1000ms。
使用同一个网站，调整延迟使index.html的加载速度慢了十倍。所以，如果仅仅考虑网络延迟就能完全改变同一个站点的页面加载速度，那么仅仅问“网站加载应该多快”有意义吗？
开发者无法控制用户进入的网络。这意味着判断网络性能不仅仅是一个固定的数字就能知道网站的加载时间。但是要知道页面加载发生在不同条件下的不同时间段，而知道这一点的唯一方法就是测量。
朗姆酒:衡量现实世界的表现
这正是RUM监控所能提供的。RUM或“真实用户度量”从页面加载中收集重要的性能度量，并将它们发送到可以查看仪表板数据的服务器。朗姆酒供应商有不同的形状和大小。对于本文，我将使用firebase性能监控。
Web性能是一种分布。
想象一下，如果你记录了访问网站的用户的第一次渲染时间。然后，在条形图中记录时间，如下所示:
但这种方式呈现的视觉效果并不准确，也不是所有用户都会在完全相同的时间段加载网站。一个人的网站加载需要1.5秒，下一个人的网站加载需要1.65秒。因此，可以用面积图代替条形图。
面积图显示了加载时间的分布，可以帮助您了解加载时间的范围以及最常见的情况。它表示所有装载时间的百分比。
基本性能监控为不同的指标提供了一个完整的面积图仪表板。
x轴代表加载时间的较大数组，y轴代表百分位数。关于这些百分位数，最有趣的是它们的形状。
尾巴
图表开始急剧向上弯曲，然后缓慢向下弯曲，形成尾部形态。这说明大部分用户的加载时间在1.5-3.5秒之间。那太好了，但是不要被这种变化所迷惑，尾部包含了所有的问题。
尾部表示经历了最长加载时间的用户。尾巴越长，波动越大。这意味着网站性能变得难以理解。有些用户加载很快，有些用户加载很慢。所以我们需要尽量缩短尾巴，明白尾巴代表什么。
网站什么时候可以使用？
当大多数人说“页面加载”时，他们指的是网站实际可用的时间。这有点误导，因为网站不一定要满载。
想象一下报道重大事件的实时流媒体博客。当我访问它时，我发现超时更新神奇地出现在屏幕上。页面什么时候“加载”？第一次更新出现在什么时候？当标题加载时，对吗？不是所有人都想深究这个话题，页面加载可以细分为更具体的指标。
“页面加载”指示器
用户将在开始网站加载时使用导航，通过键入URL并单击输入或单击链接可能是有效的。不渲染像素，浏览器通过网络获取资源。
首次渲染是最常见的指标之一。它只问:普通像素什么时候出现在屏幕上？知道像素什么时候开始出现很重要，因为你可以知道用户开始看到图片的速度。在某些情况下，这种反馈可以帮助用户知道网站正在加载，所以他们继续等待。
如果要搭建一个传统的服务器端渲染网站，First Paint可以准确的表示“页面加载”。这是因为所有的HTML和CSS都可以使用，没有渲染阻止Javascript。但对于依赖Javascript的网站来说，这可能会有所不同。
在很多单页应用网站中，First Paint用于静态元素，比如页眉页脚。应用程序的其余部分仍然处于启动状态，等待Javascript的加载和执行。用户可能会看到一些东西，但该应用程序还不可用。
第一个内容呈现关注设计内容何时出现在页面上。不仅仅是渲染到屏幕上的像素。如果网站加载速度很快，FCP和FP会经常同时启动。但是，如果网页字体的文本渲染被阻止，或者当内容需要Javascript来加载和执行时，FCP可能会落后于FP。
即使网站加载速度很慢，FCP和FP的速度也可以一样。这是大型Javascript应用中常见的现象，无法渲染或渲染太多静态HTML。在这种情况下，当Javascript最终加载、执行和渲染FP和FCP时，它们往往同时被触发。
DomInteractve意味着浏览器已经从静态HTML构建了一个DOM树。然后，浏览器开始加载其他资源，如样式表、图像和Javascript，这对于了解何时构建DOM树以及浏览器何时开始加载其他所有内容非常有用。
知道什么时候加载重要资源？这就是domcontentloadedevent的目的。当DomContentLoadeEvent被触发时，不再有任何样式表来阻止任何Javascript的执行。这些指标非常有用，domInteractive会告诉何时开始加载样式表，domContentLoadedEventEnd会告诉何时结束加载。
“装载事件结束”并不总是最有用的指示器，但有时它可以提供很多信息。当加载文档时，将触发loadEventEnd事件。这意味着当DOM树中的所有资源都被加载时，这个事件将被触发。所有链接的样式表、脚本、图像、图片和其他资源可能会降低此指示器的速度。如果你不小心上传了一个100MB的GIF到网站，你会看到一个相当慢的loadEventEnd。
该指标可以帮助您大致了解文档资源的加载时间。在这个指标被触发之前，网站可以使用很长时间。
第一个输入延迟用于测量触发第一个用户交互所需的时间。用户可能停留在看起来可用但已经冻结的页面上。无论刷多少次，点多少次，网站都无法正常工作。这时候就需要“首次输入延迟”来衡量这类问题了。
如果有静态博客的话，可能就没那么有用了，因为FID可以衡量用户什么时候可以和网站进行交互，通常是在事件监听器被触发后触发的。现在，对于繁重的Javascript应用程序，这个指标也很重要。繁重的Javascript应用程序必须加载、解析和执行后才能运行，这可能会延迟网站的初始交互时刻。
网络生命
如果你是一个精通性能的开发者，那么你可能听说过Web Vitals程序。Web Vitals是谷歌的一项举措，旨在为优质信号提供统一的指导，这对于在网络上提供出色的用户体验至关重要。
其目的是提高加载性能、交互性和稳定性。构成网络生命的核心指标是:
最大内容呈现
第一次输入延迟
累积布局移位
我不会详细介绍每个指标，但你可以查看web.dev/vitals.上的描述。每个指标都是通过谷歌网络集团提供的库检索的。
从“web-vitals”导入{ getCLS，getFID，get LCP }；getCLS
getFID
getLCP
消防性能监控只支持“首次输入延时”作为一级指标。在自动收集其他项目之前，您可以使用自定义跟踪来记录最大内容丰富的呈现和累积布局偏移。
索引过载
在性能监控的帮助下，您可以使用属性来细分性能数据，并在某些情况下关注应用程序的性能:firebase.google.com。
Web性能在任何地方都是一个指标，但并不是所有的指标对网站和个人情况都有用。我建议你弄清楚它如何为你的网站类型服务。不用担心跟踪所有指标，只要知道哪种方法最适合网站就行了。
网站加载应该有多快？
如何处理这些指标？你可以用它们来了解网站上发生了什么，并提出更好的问题。有一个问题一定要问:“使用3G接入的用户第一次看到内容是什么时候？”这些跟踪指标可以检查受影响用户的类型以及一段时间内的趋势。
借助FirebasePerformance Monitoring，可以深入了解First Contentful Paint等指标，看看哪些维度会影响指标。在这种情况下，您可以根据有效的连接类型进行拆分。
仪表板显示，大多数用户使用至少4G或更快的连接网络。但有5.88%的用户使用3G速度，2.24秒内加载网页。这比问“网站加载速度应该多快？”好多了。
永远记住网页加载速度不是一个确定值，网页性能本身就是一个分布。通过几行代码，measurement可以帮助你提出更好的问题，得到更好的答案。
留言关注
我们一起分享AI学习和开发的干货。
如转载，请后台留言，并遵守转载规范。
