如何在 WordPress 中减少 HTTP 请求（11 个技巧）

为了显示您的网站，用户的浏览器将向您的服务器发送 HTTP 请求。 但是，如果您有多个未优化的文件，服务器必须处理许多请求。 由于这些会显着增加您的页面加载时间，因此您会希望您的网站发出更少的 HTTP 请求。

幸运的是，可以减少它们，这就是这篇文章的全部内容。

HTTP请求简介

每当用户访问您的网站时，他们的浏览器都必须从您的服务器下载资源。 为了与之通信，浏览器使用 HTTP（超文本传输​​协议）发送请求。

网站包含不同形式的数据，HTML、CSS、图像和视频的文件都存储在服务器上——在浏览器上呈现这些内容需要 HTTP 请求。

以下是某人浏览互联网时涉及的步骤：

重要的是要注意呈现网站并不只需要一个 HTTP 请求。 每个单独的图像文件、插件样式表、JavaScript 脚本、网络字体等通常都有自己的。 因此，如果您的网站未优化，可能会对加载时间产生负面影响。

为什么您可能希望您的 WordPress 网站发出更少的 HTTP 请求

在构建网站时，尽量减少不必要的文件非常重要。 这样，访问者的浏览器就不必向服务器请求那么多的资源。 由于您的网站将发出更少的 HTTP 请求，因此加载速度会快得多。

作为一个粗略的规则，更多的 HTTP 请求会导致页面速度变慢。 如果在渲染页面之前有更多的资源需要下载，用户将不得不等待很长时间才能查看内容。

例如，只有 50 个请求的网站通常会比有 70 个请求的网站加载得更快。 这是因为要处理和下载的资源较少。

真实情况稍微复杂一些，因为并非所有 HTTP 请求都是一样的。 一个加载速度慢的大型 HTTP 请求可能比五个加载速度快的小型 HTTP 请求产生更大的影响。 但作为一个粗略的规则——更少的 HTTP 请求 = 更快的网站加载。

通过减少您网站上的 HTTP 请求，您将提高您的 Core Web Vitals，尤其是您的 Largest Content Paint (LCP) 分数。 反过来，这可以改善用户体验 (UX)，因为访问者会更快地看到内容。

如何测试您网站的 HTTP 请求

正如我们前面提到的，HTTP 请求是渲染的一部分。 但是，并非每个 HTTP 请求都是相同的。 在您开始在您的网站上减少它们之前，您需要确切地知道要定位哪些目标。

为此，您可以使用 GTmetrix 等性能分析工具。 首先输入您网站的 URL 并点击测试您的网站：

您将收到一份性能报告，其中包含有关页面大小和请求总数的信息。 要查看此数据，请向下滚动到页面详细信息：

您还可以通过单击Waterfall选项卡来查看单个请求。 这将显示每个文件的下载时间：

使用此瀑布图，您可以确定站点上的哪些元素导致了不必要的 HTTP 请求。 一旦发现问题，您就可以实施正确的解决方案并加快您的网站速度。

正如您在上图中所见，每个 HTTP 请求的大小不同，加载时间也不同。

如果您希望自己的努力获得最大回报，请尝试着重消除最大和最慢的 HTTP 请求。

您还应该专注于删除第三方 HTTP 请求（您的网站从其他人的服务器加载的资源，例如 Google Analytics 脚本）。 这些第三方请求需要额外的 DNS 查找并具有其他性能缺点。

如何在 WordPress 中发出更少的 HTTP 请求并加快您的网站速度（11 个技巧）

一旦您测试了您的网站，就该减少其 HTTP 请求了。

下面，我们通过 11 种不同的方式来减少 HTTP 请求并优化剩余的 HTTP 请求。 其中一些技巧不一定会消除HTTP 请求，但它们会优化请求以使其加载速度更快，这对于加快网站速度仍然很重要。

1. 删除不需要的插件
2. 延迟渲染阻止 JavaScript 和/或延迟 JavaScript 执行
3. 有条件地加载脚本
4. 最小化第三方请求
5. 优化您的图像
6. 实施延迟加载
7. 使用系统字体堆栈
8. 结合 CSS 和 JavaScript
9. 使用 CSS SPRITES 组合图像
10. 精简网站代码
11. 禁用表情符号

1.删​​除不需要的插件

您的网站上可能安装了多个插件。 即使您没有主动使用它们，不必要的插件也会增加 HTTP 请求并降低您的网页速度。

要分析您的插件请求，请在 GTmetrix 瀑布报告中搜索“插件”。 这将仅显示源自您的wp-content/plugins文件夹的 HTTP 请求：

通过将鼠标悬停在结果上，您会看到哪个插件创建了请求。 要优化您的网站，请浏览列表，寻找不必要的插件。 如果某个工具没有积极地为您的网站做出贡献，请考虑将其删除。

2. 延迟渲染阻塞 JavaScript 和/或延迟 JavaScript 执行

