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

目录

• 什么是 HTTP 请求？
• 为什么应该减少 HTTP 请求
• 如何测试和测量站点的 HTTP 请求
• 减少对网站的 HTTP 请求的 10 种方法（手动和使用插件）

---

右键点我复制链接地址，分享页面有积分。

---

您是否遇到 WordPress 网站速度缓慢的情况？过多的 HTTP 请求可能是问题的根源。通过减少 HTTP 请求来减少网站的页面加载时间，可以提高用户访问内容的速度，并改善他们的整体 Web 浏览体验。页面加载速度很重要，它直接影响用户使用应用程序或网站的感觉。

但是什么是 HTTP 请求呢？每页应该制作多少个？您目前正在处理多少个请求？请继续关注：在本文中，我们将定义 HTTP 请求，解释它们为何重要、如何衡量它们以及如何保持较低的请求量。 

---

什么是 HTTP 请求？

HTTP 是一种通信协议，用于在 Internet 上传送内容和数据（HTML 文件、CSS、图像、视频等）。万维网是一个广阔的地方，服务器上托管着大量信息，对吗？如果您想访问此内容，您的浏览器需要发送请求并接收响应。如果没有请求，您和服务器之间就无法进行有效的通信。 

HTTP 请求也可以看作是用户和服务器之间的一层通信。客户端发送的消息称为 HTTP（超文本传输​​协议），它有助于将请求消息有效地构造为三个部分：请求行、标头和正文。 

正如您所看到的，每次访问站点时，都会发出一些 HTTP 请求来显示内容。因此，页面上发出的 HTTP 请求越多，加载所需的时间就越长。 

您可能想知道，有多少个 HTTP 请求是“太多”HTTP 请求？让我们回顾一下一些关键数据，以便您了解 WordPress 网站的定位： 

• 出色的性能：每页 HTTP 请求数低于 25 个
• 健康的性能：将 HTTP 请求保持在每页 50 个以下
• 网络上的平均 HTTP 请求：  70 个 HTTP 请求

总结一下： ✅ HTTP 请求并不全是坏事。 ✅ 您的 WordPress 网站需要它们来呈现内容并看起来不错。  ✅ 您不需要尽可能多的 HTTP 请求（将它们控制在每页 50 个以下）。 ⚖️一切都是为了平衡：在不牺牲用户体验的情况下，使用尽可能少的 HTTP 请求。

保持网站健康非常重要，因为过多的 HTTP 请求会降低网站速度。我们将在下一节中解释原因。 

---

为什么应该减少 HTTP 请求

您应该发出更少的 HTTP 请求以保持较高的速度和性能。雅虎表示，“ 80%的最终用户响应时间都花在前端”。换句话说，您的性能主要受到图像、样式表和脚本的影响，这些都是通过 HTTP 请求呈现的。 

它们是显示内容的关键组件，但服务器和用户之间的来回聊天需要时间来加载。这种数据往返称为往返响应时间 (RTT)： 

减少 HTTP 请求的另一个原因是保持Web核心指标健康，尤其是最大内容绘制 (LCP) KPI。 

LCP 确定第一个有意义的内容片段的加载速度。这完全取决于用户的速度感知。 

📖 这是您应该阅读的指南：如何提高 WordPress 上的 LCP 分数。

三个因素会影响 WordPress 网站的 LCP 分数：服务器响应时间慢、阻塞渲染的 JavaScript 和 CSS 以及资源加载时间慢。因此，减少 HTTP 请求的数量是提高页面速度的关键。您的网站发出的 HTTP 请求越少，向用户加载最重要内容 (LCP) 的速度就越快。 

总结： 

您的 WordPress 网站上有很多文件？→ 您收到大量 HTTP 请求 大而重的文件？→ 您获得更长的 HTTP 请求 更长的 HTTP 请求 → 增加实际加载时间 减少 HTTP 请求 → 对 LCP 产生积极影响

请记住，如果用户可以更快地访问您的内容，那么您就增加了他们留在页面上并与您的网站互动的机会。互动还意味着他们可能会购买您的产品……不仅您可以避免访问者的挫败感，而且谷歌也会喜欢您的网站。 

这就引出了下一个关键问题：您的WordPress 网站发出了 多少 HTTP 请求？

---

如何测试和测量站点的 HTTP 请求

有一些在线工具可以模拟 WordPress 网站上的 HTTP 请求，即： 

