在WordPress上减少HTTP请求的9个技巧

Wordpress大师

随着网页的速度变得越来越重要，确保你的网站尽可能高效是至关重要的。要做到这一点，最有效的方法之一就是减少网站发出的HTTP请求数量。本文将探讨“减少HTTP请求”诊断的含义，讨论为什么以及如何减少站点发出的请求数量，以及这会对SEO和用户体验产生什么影响。你注意到你的网站很慢，你决定用速度测试工具找出原因，比如Pingdom。诊断的一部分是“减少HTTP请求”，这被认为是关键的。如何减少HTTP请求并提高网站速度?本文将解决在WordPress站点上减少HTTP请求的最关键问题:为什么会出现诊断?它如何影响你的网站的用户体验（UX）和SEO?如何识别HTTP请求优化机会?最重要的是，如何解决WordPress上的“减少HTTP请求”问题?本文中





什么是“少做HTTP请求”诊断?过多的HTTP请求如何影响UX和SEO ?如何识别HTTP请求优化机会?如何修复WordPress上的“减少HTTP请求”问题?修复手动修复与WordPress插件

结论常见问题





什么是“少做HTTP请求”诊断?

  

为了解开这个诊断，让我们从HTTP请求的背景研究开始。HTTP是超文本传输协议（HyperText Transfer Protocol）的首字母缩略词，是网络浏览器用来与网络服务器通信的互联网协议。HTTP请求是向服务器发出的标准网络请求，用于获取所需的任何资源。在网站上，这些资源包括HTML文档、CSS样式表、JavaScript文件、字体等。

要了解更多关于HTTP的知识，请访问10Web Site Speed Glossary。HTTP请求的本质解释了为什么诊断说“少做”而不是“不做”HTTP请求:它们对任何网站的功能都是必不可少的。一个网页由不同的基本部分组成:HTML文档，为页面设计样式的CSS样式表，添加交互功能的JavaScript文件，图像，字体等。这些网页元素存储在服务器上。在每次加载页面时，如果它们没有在本地缓存，浏览器将代表您的计算机请求在使用它们构建网页之前获取这些资源。实际上，会发出单独的HTTP请求来获取这些资源（图像、样式表和脚本）。例如，如果有多个外部CSS文件，将启动一个单独的HTTP请求从服务器检索它们。上面描述的操作也发生在WordPress网站上，可能会有比平常更多的HTTP请求。这是由于网站运行所依赖的插件和字体:每个插件运行所需的样式表和脚本将在页面加载时在不同的HTTP请求中检索，从而增加了页面的HTTP请求池。字体也是如此。此外，使用自定义字体而不进行适当的前端优化可能会导致页面加载缓慢。综上所述，过多的HTTP请求会如何影响SEO和网站的用户体验呢?过多的HTTP请求如何影响UX和SEO ?首先，了解网站速度是在互联网上运行的任何商业企业成功的决定性因素是有益的。想象一下，如果你不得不等待五秒钟或更长时间来加载这个网站的主页，你回来找东西的机会有多大?这就是过多的HTTP请求对用户体验的影响。更少的HTTP请求尤其重要，因为默认情况下大多数HTTP请求都是渲染阻塞的，除了async/延迟的JavaScript文件和图像。在绘制DOM之前，页面等待所有HTTP请求完成，这会对网站的Core Web vital评估产生负面影响。尽管有了增强的浏览器功能，大多数这些请求都是并行进行的，但无论如何，延迟增加了任何网站的交互时间（TTI）。然而，过多的HTTP请求对用户体验和SEO的影响并不是相互排斥的。事实上，在2018年，Pingdom报告说，如果页面加载时间从2秒增加到5秒，网站的跳出率可以从9%增加到38%。虽然高跳出率并不会直接影响网站在谷歌上的搜索排名，但这意味着排名因素没有得到优化。一个例子是页面加载时间（这是一个排名因素）。

  



