如何减少WordPress网站的HTTP请求数量

你的网站的HTTP请求越多，它的加载速度就越慢。因此，如果您可以减少HTTP请求的数量并优化它们的加载方式，您就可以提高网站的性能。

在这篇文章中，我们将带你了解如何在WordPress上减少HTTP请求的所有信息。

我们将从HTTP请求的基本介绍开始，它们的重要性以及如何分析WordPress站点的请求。

然后，我们将分享一些技巧和策略，你可以实施，以减少网站的请求。除了帮助您处理GTmetrix中的“减少HTTP请求”消息之外，这些策略还可以帮助您处理Google PageSpeed Insights中的“避免关键链接请求”消息。

什么是HTTP请求？

为什么减少HTTP请求很重要？

如何查看和分析网站的HTTP请求

如何优化和减少WordPress中的HTTP请求

减少HTTP请求的最佳WordPress插件

什么是HTTP请求？

当你建立一个网站时，它有许多不同的部分。您有在页面上使用的不同图像文件、控制内容外观的CSS样式表、添加所有酷功能的JavaScript文件，等等。

当有人访问您的网站时，他们的浏览器需要一种方法来从您的服务器下载页面所需的所有资源。为此，它为每个单独的资源向服务器发出HTTP请求。

例如，它可能会说，“嘿，服务器，我需要那个coolimage.png文件”和“嘿，服务器，我还需要联系表单插件的CSS样式表”。然后，服务器用相关文件响应这些请求。

一旦网络浏览器得到这些文件，它就可以为你的访问者组装网页。当然，它比那更复杂，但是这是基本的想法。

HTTP是超文本传输协议的缩写，它是这些计算机(访问者的浏览器和您的web服务器)进行通信的方式。

需要理解的重要一点是，每个单独的元素都是一个单独的HTTP请求。例如，如果一个网页上有五个图像文件，浏览器需要发出五个单独的HTTP请求，每个图像一个。

类似地，如果你使用四个WordPress插件，并且每个插件添加自己的CSS样式表，访问者的浏览器将需要发出四个单独的HTTP请求，每个插件的样式表一个。

为什么减少HTTP请求很重要？

一般来说，网站的HTTP请求越多，加载速度越慢。因此，如果你希望你的网站加载更快，你需要优化和减少你的网站所需的HTTP请求的数量。

虽然这有点简单，但基本思想是，Web浏览器只会在所有HTTP请求都已下载后向您的访问者显示网站(尽管有一些策略告诉浏览器等待某些文件)。

因此，如果一个网站在显示页面之前必须发出70个HTTP请求，那么它将比发出40个HTTP请求花费更长的时间。

此外，一些HTTP请求会“阻塞”其他HTTP请求，这意味着在下载之前的HTTP请求之前，浏览器无法开始下载一些HTTP请求。

底线是:当你发出更少的HTTP请求时，你的网站会加载得更快。

如何查看和分析网站的HTTP请求

上面，你知道了在所有条件相同的情况下，减少HTTP请求的数量将会提高你的网站的速度。然而，所有的HTTP请求并不总是“相等”的。有些HTTP请求比其他的要大。有些人比其他人慢。

例如，请求一个巨大的3MB图像文件将比请求一个20KB的小图像花费更长的时间。

如果你想对你的网站做最大的改进，首先关注大而慢加载的HTTP请求会获得最大的投资回报。

要分析来自站点的HTTP请求，可以使用瀑布分析。

大多数速度测试工具都提供了这一点，但是GTMetrix和Pingdom之间的接口非常方便。您也可以使用浏览器的开发工具。但是，我们将使用GTmetrix作为本次测试的演示。

插入URL后，您会在顶部看到一个基本摘要框。这将显示您的站点有多少HTTP请求，但它不会分解单个请求:

要分析您的个人请求，请转到下面的瀑布选项卡。

在这里，您将看到站点上每个HTTP请求的列表以及下载该HTTP请求所需时间的相关信息:

您可以看到，并非所有的HTTP请求都是相同的。例如，839.3 KB的图像需要1.12秒，而57.6 KB的图像只需要87.5毫秒:

你也可以通过搜索服务器上插件文件夹的名称来找到来自你正在使用的不同WordPress插件的HTTP请求。例如，您可以看到WooCommerce添加了七个自己的HTTP请求:

这样，你就可以检查你使用的任何插件是否添加了大量的HTTP请求(尤其是那些加载很慢的)。

如何优化和减少WordPress中的HTTP请求

总之，有两种广泛的策略可以减少HTTP请求:

删除HTTP请求。如果可能，您应该完全删除所有不必要的HTTP请求。例如，如果你有一个插件，它没有给你的网站增加任何价值，并且正在加载它自己的CSS和JavaScript，只需完全删除该插件，以摆脱它所有的HTTP请求。

合并HTTP请求。如果您有必须加载的HTTP请求，您可以将它们合并到一个文件中。例如，您可以将六个小的CSS文件合并成一个更大的CSS文件，而不是六个小的CSS文件，因为浏览器需要发出更少的请求，所以它仍然会加载得更快(HTTP/2并不总是这样，我们将在下面讨论)。

我们将从专注于删除HTTP请求的策略开始，然后我们将讨论如何组合剩余的HTTP请求。基本思想是去掉你能去掉的，然后把剩下的组合起来。

1.删除不必要的插件

首先，您需要使用瀑布分析从插件中提取所有请求。你可以通过搜索“插件”来做到这一点，它将从wp-content/plugins文件夹中提取每个HTTP请求。

如果你将鼠标悬停在文件名上，你可以看到它来自哪个插件。例如，在这里您可以看到来自您可能正在使用的slider插件的请求。

进一步挖掘会发现Slider Revolution添加了三个自己的HTTP请求，尽管这个测试页面不包含任何Slider:

如何检查HTTP请求来自哪里

如果您对关键滑块使用滑块旋转，那么您可能需要保持它。然而，如果你安装它来测试它，然后删除了滑块，你现在并没有真正使用它…那么你应该删除它来摆脱那些HTTP请求。

基本上，你想浏览整个列表，问问自己每个插件是否真的给你的网站增加了价值。如果插件不是(但是正在添加HTTP请求)，那么最好删除它。

2.用较轻的插件替换较重的插件。

在去掉所有不必要的插件后，下一步是看看是否可以用更轻量级的插件来替换你正在使用的插件。

例如，假设您想在网站上添加一个社交分享按钮。这是一个很好的功能，但是有些社交分享插件可以添加很多HTTP请求。

例如，流行的AddThis插件已经添加了六个自己的HTTP请求(包括一些外部请求——稍后会详细介绍):

您可以通过使用更优化的替代方案(例如NovaShare或Grow by MediaVine)来减少请求数量。

3.有条件加载全站不必要的脚本。

此时，你应该已经删除了网站上所有你不需要的插件。但是，还有一种插件可能会产生问题——只在你的网站的特定部分需要的插件，但是它们的脚本却到处都在加载。

比如现在流行的Contact Form 7插件为例。您可能只需要在几个页面上使用这个插件(例如，您的联系我们页面)。但是，Contact Form 7将在您网站的每个页面上加载其脚本。所以，举个例子，即使你的博文没有任何联系表单，联系表单7还是会给你的博文添加一些HTTP请求。

另一个例子可能是WooCommerce，如果你只把它作为支付处理器的话。WooCommerce仍然会在任何地方加载它的脚本，即使你真的只需要在这个用例的购物车和结账页面上使用它们。

这里的高级策略是仅在需要时有条件地加载插件。例如，您可以在“联系我们”页面上加载联系人表单7，但在其他地方禁用它。

如果不是开发人员，可以使用Asset CleanUp或者Perfmatters之类的插件，不用代码就可以做到这一点。要使用Perfmatters，首先需要启用脚本管理器。然后，您可以打开脚本管理器来查看页面上加载的所有脚本，并禁用任何不需要的脚本:

Perfmatters插件中的脚本管理器

请小心，因为如果您不小心禁用了您真正需要的脚本，可能会导致问题。虽然这是一个有用的策略，但也是一个高级策略。

如果你不自信，你可能只想跳过这一步，或者雇佣一个开发者来帮助你。

4.删除不必要的图片(并优化其余的)

如果使用得当，图片会让你的网站更加人性化，更有吸引力。他们为你的网站增值。

然而，网站上的每个图像都是一个单独的HTTP请求。所以，如果你的图片没有增值，最好删除掉，消除这些HTTP请求。