如果你想减少 HTTP 请求并优化你的 HTTP 请求，专注于 JavaScript 是另一个很好的策略。

有两种主要方法可以优化您网站的 JavaScript 加载方式：

1. 延迟渲染阻塞 JavaScript
2. 延迟 JavaScript 执行

延迟渲染阻塞 JavaScript

延迟渲染阻止 JavaScript 本身不会删除 HTTP 请求，但它会确保您网站的 JavaScript 加载不会阻止更重要的 HTTP 请求。

在加载过程中，浏览器可能会遇到渲染阻塞资源。 这些 CSS 或 JavaScript 文件会暂停呈现，直到资源被处理。 如果您有这些不必要的文件，它们可能会延长显示您的内容的时间。

向这些文件添加延迟或异步属性将通知浏览器稍后执行它们。 使用 defer 属性，脚本在 HTML 解析期间下载，然后执行。 异步属性将在可用时立即运行脚本。

要实现这一点，您可以使用特定功能的插件，例如免费的 Async JavaScript 插件。

或者，许多通用性能/缓存插件也提供此功能，包括 WP Rocket 和 FlyingPress。

如果您愿意的话，您也可以在站点的代码中手动设置它。

要实现延迟属性，您只需打开functions.php文件并找到资源的<script>标记。 在这里，插入一个 defer 属性：

 <script src="resource.js" defer></script>

这是异步属性的样子：

 <script src="resource.js" async></script>

通常，最好使用异步属性。 但是，当脚本依赖于另一个脚本时，您将需要使用 defer 属性。

延迟 JavaScript 执行

如果您想减少初始页面加载的 HTTP 请求，另一种流行的策略是延迟您网站的部分/全部 JavaScript 执行，直到用户交互。

当您设置它时，您的站点将等待加载文件，直到用户进行一些交互，例如单击、滚动等。

通过将这些 HTTP 请求移到访问的后期，您可以减少初始加载的 HTTP 请求，并大大加快以用户体验为中心的指标，如 Largest Contentful Paint。

要进行设置，您可以使用以下性能插件之一：

• 可湿性火箭
• 飞行压力机
• 性能问题

这是它在 FlyingPress 中的样子——您可以延迟除选定脚本之外的所有脚本，也可以仅延迟选定脚本：

3.有条件地加载脚本

某些插件会在您的整个站点中不必要地加载脚本。 例如，插件可能只处理“联系我们”页面上的表单，但将脚本添加到另一个区域。 在这种情况下，我们建议有条件地加载插件的脚本。

要有条件地加载您的插件，请考虑安装一个像 Perfmatters 这样的工具。 它带有一个内置的脚本管理器，用于禁用特定页面或帖子上的插件或单个脚本：

对于免费选项，您还可以考虑使用 Asset CleanUp 插件。

有条件地加载您的插件，然后再次通过 GTmetrix 运行您的网站。 如果您仍然注意到 HTTP 请求过多，则该继续下一个方法了。

4. 尽量减少第三方请求

当您的网站加载时，访问者的浏览器可能需要从第三方平台提取数据，这需要额外的 HTTP 请求。 另外，由于您依赖第三方服务器，这些请求会显着降低您的网站速度。

以下是第三方脚本的一些示例：

• 嵌入式 YouTube 视频
• 谷歌分析跟踪脚本
• 谷歌字体
• 第三方广告

与渲染阻塞资源一样，您可以将异步或延迟属性应用于第三方脚本。

对于 Google Analytics 和 Google Fonts 等服务，您还可以考虑使用如下插件在本地托管它们：

• OMGF – 在本地托管谷歌字体。
• CAOS – 在本地托管 Google Analytics。

5.优化你的图片

就像使用插件一样，从您的网站中删除不必要的图像很重要。 由于每张图片都需要自己的 HTTP 请求，因此您需要尽量减少网站上的照片数量。

然后，您的所有图像都需要优化。 虽然这不会减少 HTTP 请求的数量，但会减小它们的大小。 这可以有效地改善页面加载时间。

最好的图像优化器之一是 Optimole。 这个免费增值插件提供了一套一体化的图像优化功能，包括：

• 提供为每个用户的设备优化的自适应图像。
• 压缩图像。
• 调整图像大小。
• 将图像转换为最佳格式。
• 通过其内置的内容分发网络 (CDN) 提供图像。

当您上传新图像时，Optimole 会压缩它们并调整它们的大小。 因此，您不必担心需要过多资源的大型图像文件。

6.实现懒加载

实现延迟加载也是一个好主意。 这样可以防止在访问者向下滚动页面之前加载任何非首屏图像和视频。

这会将这些 HTTP 请求移到用户访问的后期，这样您就可以减少初始加载的 HTTP 请求并加快 Largest Contentful Paint 时间。

WordPress 5.5 使用本机浏览器延迟加载为图像添加了内置延迟加载。