的形象来源

网站速度作为本文的一个方面,也是很重要的考虑,大多数的网站访问者是通过他们的移动电话。网页在移动设备上的加载时间要比在台式机上长80%。这些统计数据支持这样一个事实，即减少HTTP请求的影响不仅仅是一个令人难忘的用户体验，它还提高了网站的质量，从而提高了SEO的可信度。此外，网站上的流量加上对托管服务器的请求数量也会减慢网站的速度。这也会损害用户体验和SEO。总的来说，优秀的用户体验离不开快速的页面加载时间，无论你的网站上运行的是什么。同样的道理，一个速度慢的网站也无法在谷歌的搜索排名中脱颖而出。如何识别你的机会，使WordPress上的HTTP请求更少?这有点棘手，因为HTTP请求是必不可少的。因此，重要的是要注意正在传输的内容的大小，而不仅仅是HTTP请求的数量会影响页面加载时间。简单地说，更多的文件意味着更多的HTTP请求，更大的文件代表更长的HTTP请求。这就是为什么将所有JavaScript合并到一个文件中并不是解决页面加载时间问题的灵丹妙药。然而，它在某种程度上是有帮助的，因为我们节省了建立连接、DNS解析和其他一些阶段。此外，关于JavaScript文件组合，如果一个JavaScript文件（脚本a）依赖于另一个JavaScript文件（脚本B），脚本a将等待脚本B请求完成后再执行。但是，如果结合起来，那么就没有额外的等待。在确定HTTP请求优化机会时，有几个问题可以证明是有用的。但是，重新确定HTTP请求是用来获取资源的，这一点很重要。这些资源的数量和大小提高了“发出更少的HTTP请求”的诊断。这意味着优化网站上的HTTP请求与你可能知道的其他网站速度因素间接相关。考虑到这些要点，诚实地回答以下问题可以确定潜在的优化前景，以最大限度地减少网站上HTTP请求的数量或时间。我是否需要在页面加载时获取所有资源?（优化数量）我可以将一些样式或脚本组合成一个吗?（优化数字）我需要所有的JavaScript在初始页面加载或我可以推迟一些?（优化所花费的时间）我是否需要在初始页面上加载所有图像，或者我可以延迟加载它们?（优化数量和时间）我使用了多少个插件，启用了多少个?当前页面不需要的插件是否会添加额外的HTTP请求?我可以为我的一些核心插件提供轻量级的替代品吗?接下来的操作步骤将讨论如何发出更少的HTTP请求来解决所有这些问题。但在此之前，重要的是要注意，一个网页发出的HTTP请求数量乘以访问该页面的用户数量会增加服务器上的负载。如何修复“减少HTTP请求”在前面的章节中，已经确定了一个网站执行的HTTP请求的数量和每个请求花费的时间会损害网站的整体性能和质量。如何优化你的网站以减少HTTP请求?让我们回顾一下第一个也是最明显的解决方案。如果你想在没有W3 Total Cache这样的插件的情况下发出更少的HTTP请求，下面的技巧将为你省去配置插件进行优化的障碍。

插件由它们运行的脚本组成。这些脚本在安装它们的每个页面加载时都从服务器获取。从技术上讲，拥有更多的插件意味着更多的HTTP请求。在WordPress上减少HTTP请求的第一步是审计你的WordPress插件。在对它们进行审核之后，您将获得一个公正的不必要插件列表，这些插件在过去可能有用，但现在不再需要了。删除这些未使用的插件将消除大量无用的HTTP请求，从而改善站点加载时间。

关于HTTP请求，一个重量级的插件需要更长的时间来初始化一个网站，因为它需要的脚本和样式的数量。这些脚本和样式是通过HTTP请求的。根据它们的数量和大小，它们可能需要很长时间才能取到。不可否认，其中一些插件是网站所需要的。一个典型的例子就是博客上的社交分享小部件。

  