• GTmetrix（您需要有一个免费帐户才能访问您的页面详细信息）- 只需输入您网站的 URL，运行审核并打开“摘要”选项卡即可。向下滚动到最后一个名为“页面详细信息”的部分，以了解您的页面发出了多少个请求。 

瀑布选项卡是查看单个 HTTP 请求在您的网站上花费多长时间的好方法：

您还可以查看来自特定插件（例如 Elementor）的 HTTP 请求：

💡 GTmetrix 由 Lighthouse 技术提供支持。如果您想了解有关 Lighthouse KPI 的更多信息，我们有详细的教程，重点介绍如何提高 Lighthouse 性能分数。

Pingdom — 只需将您的 URL 输入框中即可了解您的页面调用了多少个 HTTP 请求：

Query Monitor– 一个免费的调试工具，用于识别减慢页面加载的插件或脚本。HTTP API 调用面板显示有关页面加载期间执行的 HTTP 请求的信息。

---

减少对网站的 HTTP 请求的 10 种方法（手动和使用插件）

HTTP 请求越少意味着要下载的字节数就越少，但开始这种优化可能会令人望而生畏。不用担心。借助我们下面列出的技术，您将能够减少 HTTP 请求。对于每种策略，我们总是给出两种解决方案：使用 WordPress 插件和手动解决方案。 

1. 结合 CSS 和 JavaScript

影响力：高🚀🚀🚀

减少 HTTP 请求的一个简单方法是组合多个 JS 和 CSS 文件。 

使用 WordPress 主题和插件时，需要加载许多 CSS 样式表和 JS。这需要浏览器加载所有这些资源来渲染网页，这意味着多个 HTTP 请求。  

使用在线工具结合 CSS 和 JS：

• Minify — 组合多个 CSS 或 JavaScript 文件。
• Combine– PHP 脚本与 URL 重写相结合，以连接和压缩 CSS 和 JavaScript 文件。
• csscompressor.net（仅限 CSS）— 在线 CSS 压缩器，快速且免费使用。
• jscompress.com（仅限 JS）— 这一 JavaScript 压缩工具允许您将 JavaScript 文件合并到一个文件中。 
• SmartOptimizer — 一个 PHP 库，可通过使用串联技术优化前端来增强网站性能。 
• CSS-JS-Booster — 连接、缩小和压缩 CSS 和 JavaScript 文件。
• CSS Crush — 连接并缩小 CSS 文件。
• csscompressor.net（仅限 CSS）——在线 CSS 压缩器，快速且免费使用。
• jscompress.com（仅限 JS）— 这一 JavaScript 压缩工具允许您将 JavaScript 文件合并到一个文件中。 

将新组合的 CSS 和 JS 文件上传到您的 WordPress 网站： 

我们的目标是将所有单独的请求放在一个文件中。 

• 只需将所有 CSS 代码复制/粘贴到一个主文件中，然后将该文件重新上传到服务器
• 如果您使用 C 面板：
  • 登录您的 cPanel
  • 转到“文件管理器”
  • 单击包含您的 WordPress 网站的文件夹
  • 在根目录中创建一个文件夹存放文件 

使用插件组合 CSS 和 JS 文件（最快、最安全的方法）： 

• WP Rocket：将缩小的文件合并为每种文件类型（CSS 或 JavaScript）的一个文件 
• Autoptimize：帮助您连接脚本（CSS 或 JavaScript）。

2. 将图像与 CSS Sprite 组合

影响力：高🚀🚀🚀

CSS sprites 是减少对图像资源的 HTTP 请求数量的好方法。您网站上的所有 CSS 文件都是阻塞渲染的，这意味着加载的 CSS 文件越多，您的网站速度就越有可能减慢。 

为了避免这种情况，您应该优化网站上的图像并将它们合并到一个文件中。完成此操作后，就该转向 CSS Sprites技术了：使用 CSS 仅在需要的地方显示图像文件的一部分。此技术可提高使用许多小图像、徽标或图标的站点性能。

您可以在我们关于在 WordPress 中使用 CSS Sprites组合图像的专门文章中了解更多信息。

使用基于 Web 的工具将图像与 CSS 精灵组合：

• CSS Sprite Generator, Editor, and Code
• CSS Sprite tool
  • 转至CSSspritestool站点，使用拖放生成器将多个图像合并为一张图像。 
  • 您将获得一个组合图像文件，以及您上传的每个图像的一些 CSS 代码。
  • 将组合图像文件上传到您的 WordPress 网站
  • 使用定制器将 CSS 代码添加到您的 WordPress 网站
  • 使用 HTML 在您想要的位置显示每个图像

