运行网站速度测试:最佳实践

已发表: 2021-02-17

在当今快节奏的世界中,缓慢的网站是一个问题。 随着互联网速度的提高,出现了对快速加载网站的需求。

网站的速度对您网站的用户体验有很大影响。 事实上,它可能是最影响用户体验的一件事。 网站加载时间越长,用户就会变得更加沮丧和烦躁,如果加载时间过长,他们就会放弃它。

慢速网站具有较高的跳出率、较低的转化率,并且通常会让访问者无法使用。

如果您想了解您的网站在网站速度方面的表现,您需要能够准确衡量您的网站在现实世界中的表现。

在本指南中,我们将向您展示如何准确配置站点速度测试并解释结果以深入了解 WordPress 站点的性能。

了解如何加速您的 WordPress 网站

目录

  • 为什么要测试网站速度?
  • 如何运行网站速度测试
  • 1. 选择正确的速度测试工具
  • 2. 选择正确的测试位置
  • 3. 为不同的设备和浏览器运行测试
  • 4.注意测试连接速度
  • 5. 多次运行测试
  • 如何理解网站速度测试结果

为什么要测试网站速度?

如果您想了解访问者在网站速度方面的体验,有两种类型的监控:

  • 真实用户数据,基于您的网站为每个实际访问者加载所需的时间——例如 Pingdom 真实用户监控。
  • 综合速度测试,这是大多数速度测试工具运行的内容,也是我们关注的内容。

合成速度测试更容易运行,只要您正确配置速度测试,您的结果应该非常准确,您的访问者将体验到真实世界的加载时间。

此外,即使在构建网站时,综合测试还可以让您评估网站的性能,这让您可以在最终确定网站并公开发布之前标记潜在问题。

例如,如果您正在构建客户网站,综合速度测试可帮助您在将其移交给客户之前对其进行优化。

如何运行网站速度测试

同样,合成测试只有在您以获取有用数据的方式配置它们时才有价值。 以下是如何做到这一点:

1. 选择正确的速度测试工具

并非所有速度测试工具都相同,因此您需要选择最适合您要运行的测试类型的选项。

不同的工具将为您提供不同的数据/指标和更多/更少的配置选项——我们将在接下来的几节中介绍为什么这些配置选项很重要。

以下是一些最流行和最有用的工具:

  • GTmetrix – 具有精心设计的界面的灵活工具。 确保注册一个免费帐户以访问配置选项。 但是,免费版本不再允许对移动设备进行测试。
  • WebPageTest – 最可配置的速度测试工具。 非常适合测试不同的场景。 但是,界面有点过时。 您可以使用 MachMetrics 运行自动化的日常测试。
  • Google PageSpeed Insights – 包括来自 Lighthouse 的综合测试数据以及来自 Google 的真实世界性能数据(尽管真实世界数据仅在您的网站有足够流量时才可用)。
  • Lighthouse – 一种用于分析 Web 性能的开源工具。 Google PageSpeed Insights 基于 Lighthouse,或者您也可以从 Chrome 开发者工具或 web.dev 运行 Lighthouse。
  • Pingdom 工具——免费工具缺少配置选项。 但是,界面设计得很好。 如上所述,还提供付费的真实用户监控服务。
  • Uptrends – 一个精心设计的工具,支持所有重要的配置选项。
  • 快速或慢速 – 用于从 Wordfence 评估全局加载时间的出色工具。 在一项测试中,它运行来自 18 个不同国家的测试。

您不必拘泥于一个工具——每个选项在某些情况下都非常有用。 例如,WebPageTest 非常适合一次测试一个位置,因为它非常灵活,而 Fast 或 Slow 可用于快速衡量站点加载时间在全球范围内的变化情况。

2. 选择正确的测试位置

您运行速度测试的物理位置会影响您的结果。 出于这个原因,您希望选择一个尽可能靠近目标受众的测试地点:

speed-test-locations

如果您针对多个位置或世界各地的访问者,您需要从不同位置运行多个测试,以更好地了解您网站的全局加载时间。

3. 为不同的设备和浏览器运行测试

访问者使用的设备会对性能产生很大影响。

例如,低功耗智能手机需要更长的时间来处理 JavaScript,这意味着在这些设备上加载大量 JavaScript 的网站将比在高性能台式计算机上加载慢得多。

出于这个原因,您要确保至少测试多个设备。 您还可以考虑测试多个 Web 浏览器以查看浏览器之间是否存在任何差异:

speed-test-device

4.注意测试连接速度

在现实世界中,并非所有访问者都具有相同的连接速度。 有些可能具有高速 Internet 连接,而另一些可能正在 3G 或 4G 网络上浏览。

一些测试工具,例如 Pingdom,对所有测试使用超快速的无节流连接。 其他工具,例如 WebPageTest 和 GTmetrix,让您可以选择更接近真实世界情况的节流连接。

出于这个原因,您的网站在 Pingdom 中通常会“看起来”加载速度更快。 但是,如果您想准确衡量真实用户的体验,则需要使用模拟用户实际速度的节流连接:

speed-test-connection

5. 多次运行测试

最后,确保您运行多个测试以避免单一测试的可变性,这可能会扭曲您的结果。 在一次性测试中,您可以获得异常结果,使您的网站看起来比大多数访问者慢或快。

一些工具可以轻松运行多个测试。 例如,您可以将 WebPageTest 配置为一次最多运行九个单独的测试并取中值:

speed-test-multiple-tests

如何理解网站速度测试结果

现在,让我们了解如何理解您将在上述速度测试工具中看到的各种指标。

Core Web Vitals(最大的内容绘制)

Core Web Vitals 是 Google 的一项新计划,其中包括三个指标,重点是捕捉您网站的用户体验。