的形象来源

最好的解决方案是当前用例轻量级替代来源。如果你得出结论，一个插件没有适合你的用例的更轻的替代品，寻找其他优化机会。此外，如果你安装了一个重量级的优化插件，它会给你的服务器增加更多的负载，你最好的选择是仔细选择一个合适的替代品，即使它会改变你的工作流程，也能提高它的性能。

图像是表示和美化的视觉辅助工具。如果使用得当，它们可以增强每个网页的外观。在其他用例中，例如博客，一些图像被用作信息图表。出于同样的原因，并非所有的图像都是必要的。检查映像的目的并确定它是否满足其用例，或者其他替代方案是否足够，这一点很重要。例如，在比较两种产品时，表格可以比信息图表更好地作为视觉辅助工具。在做出必要的权衡和删除必要的图像之后，您将最小化您网站上的HTTP请求大小。在这一点上，您将留下重要的部分。尽管如此，您可能仍然会注意到缓慢的页面加载时间。这是因为有些图像可能没有经过优化。网页上图片的最佳做法是在上传到WordPress之前用TinyPNG之类的工具压缩图片。这将确保获取图像的HTTP请求更快。另一种选择是将图像转换为WebP。







10Web Booster使用高效的图像优化技术，包括WebP转换，压缩和针对所有图像的容器特定图像调整大小。延迟加载多媒体内容在初始页面加载时，浏览器尝试将所有页面内容加载到不在访问者视窗中的部分。如果你不是技术人员，这听起来可能不错。这意味着，如果您在查看器的视口之外有一堆图像和重要的小部件，浏览器将在呈现页面之前尝试通过HTTP加载所有这些图像和小部件。想象一下，如果图形内容是必不可少的，你的网站会变得多么缓慢。事实上，加载图像、视频和帧需要更多的时间，这取决于它们的大小是的，他们的HTTP请求花费的时间就越长。延迟加载延迟页面资源的立即呈现，直到它们被需要。这种技术首先加载必要的内容（上面的内容），与不惰性加载相比，发出的HTTP请求更少，因此增加了页面加载时间。也就是说，有不同的方法来实现延迟加载。WordPress（5.5+版本）使用HTML加载属性对图像使用原生延迟加载。实际上，这通常是不够的。感谢10Web，您可以将所有延迟加载需求迁移到10Web Booster。

10Web Booster使用浏览器原生技术，使用香草JS延迟加载，以及包含延迟加载背景图像的JQuery插件。它可以根据内容智能地选择实现哪种技术，并确保无缝的UI渲染和与主题和插件的冲突。想要加速你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 获得10Web助推器，它是免费的 不需要信用卡想要加快你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上!“kdsim8”不需要信用卡“kdsim9”结合CSS和JS文件

WordPress主题和插件使用样式表和JavaScript文件。开发人员编写的自定义脚本和样式也包含空格和缩进，以提高代码的可读性。所有这些文件都被要求在您的网站上需要。安装的插件和主题所需的CSS样式表越多，就越难在这方面发出更少的HTTP请求。因此，解决方案是将样式表和JavaScript文件合并为一个。这样，加载任何部分所需的HTTP请求数量就会减少，并且由于文件的最小化，请求往返所需的时间也会减少。出于这个原因，有一些WordPress优化插件可以将CSS和JS文件作为其他功能的一部分进行最小化和组合。WP Rocket就是一个例子。然而，我们推荐的插件是10Web Booster。在这里阅读我们推荐10Web Booster的原因。将图像与CSS精灵结合在一起，有好消息也有不太好的消息。好消息是，对网页上使用的图像发出的HTTP请求的数量有了显著的减少。CSS精灵允许您将图像组合成单个图像，并通过CSS在网页上访问它们。从技术上讲，只需要一个HTTP请求来获取合并后的图像。不太好的消息是，您不能将CSS精灵用于信息图表或任何信息图像、背景图像或博客文章图像。此外，由于图像被合并到一个文件中，您无法在必要时对它们进行SEO排名。此外，页面主体中的图像需要alt-text以方便访问。由于这些原因，只有图标和徽标适合CSS精灵。如果你可以利用CSS精灵的好处，试试这个CSS精灵生成器工具。它将上传的图像组合成CSS精灵图像，并输出所需的HTML和CSS来访问您网站上的个人照片。