3.优化图片（并删除不重要的图片）

影响力：高🚀🚀🚀

虽然没有现有的 WordPress 插件允许您专门将图像与 CSS 精灵组合，但您仍然可以使用一些令人难以置信的插件来优化您的图像。图像是用户体验的必备条件，但有一个问题：网站上的每个图像都是一个单独的 HTTP 请求！因此，请明智地选择它们，并考​​虑仅让图像为您的内容带来价值。

优化图像意味着在不影响质量的情况下减轻其重量。让光图像变得模糊甚至无法识别内容是没有意义的，对吧？ 

以下是一些您可以使用的调整大小工具： 

• Photoshop
• GIMP — 免费，Windows 和 Mac
• IrfanView — Windows 免费
• Preview for Mac

要自动优化您的图像，我们建议您使用 WordPress 插件： 

• Smush Pro 
• Optimole

阅读我们的专门文章以发现更多图像优化插件。

注意：优化图像不会直接减少 HTTP 请求的数量，但会减小图像的大小并使加载速度更快。 

4. 启用图像延迟加载

影响力：高🚀🚀🚀

实现“延迟加载”意味着推迟浏览器视口之外的图像加载。简而言之，如果您的访问者没有一直向下滚动，则位于页面末尾的图像甚至不会被加载。由于延迟加载脚本，您可以减少 HTTP 请求的数量，因为您只加载首屏上方的图像。 

手动实现延迟加载脚本： 

首先，您需要确定如何加载图像：您使用的是 <img> 标签还是 CSS？Web.Dev 很好地解释了如何为这两种方法实现延迟加载脚本。您还需要使用Intersection Observer API检查元素是否在视窗中。

这是延迟加载在图像和 iframe 上分别的样子： 

<img src=”image.jpg” alt=”...”loading=”lazy”><iframe src=”video-player.html” title=”...”loading=”lazy”></iframe>

​​使用延迟加载插件自动应用脚本：

• WP Rocket 的延迟加载（免费）— 仅在用户可见时显示内容。 
• WP Rocket — 具有延迟加载功能。它是一个高级插件，具有许多其他优点，例如缓存、清理代码等） 
• 如果您正在寻找更多延迟加载插件，请查看我们的文章。 

5. 缩小 HTML、CSS 和 JavaScript

影响：中等🚀🚀

缩小代码意味着从文件中删除不必要的空格、注释和额外字符，以使其更轻。此技术可应用于 JavaScript、CSS 和 HTML 文件。当然，这都是为了清理对最终用户来说并不重要的代码。 

未缩小的JS	缩小的JS

手动缩小代码：

在编辑文件之前，请从服务器下载副本以将其保存在计算机上以防万一。

• 缩小 HTML：打开代码表并删除注释 (<!– … –>)、多余空格、换行符和类似内容
• 缩小 CSS：从 CSS 文件中删除多余的空格和注释 (/* … */) 尽可能缩短 ID、类或变量名称
• 缩小 JS：从源代码中删除 JS 注释（//）和多余空格。尽可能将数组转换为对象，优化条件语句，并找到基本常量表达式的答案。

使用在线工具缩小代码：

• 使用 Sublime text 等代码编辑器来编辑文件
• 将您的代码粘贴到以下在线工具之一中：Closure Compiler、CSS nano、JS nano、UNCCSS。（我们有免费缩小代码的完整列表供您查看）。 
• 用新的缩小代码替换旧代码并将其上传回您的网站

使用 WordPress 插件来缩小代码：

• WP Rocket — 自动缩小 CSS 和 JS。您所需要做的就是选中两个框。WP Rocket 有一个专门用于文件优化的部分。 

6. 用轻量级插件替换重型插件

影响：中等🚀🚀

您网站加载速度缓慢的原因可能是一两个插件因 HTTP 请求过多而导致您的 WordPress 网站过度工作。要将插件分类为轻量级，您应该考虑：代码质量和专业性、功能、代码执行效率以及文件大小。 

如何标记 WordPress 网站的慢速插件？ 

假设您在两个联系表单插件（A 和 B）之间犹豫不决。使用我们的 5 个步骤进行诊断： 