在站点速度方面,最重要的指标是最大内容绘制 (LCP)。 LCP 衡量您网站的“主要”内容加载所需的时间。 如果您网站的主要内容加载速度很快,即使其余内容的加载时间更长,访问者也会认为您的网站加载速度很快。

每个页面的“主要”内容会有所不同,但通常是您网站英雄部分中的标题文本或图像。 例如,这是面向桌面访问者的 Elementor 主页的 LCP 元素:

speed-test-main-content

您可以使用 PageSpeed Insights 找到您网站的“主要”内容——确保同时测试移动设备和桌面设备,因为每个元素的元素可能不同:

speed-test-diagnostics

Google 建议您的 LCP 时间低于 2.5 秒

为了改进您的 LCP,您需要加快第一个字节的时间(此列表中的另一个指标)、使用缓存并实施其他 WordPress 性能最佳实践。 内联关键 CSS 并避免阻塞渲染的 JavaScript 对于加快此指标也特别有用。

页面加载时间

页面加载时间是一个难以理解的指标,因为页面加载的含义有多种定义。 更令人困惑的是,不同的速度测试工具使用不同的页面加载定义,这也是比较两种不同工具时您可能会看到略微不一致数据的原因之一。

这里的关键问题是“页面何时完成加载?”。

以下是两个最常见的定义:

  • 文档完成 -所有静态内容已加载的点。 用技术术语来说,当 onLoad 事件触发时。
  • 完全加载- 所有网络活动停止两秒钟的时间点。

您的完全加载时间几乎总是更长,因为它考虑了额外的幕后脚本,即使在您的所有静态内容都加载后,这些脚本可能会继续加载。

使用像 WP Rocket 这样的多合一性能插件可以帮助您实施所有重要的最佳实践来改善加载时间。

第一个字节的时间

首字节时间 (TTFB) 是服务器响应能力的一般衡量标准——您也可能将其称为服务器响应时间 (SRT)。 它测量创建与服务器的连接并下载内容的第一个字节所需的时间。

Google 建议您的 TTFB 小于 200 毫秒

TTFB 受后端性能的影响很大。 高 TTFB 的两个最大罪魁祸首是缓慢的托管和/或缓慢的 DNS 提供商。

第一次内容绘制和第一次有意义绘制

首次内容绘制 (FCP) 和首次有意义绘制 (FMP) 与上述最大内容绘制指标有一些相似之处。

First Contentful Paint测量绘制第一个文本或图像所需的时间。 这与最大的内容绘制之间的主要区别在于 FCP 不会尝试衡量该内容的“重要性”。 相反,它只是寻找“任何”内容的第一部分。

首次有意义的绘制衡量用户何时可以看到页面的主要内容。 然而,由于一些技术困难,谷歌已经弃用了 Lighthouse 6.0 中的 First有意义的Paint,取而代之的是Largest Contentful Paint。 尽管如此,您仍然可能会在某些工具中看到 FMP。

Google 建议您的FCPFMP时间都在两秒以内

优化您的 LCP 也将改善这些指标。

互动时间

互动时间 (TTI) 衡量您的网站为访问者完全互动所需的时间。

例如,假设您使用手风琴小部件添加了手风琴部分。 TTI 测量您的访问者需要多长时间才能单击该手风琴切换并通过展开手风琴部分让您的网站做出响应。

Google 建议您的 TTI 低于 3.8 秒

HTTP 请求

为了加载您的页面,访问者的浏览器需要向您网站的服务器(或第三方资源的服务器)针对您网站上的每个资源发出 HTTP 请求:

  • 一张图片 = 一个 HTTP 请求
  • 一个 JavaScript 脚本 = 一个 HTTP 请求
  • 一个 CSS 样式表 = 一个 HTTP 请求
  • 等等。

对于您的站点应该有多少 HTTP 请求,没有硬性规定。 但是,一般来说,您的站点需要的 HTTP 请求越少,它的加载速度就越快。

但是,并非所有 HTTP 请求都是相同的——有些请求比其他请求大和/或加载时间更长。 您可以在大多数速度测试工具提供的瀑布分析中查看每个 HTTP 请求的加载顺序。 这是它在上升趋势中的样子:

speed-test-waterfall-analysis

您可以通过组合 CSS/JavaScript 文件、限制图像使用以及使用诸如 Asset CleanUp 或 Perfmatters 之类的脚本管理插件来减少 HTTP 请求。 您还应该限制插件的使用,因为大多数插件会添加自己的 HTTP 请求。 Elementor Pro 可以让您访问单个插件中的许多不同功能(例如表单、滑块、画廊等),从而帮助您消除插件的使用。

页面大小

页面大小是指页面的整体大小。 它是所有页面代码、图像、脚本等的文件大小的总和。

一般来说,您网站的页面尺寸越小,加载速度就越快,因为访问者的浏览器需要下载更少的数据来加载您的网站。

减少页面大小的一些常见策略是压缩图像、使用服务器级压缩(例如 Gzip 或 Brotli)以及缩小代码。

测试您网站的速度并对其进行优化以获得更好的用户体验

了解您网站的性能对于优化您的网站至关重要。 没有数据,您就无法知道您的网站在哪里以及可以改进的地方。

但是,如果您想收集有意义的数据,这并不像将您网站的 URL 插入一个单一的速度测试工具并称其为一天那么简单。

请务必注意测试的具体配置——调整位置、设备和连接速度,以准确了解您的网站对不同类型用户的表现。

获得数据后,您还需要了解不同的指标及其含义。 修复缓慢的第一个字节时间可能需要与改善最大内容绘制时间不同的策略,尽管在性能最佳实践方面总是存在一些重叠。

您对如何在 WordPress 上测试网站速度还有疑问吗? 在评论中询问我们!