一些插件只需要在选定的页面。Contact Form 7就是一个很好的例子。但是因为你已经安装了它，它的脚本和样式可能会在每个页面上被请求。因此，您的站点可能会因为不必要的样式和脚本而变慢。插件中脚本的条件加载确保了站点范围内不需要的脚本只在需要时才被请求。要做到这一点，确保你在网站上安装的插件只在必要的网页上附加脚本和样式。例如，如果有一个表单插件，它只在包含表单的网页中加载脚本。

10Web助推器有助于避免加载不必要的样式在网页中，通过分析<！doctype html >< >头 > < /头身体< >正文内容…身体< / >< / html >使用这种方法，即使需要其他HTTP请求来呈现页面的其他部分，在页面加载时间方面也会有显著的性能提高。再一次，更大更多的文件导致HTTP请求的响应时间更长。一个有助于减少HTTP请求的WordPress插件应该能够减少传输资源的大小，并确保在任何给定时间只有必要的文件通过HTTP被请求。没有那么多插件适合这个用例，但我们有一个插件。10Web Booster

  

10Web Booster是一个自动速度优化插件和10Web平台的一个组件。它提供免费的全面前端优化，包括一个CDN，以减少HTTP请求的持续时间。它们包括但不限于延迟加载图像，缩小和压缩CSS和JS文件，优化图像以减少图像大小而不损失质量，资源缓存，以及以非阻塞方式智能延迟关键样式和脚本。10Web Booster使用的优化技术不需要手动配置即可获得最佳性能。想要加速你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 不需要信用卡，想要加快你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 无需信用卡 结论

HTTP请求并不坏，对任何网站的存在都是必不可少的。当你的网站发出的HTTP请求降低了网站的质量和用户体验时，底线就在哪里。互联网上的许多网站都通过减少HTTP请求来优化加载时间并保持良好的用户体验。记住，每个资源（图像、图标、样式表、脚本）都是一个单独的HTTP请求。它们越大，请求所需的时间就越长。此外，为WordPress网站安装的每个插件都会为其所需的样式和脚本发出HTTP请求。本文中讨论的操作步骤已经经过测试，可以帮助您在优化HTTP请求时做出明智的决定，而不会损害网站的任何重要部分。总而言之，你可以有一个插件，它可以减轻你的负担，优化伴随的因素，导致更长的HTTP请求从你这里免费。常见问题解答

多少HTTP请求太多?一般规则是将一个页面的HTTP请求控制在50个以下。但是，对于初始加载的可见页面内容，将这个数字减少到10以下是很常见的。我们在10Web的规则是确保它们不会减慢你的网站速度。如果他们满足这个前提，那么你就很好。如何度量HTTP请求完成所花费的时间?您可以使用CTRL + SHIFT + i在浏览器上查看开发人员工具。在Network选项卡下，每个请求所花费的时间显示在time列中。使用CDN会影响HTTP请求吗?CDN在减少到主机服务器的物理距离和减少HTTP请求的响应时间方面非常出色。不频繁的cdn到服务器通信减少了HTTP请求，Cloudflare就是一个很好的例子。但是，它不会减少文件大小和HTTP请求的数量。使用本文中讨论的优化技术可以减少HTTP请求的数量。

我应该先加载哪些文件?只应该首先加载显示上层内容（在初始加载时显示在用户视图上的内容）所需的文件。所有次要资源（例如JavaScript文件）都可以在DOM渲染后加载