比如那个有趣的GIF值不值？可能是吧…但事实可能并非如此——无论何时你在内容中添加更多的图片，你都需要考虑取舍。

最后，确保调整剩余图像的大小并进行压缩。虽然这本身不会减少HTTP请求的数量，但它会减少这些HTTP请求的大小，从而使它们的加载速度更快。

5.对图片和视频使用延迟加载

通过延迟加载，你的网站将等待第一个屏幕图像，视频和iframe加载，直到用户开始向下滚动。

由于不会立即加载这些资源，因此不需要为初始页面加载发出HTTP请求。

从WordPress 5.5开始，WordPress现在包含了使用HTML加载属性的图片本地延迟加载。对于其他一些实现延迟加载的方法(包括视频文件)，你可以查看我们的WordPress延迟加载完整指南。

6.限制使用自定义字体和/或系统字体(相同的图标字体)

自定义字体是改善网站设计和用户体验的理想选择。但是，您需要注意如何使用它们，因为您使用的每个自定义字体类型都会添加另一个HTTP请求。

如果您计划使用自定义字体，请确保使用少量字体。帖子的标题和正文真的需要用不同的字体吗？或者可以用同样的字体吗？你真的需要全部五种字体粗细吗？还是可以只选两个？

这同样适用于图标字体，如字体牛逼和IcoMoon。图标字体可能很有用，但您可能不需要加载多种图标字体。最好只选择一个图标字体库，坚持下去。

最后，如果您想更进一步，完全消除与您的站点字体相关的HTTP请求，您可以考虑使用系统字体堆栈。虽然这会降低你在设计上的灵活性，但这也意味着你的访问者不必加载任何字体文件来呈现你的网站。

7.禁用WordPress表情符号

默认情况下，WordPress会添加自己的表情符号HTTP请求。虽然只是一个5.1KB的HTTP请求，但这个文件早已成为WordPress性能爱好者的眼中钉。查看如何禁用WordPress表情符号的教程。

最简单的选择是安装并激活免费禁用表情符号(GDPR友好)插件。但是，您可以阅读我们的完整指南来了解一些其他选项。

这样做之后，你的HTTP请求数会减少1，你仍然可以使用表情符号。

8.减少/消除第三方HTTP请求

到目前为止，我们主要关注于减少WordPress站点服务器上文件的HTTP请求。但是，访问者的浏览器可能还需要从第三方服务器请求文件。

这些请求可能会更麻烦，因为你的站点是由这些第三方服务器的速度主导的。

一些例子:

谷歌分析——跟踪脚本托管在谷歌的服务器上，但访问者的浏览器仍然需要下载该文件。

嵌入式YouTube视频——你会看到很多对YouTube服务器的HTTP请求。

第三方广告服务–您将会看到大量与投放您的广告相关的第三方请求。

谷歌字体(在谷歌的CDN上)——你会看到第三方请求谷歌服务器加载你的字体文件。

您可以将上述许多相同的策略应用于这些第三方HTTP请求。

例如，如果一个插件添加了自己的第三方请求(就像上面的AddThis插件)，你可以删除它，使用一些更优化的东西。

对于YouTube视频，您可以延迟加载它们，并用图像缩略图替换初始页面加载。这将延迟添加这些HTTP请求，直到访问者想要播放视频。

对于必要的第三方脚本，如谷歌分析或脸书像素，您可以尝试在本地托管这些脚本。

WP Rocket有内置的插件，可以在本地托管谷歌分析和脸书像素，或者你可以使用CAOS(完整的分析优化套件)这样的插件。

我们也有一些可能有用的指南:

如何在本地托管字体

如何在本地托管谷歌分析

9.用CSS Sprite组合图像

此时，您应该希望能够从您的站点发出更少的HTTP请求。现在，该研究如何组合剩余的HTTP请求了，从图像开始。

另一种优化网站图片的方法是将单独的图片合并成一个图片文件。然后，您可以使用CSS在需要的地方只显示这个图像文件的一部分。这是一个叫做CSS精灵的策略。

CSS精灵最适合装饰图像，例如标志变体或图标。您不应该将CSS精灵用于信息图像(如博客文章正文中的图像)，因为这有两个很大的缺点:

SEO——因为你将图片组合成一个图片文件，你不能在谷歌搜索中对单个图片进行排名。