然而，并不是所有的浏览器都支持原生延迟加载。 此外，使用专用的延迟加载插件可以让您更好地控制网站上的延迟加载功能。

例如，您可能希望从延迟加载中排除前几张图像，以避免对您的 Largest Contentful Paint 时间产生负面影响。

如果您使用上一节中的 Optimole 插件，它还包含一个内置功能，可以以最佳方式延迟加载您网站的图像。

您还可以从插件设置中进一步调整延迟加载行为。

7.使用系统字体栈

您可能会使用各种自定义字体来使您的网站独一无二。 但是，每种新字体都会在您的站点加载时添加另一个 HTTP 请求。

因此，最好限制您使用的自定义字体的数量。

或者，您可以坚持使用系统字体堆栈，它使用来自访问者操作系统的本机字体。

某些主题，如 Neve、GeneratePress 或 Astra，可让您恢复为系统字体。 但是，您也可以使用 CSS 更改字体堆栈。

8.结合CSS和JavaScript

另一种减少对 CSS 和 JavaScript 文件的 HTTP 请求的方法是将单独的 CSS 和 JavaScript 文件合并到一个样式表或文件中。

使用 Autoptimize 插件，您只需几步即可轻松聚合站点文件：

在Settings > Autoptimize下，启用插件以优化 JavaScript 和 CSS 代码。 然后，选中Aggregate JS-files和Aggregate CSS-files旁边的框：

这会将您的 CSS 编译成一个文件，将 JavaScript 编译成另一个文件。 Autoptimize 不是发送对多个文件的许多请求，而是使您的站点发出更少的 HTTP 请求。

注意——虽然组合 CSS 和 JavaScript 是减少 HTTP 请求的可靠方法，但它可能不会对实际性能产生任何影响，具体取决于您的 Web 主机。

如果您的主机使用 HTTP/2 或更高版本（现在大多数主机都这样做），实际上最好不要合并文件，因为 HTTP/2 支持多路复用（这意味着它可以从服务器下载多个文件而无需多个服务器请求）。

如果您不确定您的主机是否使用 HTTP/2，您可以联系支持人员。

9. 使用 CSS sprites 组合图像

在典型的 WordPress 网站上，每个图像都是一个单独的文件。 如果页面上有多张照片，浏览器会发送多个 HTTP 请求。 然而，CSS sprite 会将这些图像合并到一个文件中。

CSS 精灵工具是用于创建和自定义 CSS 精灵的免费软件。 首先，将您的图片放入上传框中：

生成 CSS 精灵后，将其添加到 WordPress 媒体库。 然后，您可以使用生成的 HTML 和 CSS 代码将每个图像放置在您的网站上。

10. 精简网站代码

缩小站点文件不会帮助您减少 HTTP 请求，但它会帮助您优化对站点的 HTML、CSS 和 JavaScript 代码的不可避免的 HTTP 请求。

在编写代码时，您可能会包含提高可读性的字符和空格。 由于它们不是处理请求所必需的，因此您可以删除它们。

缩小 WordPress 网站代码的最简单方法是使用插件，例如我们之前提到的 Autoptimize 插件。

大多数 WordPress 缓存插件还包括代码压缩功能，包括 WP Rocket、FlyingPress、WP Fastest Cache 等。

或者，如果您使用的是 Cloudflare 的 CDN，您还可以让 Cloudflare 为您缩小代码。

缩小站点文件后，HTTP 请求的执行时间会更快。 使用更轻的代码，您将加快网站速度并最大程度地减少大量请求。

11.禁用表情符号

默认情况下，WordPress 表情符号会向您的站点添加一个额外的 HTTP 请求。 要摆脱另一个HTTP 请求，您可以禁用 WordPress 表情符号。

对于最简单的选项，您可以只安装轻量级的 Disable Emojis 插件。

或者，您可以将此代码添加到子主题的functions.php文件或代码管理器插件（如代码片段）中：

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

实施所有这些技巧后，您应该拥有一个 HTTP 请求更少的站点！

在您的网站上发出更少的 HTTP 请求 🎯

作为一个粗略的规则，您的网站的 HTTP 请求越多，加载速度就越慢。 这会对您网站的用户体验 (UX) 产生负面影响，导致访问者没有阅读您的内容或购买产品就离开了。

为了加速您的网站，您希望消除尽可能多的 HTTP 请求并优化保留的 HTTP 请求，以便它们尽快加载。

使用这篇文章中的提示，您可以完成这两项工作并为您的访问者创建一个快速加载的网站。

👉 但是，请记住，优化站点的 HTTP 请求只是性能难题的一部分。 如果您希望您的网站加载速度快，您还需要高质量的 WordPress 托管——查看我们最好的 WordPress 托管综述以查看最佳选项。

您对减少 WordPress 中的 HTTP 请求数量有任何疑问吗？ 在下面的评论部分询问我们！