如何在 WordPress 中减少 HTTP 请求？

我们发现减少 HTTP 请求对加载速度有影响。每当有人访问网站的时候，他们的浏览器会向网站服务器发送请求，要求下载显示页面所需的所有文件，包括图片、样式表和脚本。每一个 HTTP 请求都会增加加载过程的时间。

当请求过多时，服务器负载增加，会导致网站加载变慢。会影响网站的 SEO 排名和用户体验。

在文章中，我们会分享一些实用的方法，帮助大家减少 WordPress 中的 HTTP 请求，提升网站的性能。

为什么要减少 WordPress 中的 HTTP 请求？

网站上的每个页面通常包含多个元素。这些元素可以包括图片、CSS 和 JavaScript 文件、视频嵌入等。

当有人访问网页时，他们的浏览器需要分别加载每个元素才能显示页面。如果网站包含大量图片或其他资源，会导致加载时间变慢。

除了在服务器上的文件外，网站还可能有外部来源加载资源，例如：Google Analytics 脚本、社交媒体小部件或广告像素。

虽然这些元素可以增强网站的功能性和用户体验，但如果没有优化，它们也会拖慢加载速度。

缓慢的网站会让访客失去耐心，导致他们在页面完全加载之前就离开。根据 Strange Loop 的研究，延迟一秒钟就可能导致转化率下降 7%、页面浏览量减少 11%、客户满意度下降 16%。

Strange Loop 速度研究

减少 WordPress 中的 HTTP 请求是提升网站性能的一个很好的方法，也是我们在网站上加速页面加载的关键方式之一。

如何识别 HTTP 请求

在学习如何减少 WordPress 中的 HTTP 请求之前，先介绍一下如何识别这些请求。

可以通过浏览器的开发者工具查看网站发出的 HTTP 请求。会显示加载页面所需的所有文件列表。

以 Google Chrome 为例，可以通过下面方式打开开发者工具：进入“查看”»“开发者”»“检查”，或者右键点击页面并从菜单中选择“检查”。

然后，导航到“网络”标签页。重新加载页面后，会看到加载的所有资源列表，包括内部和外部的 HTTP 请求。

用浏览器的开发者工具识别 HTTP 请求

如果只想查看外部 HTTP 请求，可以用“第三方请求”过滤器。如果只关心可能影响加载时间的某些类型文件，如 JS（JavaScript）或 CSS，可以用顶部的按钮来过滤列表。

留意那些加载较慢的文件。可以查看“时间”列，了解每个资源加载所需的时间。然后，可以点击该列标题按时间排序，再点击一次会加载最慢的文件排在最上面。

当查看第四列“发起者”时，有时会看到加载该文件的插件或主题的名称。记下任何可能导致加载速度慢的插件或主题。

如何减少 WordPress 中 HTTP 请求

1. 合并 CSS 和 JavaScript 文件

减少 HTTP 请求的最好方法之一就是减少需要访问的文件数量。可以将多个文件合并，减少 HTTP 请求而不影响功能。

例如，跟网站设计的不同部分相关的多个 CSS 文件，可以将它们合并成一个文件。这个单一文件将包含所有必要的样式代码，浏览器只需要发出一个请求，而不是多个。

同样，也可以将多个 JavaScript 文件合并成一个，减少加载网站互动元素时所需的请求数量。

有多个 WordPress 插件可以自动化这个过程。常见的选择包括 WP Rocket（付费版）和 Autoptimize（免费版）。

在 WP Rocket 中压缩 CSS、JavaScript 和 iFrame

除了合并文件，这些插件还会对它们进行压缩。压缩会去除代码中不必要的字符，如空格和注释，让文件更小，而不会影响功能。这进一步通过减少需要下载的数据量，提高了加载速度。

2. 延迟加载图片和视频

延迟加载是另一种提高网站加载性能的好方法，尤其是当网站页面包含大量图片或视频时。

通常情况下，WordPress 会在显示网页之前加载所有媒体文件，即使这些图片或视频位于页面底部，用户无法立即看到。这会明显增加初始页面的加载时间。

延迟加载通过延迟加载图片和视频，直到它们即将滚动进入用户视野时才加载，从而优化了这一过程。

在 WP Rocket 中启用延迟加载

3. 使用内容分发网络（CDN）

用内容分发网络（CDN）是提高 WordPress 网站加载速度的另一种方法，特别是对于离网站 web 服务器远的用户来说。

与前面方法不同，CDN 并不会减少 HTTP 请求的数量，而是优化这些请求的处理方式。

通常情况下，网站文件存储在单一的 web 服务器上，来自世界各地的用户都需要从这个位置请求文件。而 CDN 会将网站的文件存储在全球各地的高速服务器上，并将文件从离用户最近的服务器发送到他们的浏览器。

CDN 如何工作

我们用 Cloudflare 来提高页面加载速度，大家可以按照我们的教程：怎么在 WordPress 中设置 Cloudflare 免费的 CDN。

4. 利用浏览器缓存

通过利用浏览器缓存，可以减少网站的 HTTP 请求数量，特别是针对经常访问网站的回访用户。

当用户首次访问网站时，他们的浏览器会下载所有必要的资源，例如图片、样式表和 JavaScript 文件。浏览器缓存允许浏览器将这些文件的副本存储在用户电脑的本地。

下次用户访问网站时，浏览器会在发送 HTTP 请求到服务器之前检查本地缓存。如果缓存中有未过期的文件副本，浏览器将使用本地文件，而不是再次下载。

这种方式能减少服务器收到的 HTTP 请求数量，从而为回访用户提供更快的加载速度。

然而，如果网站内容经常更新，那么设置适当的缓存资源过期时间就非常重要。这样可以确保用户获得最新版本的文件。

可以通过在 WordPress 中添加 Expires headers 来控制资源缓存的时间。这些头信息会告诉浏览器，缓存文件何时应该被视为过期，并需要从服务器重新下载。

5. 减少外部资源的使用

许多 WordPress 插件和主题会从外部网站加载资源，比如脚本、样式表和图片，这些资源可能来自 Google Analytics、Facebook 和字体提供商等。

这些外部 HTTP 请求可能会影响网站的加载速度，因为浏览器需要连接到多个服务器来获取所有必要的组件。

即使这些外部资源已针对速度进行了优化，使用过多仍然可能降低网站的性能。

如何减少外部 HTTP 请求

1. 停用和删除不必要的插件和主题
   首先，停用并删除那些实际不需要的插件和主题。
2. 替换加载缓慢的插件或主题
   考虑寻找替代插件或主题，替换掉任何加载速度较慢文件的插件或主题。在之前识别 HTTP 请求时，大家可能已经发现了一些相关问题。
3. 选择性能优先的插件
   在选择 WordPress 插件时，注意它们加载的外部资源。优先选择那些注重性能的插件，避免加载过多外部脚本或样式的插件。
4. 用插件管理工具
   如果需要更精细地控制插件，可以考虑用像 Plugin Organizer 这样的插件管理工具。它可以让你只在需要的页面上选择性加载插件。

管理插件加载

最后，自定义网页字体通常从外部提供商（如 Google Fonts）加载，这会明显增加 HTTP 请求。可以通过以下方法优化：

• 限制字体家族和字重的数量。
• 考虑用系统字体（已安装在用户的电脑上），以减少外部资源的加载。