可访问性——因为你不能给图像添加替代文本，使用屏幕阅读器的人将无法理解加载了CSS精灵的图像(尽管有一些策略可以解决这个问题)。

如果你仍然对这个主题感到困惑，这里有一个亚马逊的CSS sprite文件的例子——你可以看到它是如何包含一堆徽标变体以及一些图标的。使用Amazon CSS确保在每个位置只显示该图像文件的相关“部分”:

亚马逊CSS精灵的例子。您可以使用CSS来“定位”组合图像的特定部分。

不幸的是，没有针对CSS精灵的“设置好就忘了”插件。但是，您可以找到一些工具来提供帮助，例如CSS Sprite工具:

将要合并的图像上传到工具。

然后，该工具将为您提供一个组合图像文件，以及您上传的每个图像的一些CSS代码。

将合并的图片文件上传到你的WordPress网站。

使用CSS代码在内容中显示图像。提供的CSS将自动只选择组合图像文件中适当的部分。

10.合并CSS和JavaScript文件

在你的WordPress主题和插件之间，你的站点可能会加载多个CSS样式表和JavaScript文件，这意味着多个HTTP请求只用于浏览器下载渲染页面所需的CSS和JavaScript。

为了减少所有这些独立的请求，您可以将这些独立的文件/样式表合并成一个文件/样式表。这称为记录组或文件连接，取决于您使用的工具。

许多WordPress缓存插件包括合并CSS和JavaScript文件的能力。

进入WP火箭设置中的文件优化标签。然后，启用缩减，然后合并文件:

如何在WP Rocket中结合CSS和JavaScript

更多细节请看我们完整的WP火箭教程。

还可以使用Autooptimize来合并CSS和JavaScript文件。要合并文件，请转到设置→自动优化，然后选择以下选项:

聚合JS文件

聚合CSS文件

要了解更多细节，请查看我们完整的自动优化教程。

文件合并不适用于HTTP/2服务器。HTTP/2旨在更高效地传输多个小文件，这意味着一个大型CSS/JS文件和多个小文件之间的差异较小。

基本上，如果是HTTP/2服务器，您可能不需要执行这一步骤来改善页面加载时间。我们建议你还是测试一下，因为对某些网站还是有好处的，但是实际页面加载时间你可能察觉不到什么区别。

但是很多性能测试工具如GTmetrix仍然不能识别HTTP/2，所以GTmetrix可能仍然会显示“减少HTTP请求”的信息，降低你的分数。但是记住，分数没有实际的页面加载时间重要。

1.延迟呈现会阻止JavaScript

推迟呈现会阻止JavaScript自己消除HTTP请求。然而，它正在优化它们的加载方式，这将对你网站的感知加载时间产生同样的影响。

它还可以帮助处理Google page speed Insights/light house中的“避免链接关键请求”消息。

通过延迟对某些文件的请求或异步加载它们，可以防止一些不重要的资源“阻塞”快速加载站点可见部分所需的资源。

关于为什么会发生这种情况的更多信息，你可以阅读我们的关于理解网页关键渲染路径的指南。

然后，你可以遵循我们的详细指南来消除WordPress上的渲染阻塞资源。

减少HTTP请求的最佳WordPress插件

如果你正在寻找一些“一体化”的WordPress插件来减少HTTP请求，我们推荐上面教程中的两个插件:

WP火箭

完美事物

虽然你仍然需要手动评估你的主题和插件，看看它们是否发出了太多的HTTP请求，但这两个插件都可以在你完成清理后，帮助你优化网站上所有剩余的内容。

总结

您站点上的每个资源都将添加一个HTTP请求。图像是HTTP请求，CSS样式表是HTTP请求，字体文件是HTTP请求，等等。

如果使用WordPress，你的主题肯定会添加自己的HTTP请求，很多插件也会添加自己的HTTP请求。您还会收到来自您使用的任何图像和您添加的第三方脚本(如分析工具)的HTTP请求。

更多和/或更大的HTTP请求会导致网站速度变慢。这就是为什么当你使用GTmetrix或PageSpeed Insights等速度测试工具时，你通常会看到类似“减少HTTP请求”或“优化HTTP请求”或“避免链接关键请求”的消息。

要减少网站上HTTP请求的数量，您可以遵循我们上面的详细步骤。