如何减少网站的HTTP请求

每次你在网上冲浪，都会有一大堆技术问题发生在幕后，将内容传送到你的屏幕上。

工程师通常是管理这些活动的人。市场营销人员，即使是那些有技术专长的人，也倾向于回避它。其中一个活动是HTTP请求，它实际上并不像您想象的那么复杂。事实上，营销人员需要至少有一般的理解他们自己的网站执行的动作每次有人来访时。

营销人员负责的指标很大程度上取决于网站的后端是如何开发的。例如，网页的大量HTTP请求会减慢页面的加载时间，最终损害用户体验。这可能会导致你的访客离开页面更快，如果它加载不够快(增加
“反弹率”）。

HTTP请求会影响许多关键指标，这些指标决定了用户对业务的参与度。

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

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

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

以上步骤描述了一个HTTP请求，从询问到回答。HTTP代表“超文本传输协议”，它只是web浏览器发送文件请求和服务器将文件发送（或“传输”）到浏览器的别致名称。

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

HTTP请求会影响你网站的用户体验有两个原因数量正在请求的文件和尺寸正在传输的文件

更多文件=更多HTTP请求

Web浏览器需要为您网站上的每个文件进行单独的HTTP请求。如果您的网站没有许多文件，则请求很长时间才能请求和下载您网站上的内容。但最好的网站做我有很多档案。

网站上的文件越多，用户的浏览器就需要发出越多的HTTP请求。浏览器发出的HTTP请求越多，站点加载的时间就越长。

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

正在传输的文件的大小也是页面在用户屏幕上加载所需时间的一个因素。正如计算机上的文件有不同的文件大小——以字节（B）、千字节（KB）、兆字节（MB）等为单位——嵌入网页的文件也是如此。大的高清晰度图像是文件大的常见原因。

换句话说，你网站上的内容的清晰度越高，它的文件大小就越大。文件越大，从服务器传输到用户浏览器的时间就越长。

这个文件传输的时间越长，用户的浏览器在其屏幕上呈现该内容之前等待的时间就越长。

HTTP请求如何影响用户体验

一种长负载时间对用户来说可能是一种颠覆性和令人沮丧的体验。手机用户的体验尤其糟糕，因为他们中的大多数人必须等到网页上的所有资产都被下载后，网页才会出现在手机浏览器中。

研究表明，加载时间对网站性能至关重要。根据来自平度，网站性能监视器，如果页面加载时间从2秒到5秒增加，页面的反弹率可能会从9％飙升到往返38％。这是因为在三秒延迟期间，更多人从您的网站上“反弹”。

那么，一个网站应该针对的HTTP请求的神奇数量是多少呢？答案是不“一个。”有些人认为他们可以通过使用一个JavaScript文件来控制整个网站来解决这个问题。但是记住:文件尺寸影响加载时间。对于复杂的网站，一个文件可以从您的服务器到受众浏览器的令人难以置信的长途旅行。

虽然您的网页应该减少最佳的文件数量，但是Hubspot的主要产品营销经理Jeffrey Vocell建议瞄准10-30个文件之间。

对于大多数表现最好的网站来说，实现目标很困难，通常需要专门的工程资源。截至2019年3月reybet雷竞技下载HTTP页面请求的中位数在移动或桌面上加载网页是69到75个请求。

如何减少对你网站的HTTP请求

1.给你的网站评分，找出根本问题。

如果你是从零开始的，不知道你的网站是如何运行的，你首先需要一份关于网站整体健康状况的详细报告。为了得到这份报告，查看HubSpot的网站分级器。

使用网站评级机，只需输入您想要审计的电子邮件地址和网页的URL。您将收到一个免费的个性化的报告，在包括移动准备，SEO，页面的总文件大小，以及页面正在接收的HTTP请求数量，包括移动准备，包括移动准备，包括一个免费的个性化的报告。

这个年级学者可以帮助您诊断您怀疑您的网站的确切问题。例如，如果您有较少数量的页面请求，但高页面尺寸，您的目标应该是减少网站上媒体的大小 -不必须减少您需要浏览器发出的HTTP请求量。

2.检查您的站点当前发出多少HTTP请求。

一旦你知道你的网页有多大，需要多少页面请求，就使用它谷歌Chrome的网络面板来深入挖掘这些数字。这个工具让任何人都可以很容易地检查页面上有什么，页面发出了多少HTTP请求，以及加载哪个文件花费的时间最长。

找到请求的长度......

首先，这个工具向你展示了为了下载页面浏览器必须请求和传输的所有文件——它还显示了时间轴当事情发生了。例如，GoogleChrome的API可以准确地告诉您图像的HTTP请求何时开始，以及图像的最终字节何时收到。这是一种非常有用的方式，可以查看页面上的内容以及需要很长时间才能加载的内容。

要查看给定网页的网络面板，在谷歌Chrome中打开网页。在你的屏幕顶部的Chrome主菜单中，转到视图>开发人员>开发工具。

网络面板将在浏览器中打开。因为它记录了DevTools打开时的所有网络活动，所以当你第一次打开它时，面板可能是空的。重新加载页面以开始录制，或者只是等待应用程序中出现网络活动。

以下是网络面板中的所有内容意味着的概述：

要计算HTTP请求数。。。

想知道你的网站需要多少请求吗?网络面板也会告诉你这一点。看看上面截图的左下角，你会看到请求的总数;在本例中，是25个请求。

要了解如何阅读面板并更详细地评估网络性能，通读这个谷歌浏览器资源。

3.删除不必要的图像。

此时，您应该知道哪些文件的加载时间最长，包括图像文件。减少请求文件数量的最简单方法是什么?消除不必要的图片。

图片是一个有价值的网页资产因为它们会给你的网页带来强烈的视觉体验。然而，如果你的页面上有一些没有多大价值的图片，最好干脆把它们全部剪掉——尤其是那些真的很大的图片。

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

为了你的照片做保留、使用具有压缩文件大小的高质量照片。这将有助于减少发出HTTP请求所需的时间，从而减少加载时间。

如果您是HubSpot用户，您不必太担心图像的大小调整和压缩问题HubSpot公司将在您将图像上载到HubSpot文件管理器时自动调整图像大小并压缩图像。要进一步调整图像大小，请在将其上载到文件管理器后，单击“克隆并编辑”，如下所示：

请记住，在将图像上传到网站之前，您始终可以进一步减小图像的文件大小。例如，如果你的网页上有许多单独的图像，你就应该在发布页面之前尽可能减少它们的文件大小。

如果可能，我们建议将每个图像的文件大小减少到小于100KB。根据图像，您可能需要在此最小值上妥协，这也就不然了。只需尽力将各个文件放入兆字节（“MB”）领域。

要将图像压缩到最小值，请使用类似的工具Squoosh.，这是谷歌开发的一种工具，用于缩小图像文件的大小，但对图像质量的影响微乎其微。文件大小越小，图像质量就越低——使用Squoosh的滑动压缩表在质量和大小之间找到适合您的平衡。

不过，您的时间很宝贵，逐个压缩图像可能是一项乏味的任务。要一次压缩多个图像，请考虑使用Tinypng.。

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

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

设置您的网站以“异步”加载JavaScript“可以覆盖此规则，并有助于获得更好的用户体验。

异步加载允许网站内容同时呈现多个页面元素，无论在哪个页面上坐在哪里。在WordPress上，有众多插件这可以帮助你这样做。HUBSPOT还允许您更改名为“jQuery”渲染的流行JavaScript元素在网页上呈现，因此您不再等待它加载。请参阅下面的屏幕截图以查看此选项，并阅读更多条件在这里。

要了解有关使JavaScript代码异步的更多信息，请查看本演示由Steve Souders主持和此博客帖子由Visual网站优化器。

6.评估页面的其他部分，这些部分是有助于页面加载时间。

切割和压缩图像是减少HTTP请求和页面加载时间的伟大的第一步。但是您在Network面板上还看到了哪些添加请求的内容呢?例如，您可能会发现一个视频或Twitter集成增加了整整一到两秒的加载时间。很高兴知道这个。然后，你和你的团队就可以决定这些资产是否值得保留。

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

每一个CSS文件您对您的网站使用添加到您的网站需要的HTTP请求的数量，从而增加了您的页面负载速度的时间。虽然这有时是不可避免的，在大多数情况下，您可以将两个或多个CSS文件实际上将两个或更多CSS文件组合在一起。（您可能必须为此获得开发人员的帮助。）

这是什么意思？每次在网站的HTML代码中列出的多个CSS文件时，每次都在网站的HTML代码中列出时，您都有机会将这些文件组合成一个文件，以便用户的浏览器不必制作多个HTTP请求以生成这些文件。以下是组合之前的一组单独的CSS文件的示例：

现在，看看如何将所有这些文件合并到一行或文件中:

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

CSS代码可以在你的网站上的任何地方，也可以在任何数量的文件中，它仍然可以正常工作。事实上通常唯一的原因一个站点有多个CSS文件首先是因为该站点的设计者发现使用单独的文件更容易。要了解有关组合CSS文件的更多信息，请查看本前端网站性能指南。