如何减少网站的HTTP请求

每次您浏览网络时，都会在幕后发生一大堆技术，以将内容传递到屏幕上。

工程师通常是管理这些活动的人。营销人员，甚至那些有技术上的人，都倾向于回避它。这些活动之一是HTTP请求，实际上并不像您想象的那么复杂。实际上，营销人员need至少对他们自己的网站执行的操作每次一个人访问它。

The metrics marketers tend to be responsible for can depend heavily on how the backend of a website is developed. For example, a high number of HTTP requests by your webpage can slow down the page's load time, which ultimately damages the user experience. This can cause your visitors to leave the page more quickly if it doesn't load fast enough (which increases your
“跳出率”）。

HTTP requests can affect numerous key metrics that determine how engaged your audience is with your business.

那么，HTTP请求到底是什么？它如何影响用户体验？营销人员可以做什么减少他们的网站的HTTP请求？让我们一一探讨每个问题。最后，您可以更好地了解这些响应协议为何重要，以及可以为您的网站访问者提供更好，更快的体验的方法。

每次有人访问您的网站上的页面时，通常会发生的情况：

1. 该人的Web浏览器（流行的浏览器包括Chrome，Firefox和Safari）向您的Web服务器发送请求。您的服务器托管他们试图在您的网站上访问的网页。
2. 浏览器请求您的服务器通过包含与该页面关联的内容的文件发送。该文件可能包含网页上存在的文本，图像或多媒体。
3. 一旦该人的浏览器收到此文件，它就会在人的计算机屏幕或移动设备上渲染您的网站。
4. 如果您的网页上尚未收到更多内容，则浏览器将发送另一个HTTP请求。

以上步骤描述了一个http请求，要求回答。HTTP代表“超文本传输​​协议”，这只是Web浏览器发送文件请求的奇特名称，而服务器将文件发送到浏览器的服务器发送（或“传输”）。

为什么HTTP请求会影响用户体验

HTTP请求会影响您网站的用户体验的原因有两个：数字请求的文件和尺寸要传输的文件。

更多文件=更多HTTP请求

Web浏览器需要为您网站上的每个文件单独提出HTTP请求。如果您的网站没有太多文件，那么请求并在您的网站上下载内容不会很长时间。但是大多数好的网站do有很多文件。

The more files on your website, the more HTTP requests your user's browser will need to make. The more HTTP requests a browser makes, the longer your site takes to load.

更大的文件=更长的http请求

要传输的文件的大小也是页面上加载用户屏幕可能需要多长时间的因素。就像计算机上的文件具有各种文件尺寸一样 - 在字节（b），kilobytes（kb），megabytes（MB）等中测量的文件大小，依此类推 - 嵌入在网页上的文件也是如此。大，高清图像是大型文件大小的常见罪魁祸首。

In other words, the larger or higher definition the content is on your website, the larger its file size is. The larger the file size, the longer it will take to transfer it from your server to a user's browser.

该文件的运输时间越长，用户的浏览器必须等待时间越长，才能在其屏幕上呈现此内容。

How HTTP Requests Affect the User Experience

A长时间的时间can be a disruptive and frustrating experience for your users. Mobile users will have a particularly bad experience, as most of them will have to wait until every asset on a webpage is downloaded before the page even begins to appear in their mobile browser.

研究表明，在网站性能方面，加载时间很重要。根据来自pingdom，网站性能监视器，如果页面加载时间从仅2秒增加到5秒。这是因为在三秒钟的延迟中，更多的人会从您的网站“弹跳”。

那么，网站应针对的HTTP请求的魔术数字是多少？答案是not"one." Some people think they can solve the problem by only using one JavaScript file to control their entire website. But remember: File尺寸也影响负载时间。对于复杂的网站，该文件可能是从您的服务器到受众浏览器的漫长旅程。

尽管不一定会减少您的网页数量最佳的文件，但HubSpot的主要产品营销经理Jeffrey Vocell建议目标在10-30个文件之间。

对于大多数表现最佳的网站，到达那里都是困难的，通常需要专门的工程资源。bob体育苹果系统下载安装截至2019年3月，HTTP页面请求的中位数在移动或桌面上加载网页是between 69 and 75 requests。

How to Make Fewer HTTP Requests to Your Website

1.对您的网站的性能进行评分，以找到根部问题。

如果您从头开始，不知道您的网站表现如何，则首先需要详细报告您网站的整体健康状况。要获得此报告，查看HubSpot的网站分级器。

使用网站分级器，只需输入您要审核的网页的电子邮件地址和URL即可。您将收到一个免费的个性化报告，该报告将您的网站评分为关键指标，包括移动准备，SEO，您页面的总文件大小，当然，该页面收到了多少http请求。

该分级器可以帮助您诊断您怀疑网站所存在的确切问题。例如，如果您的页面请求数量很少，但页面大小很高，您的目标应该是减少网站上的媒体大小 -not必须减少您需要浏览器提出的HTTP请求的量。

2.检查您当前网站当前提出多少HTTP请求。

Once you have an idea of how "big" your webpage is, and how many page requests it's requiring, use谷歌Chrome's Network panelto drill down into these numbers. This tool makes it easy for anyone to check what's on your page, how many HTTP requests the page makes, and what file is taking the longest to load.

找到请求的长度...

First, this tool shows you all the files a browser had to request and transfer in order to download the page -- and it also shows a timeline of什么时候这发生过。例如，Google Chrome的API可以准确地告诉您何时启动HTTP请求以及何时收到图像的最终字节。这是查看页面上的内容以及长时间加载需要什么的一种非常有用的方式。

To see the Network panel for a given webpage, open the webpage in Google Chrome. In the main Chrome menu at the top of your screen, go toView>开发人员>开发者工具。

The Network panel will open in your browser. Since it records all network activity while DevTools is open, the panel may be empty when you first open it. Reload the page to start recording, or just wait for network activity to occur in your application.

这是网络面板中的所有内容的概述：

计算http请求...

Curious how many requests your website requires? The Network panel will tell you that, too. Take a look at the very bottom left of the screenshot above and you'll see the total number of requests; in this case, it's 25 requests.

要了解如何阅读面板并更详细地评估您的网络性能，阅读此Google Chrome资源。

3.删除不必要的图像。

At this point, you should have an idea of which files are taking longest to load, including image files. The easiest way to reduce the number of requested files? Eliminate unnecessary images.

Images are a valuable webpage assetbecause they make for a strong visual experience on your webpages. However, if you have images on your page that aren't contributing much value, it's best to just cut them out altogether -- especially the ones that are really large.

4.减少其余图像的文件大小。

对于您的图像do保留，使用具有压缩文件大小的高质量照片。这将有助于减少提出HTTP请求所需的时间，从而减少加载时间。

如果您是HubSpot用户，则不必过多担心调整和压缩图像 -Hubspot cos将图像上传到HubSpot文件管理器时，将自动调整并压缩图像。要进一步调整图像大小，一旦将其上传到文件管理器中，请单击“克隆和编辑”，如下所示：

请记住，在将图像的文件大小上传到您的网站之前，您可以始终将图像的文件大小缩小。例如，如果您的网页上有许多单独的图像，那么它将您应该在发布页面之前尽可能减少其文件尺寸。

如果可能的话，我们建议将每个图像的文件大小简化为小于100 kb。根据图像的不同，您可能需要在此最低限度上妥协，这没关系。只需尽力防止单个文件输入Megabytes（“ MB”）领域。

为了将图像压缩至最低，请使用类似的工具Squoosh，由Google开发的工具以缩小图像质量的费用缩小图像文件大小。您缩小文件大小的越多，图像质量的越低 - 使用Squoosh的滑动压缩机仪表在适合您的质量和大小之间取得平衡。

Your time is precious, though, and compressing images one by one can be a tedious task. To compress many images at once, consider usingtinypng。

5.设置您的网站以异步加载JavaScript文件。

默认情况下，许多网站加载编写的内容JavaScript网页上的从上到下。因此，即使用户的Web浏览器一次执行多个HTTP请求，其内容也会按件收到负载。这也称为“渲染阻止”，并且可以使您的整个网页加载更慢，因为每个文件都在等待将其加载到用户的Web浏览器中。

将您的网站设置为加载JavaScript“异步”可以覆盖此规则，并且为用户体验提供更好的体验。

异步加载允许网站内容同时渲染多个页面元素，无论它们位于页面上的位置。在WordPress上，有许多插件这可以帮助您做到这一点。HubSpot还允许您更改在网页上流行的JavaScript元素渲染的流行JavaScript元素，以便您不会卡住等待加载。请参阅下面的屏幕截图以查看此选项，并了解有关它的更多信息这里。

要了解有关制作JavaScript代码异步的更多信息，请查看史蒂夫·苏德斯（Steve Souders）的演讲和Visual网站优化器的这篇博客文章。

6.评估页面上有助于页面加载时间的其他部分。

Cutting and compressing images are a great first step to reducing HTTP requests and page load time. But what else did you see on the Network panel that's adding requests? For example, you might find that a video or Twitter integration adds an entire second or two to your load time. That's good to know. From there, you and your team can decide whether those assets are worth keeping.

7.将CSS文件组合在一起。

EveryCSS文件您将用于网站的网站添加您网站所需的HTTP请求数量，从而为您的页面加载速度增加了时间。尽管这有时是不可避免的，但在大多数情况下，您实际上可以将两个或多个CSS文件组合在一起。（您可能需要从开发人员那里获得帮助。）

这是什么意思？每当您识别出看起来相似的多个CSS文件时，在网站的HTML代码中列出了，您就有机会将这些文件组合到一个文件中，因此用户的浏览器不必提出一个以上的HTTP请求来生成这些文件。这是一组单独的CSS文件之前的示例：

Now, take a look at how you can combine all of these files into one line, or file:

如果您使用HubSpot，则可以自动组合许多CSS文件。

CSS代码可以在您的网站上或任何数量的文件中的任何位置，并且它仍然可以正常工作。实际上，often the only reason网站首先具有多个CSS文件，因为该站点的设计师发现使用单独的文件更容易使用。要了解有关组合CSS文件的更多信息，请查看该前端网站绩效指南。