没有单一的度量标准
首先要明白的是,对于“速度”没有单一的度量标准。没有一个简单的数字可以用来衡量页面加载的速度。
想想当你加载一个网站时会发生什么。有许多不同的阶段和许多不同的部分可以测量。如果网络连接慢,但图片加载快,这个网站有多“快”?反过来呢?
即使您试图将所有这些简化为“直到完全加载所花费的时间”,仍然很难给出一个有用的数字。
例如,一个需要更长的时间才能“完成加载”的页面可能会在整个页面还在后台下载的情况下提供一个功能性的“轻量级”版本。与那些加载速度快,但我在加载完成之前不能使用的网站相比,这是“快”还是“慢”呢?
答案是“视情况而定”,我们可以用很多不同的方法来考虑或衡量“网站速度”。
理解加载过程
从你点击链接的那一刻起(或者在你的URL栏中点击“enter”),一个进程就开始加载你所请求的页面。
这个过程包含许多步骤,但它们可以被分为大致的阶段,看起来像这样:
来自谷歌网站速度文档的“一秒时间线”
虽然谷歌的文档对于这些阶段的时间安排可能有些过于苛刻,但该模型很有帮助。基本上,这个过程可以描述为加载的三个阶段。
1. 网络的东西
首先,你的设备的物理硬件需要连接到互联网。通常,这包括通过跨大西洋的光纤电缆传输数据。这意味着你受到光速的限制,你的设备处理信息的速度也受到限制。
很难衡量或影响这部分过程!
2. 服务器的东西
这里,设备向服务器请求页面,服务器准备并返回响应。
本节涉及一些技术性内容,因为它主要关注服务器硬件、数据库和脚本的性能。你可能需要向托管提供商或技术团队寻求帮助。
NewRelic
我们可以使用像NewRelic或DataDog这样的工具来测量服务器的性能,这些工具可以从“内部”监视站点的行为和响应。
他们将提供关于慢数据库查询和慢脚本的图表和指标。有了这些信息,你就可以更好地了解你的主机是否达到了标准,以及你是否需要对你的主题/插件/脚本进行代码修改。
查询监视器插件WordPress
WordPress也有一些很棒的插件来进行这种分析——我是查询监视器的超级粉丝。这为了解WordPress的哪些部分可能会减慢你的速度提供了一些很好的见解——无论是你的主题、插件还是环境。
3.浏览器的东西
在这个阶段,需要构造、布局、着色和显示页面。图像加载的方式、处理JavaScript和CSS的方式以及页面上的每个单独HTML标签都会影响加载的速度。
我们可以用扫描网站的工具从外到内监控其中的一些,并测量它的加载情况。我们建议使用多种工具,因为它们对事物进行不同的度量,并且对不同的评估有用。例如:
WebPageTest非常适合提供一个“瀑布”式的网站视图,以及所有的资产如何加载。
谷歌PageSpeed Insights有点简单,但它提供了你网站的“真实用户指标”,直接来自谷歌。
Lighthouse for Chrome提供了一个令人难以置信的复杂的网站性能和行为分析,但它可能很难消化!
Chrome开发者控制台显示你的网站在你的电脑上,在你的浏览器上加载时发生的事情。
速度报告在谷歌搜索控制台显示你有多快或慢你的页面加载在任何给定的时间。
yoast.com的网页测试结果
这些类型的工具对于发现像需要优化的图像,你的CSS或JavaScript缓慢的地方,或者你等待资产从其他域加载的地方是很好的。
通用指标
尽管有这些活动的部分,有一些通用的度量标准对所有站点都有意义,并优化。这些都是:
到第一个字节的时间,这是服务器响应某些信息所花费的时间。即使你的前端非常快,这也会让你撑不住。测量与查询监视器或NewRelic。
第一次有内容的(有意义的)绘制之前的时间,也就是关键的可视内容(如英雄图片或页面标题)出现在屏幕上的时间。测量与灯塔为铬。
时间,直到互动,这是需要多长时间的经验是可见的,并对我的输入作出反应。测量与灯塔为铬。