1. 使用 Pingdom 运行性能测试来检查您的 HTTP 请求数量 – 写下您的分数
2. 激活插件 A 并再次运行测试 – 记下你的分数
3. 停用插件 A 并安装插件 B 进行相同的审核
4. 比较每个插件添加了多少 HTTP 请求
5. 选择 HTTP 请求少的那个，删除慢的那个！

使用插件来识别哪些插件因 HTTP 请求过多而导致网站速度减慢：

• Query Monitor plugin可用于识别哪些插件正在损害您的网站并帮助您删除它们

7.仅在需要时加载脚本（并且仅在特定页面上）

影响：中等🚀🚀

减少 HTTP 请求的另一种方法是有选择地禁用不需要加载的特定页面/帖子中的脚本和插件。 

仅在需要时使用 WordPress 插件加载脚本： 

• Perfmatters —允许您禁用页面或帖子上的脚本。

• Asset Cleanup Pro——用户友好性稍差，但也能完成工作。

8.减少外部脚本/HTTP请求

影响：中等🚀🚀

加载每个第三方脚本都是浏览器发出的额外 HTTP 请求，从而降低页面性能（以下是减少第三方脚本影响的方法）。跟踪所有第三方集成对于了解哪些外部资产会降低站点速度至关重要。我们一直在解释如何减少HTTP请求。我们不要被外界影响吧？ 

太多的 HTTP 请求通常会强制从网络获取资源，而我们不希望这样做会影响我们的性能。

外部脚本主要来自Google Analytics标签、Facebook Pixels、YouTube视频、社交分享按钮和A/B测试标签。强烈建议识别所有正在添加请求的文件。 

使用工具来识别最重的外部脚本：

•  这些 Chrome DevTools、PageSpeed Insights 和 WebPageTest 等性能工具可以帮助您识别它们。 

手动优化第三方请求：

现在您已经确定了哪些外部脚本会影响性能，您可以对它们 使用async或defer属性：

<script async src= “script.js”> 
<script defer src= “script.js”>

如果您想了解有关使用这两个属性的更多信息，我们建议阅读 Web.Dev，其中列出了高效加载第三方 JS 的 所有步骤。

使用插件来减少外部脚本对性能的影响： 

• WP Rocket 通过多种方式帮助您减少第三方代码的影响： 
  • 在本地托管 Google Analytics 文件和标签。
  • 预取 DNS 请求，这意味着外部文件加载速度会更快。
  • 预加载字体可帮助浏览器更快地发现 CSS 文件中的 Google 字体。

• ​​推迟你的第三方JS，例如广告和分析，只需告诉你的浏览器他应该首先加载什么。 

9.使用CDN

影响：中等🚀🚀

内容分发网络 (CDN) 是指从尽可能最近的位置提供内容的地理分布服务器。无论用户身在何处，他们都可以快速有效地访问您网站的内容。他们发出的每个 HTTP 请求都将从尽可能最近的位置提供服务。 

市场上免费好用的 CDN： 

• Cloudflare CDN

我们还编写了一份指南来帮助您选择适合您的 CDN 。

10. 延迟渲染阻塞 JavaScript 和 CSS

影响：中等🚀🚀

这个资源很有用吗，或者以后加载可以吗？立即需要使用该资源将决定该资源是否是渲染阻塞的。要消除阻塞渲染的 JavaScript 和 CSS，您需要使用 defer 选项或 async 选项。  

手动删除渲染阻塞资源：

首先，对 Google PageSpeed Insights 进行审核并检查您的机会部分。如果您有“消除渲染阻塞资源”部分，那么您可能需要执行类似于下面示例的操作： 

要手动消除此问题，您需要使用 defer 和 async 属性。 

下面是 defer JS 的 defer 属性的示例：

<script defer src=”/example-js-script”></script>

请遵循我们的深入教程，解释如何手动使用这两个脚本消除渲染阻塞资源。 

如果您想要更简单的东西，只需使用 WordPress 插件即可。

使用 WordPress 插件来延迟 JS 和 CSS：

• WP Rocket —它可以帮助您以最简单的方式推迟 JS 文件。 该插件还提供“优化 CSS 递送”功能，该功能构成渲染阻塞资源。 如果需要，您还可以将任何 JS 或 CSS 文件排除在延迟之外。 

💡 修复 HTTP 请求是加快 WordPress 网站速度的良好开端。 然而，“减少 HTTP 请求”并不是您应该关注的唯一性能优化。 如果您希望您的网站速度快如闪电，请遵循我们有关 页面速度优化的完整指南。