如何减少HTTP请求以加快WordPress网站速度

2019年11月5日08:09:40 2 135

如今,必须拥有快速的网站、在线商店或博客。快速的网站不仅可以为访问者提供更好的体验,还可以提高您网站排名。向服务器发送更少的HTTP请求可以缩短网站的加载时间。本文分享如何减少HTTP请求以加快WordPress网站速度?

如何减少HTTP请求以加快WordPress网站速度

如何减少HTTP请求以加快WordPress网站速度

什么是HTTP请求?

HTTP请求是每当有人访问您的网站时发送到服务器的请求。这些请求可以包含各种信息,供服务器处理并采取行动。此类请求中最重要的部分是URL。根据此信息,服务器将尝试返回有效的响应,例如文件。HTTP的第一个稳定实现HTTP / 1.0依次执行这些请求。这意味着在发送下一组请求之前,需要完成一组请求。显然,这意味着具有大量外部文件的页面将遭受更长的加载时间,从而使您的网站变慢。

如何减少HTTP请求以加快WordPress网站速度

一个接一个地加载大量文件将导致更长的加载时间。现在您可能想知道“如何加快此过程?”。幸运的是,有一些技术可以帮助您。

1. 浏览器流水线

自从HTTP / 1.1引入以来,就有可能使用一种称为“浏览器流水线”的功能。此功能允许浏览器快速连续获取多个文件,而无需等待先前的请求完成。这意味着浏览器不必等待很长时间即可发送下一个请求。

从理论上讲,默认情况下启用此功能非常方便。可悲的是,在实践中,该系统仍然存在一些缺陷。由于其异步特性,可能会以错误的顺序加载文件。

让我们以一个自定义jQuery插件为例,说明浏览器流水线可能弊大于利。由于您的自定义插件依赖于jQuery,因此在您的插件可以正常运行之前,需要完全加载jQuery库。您可能已经知道这可能会出错。因为浏览器流水线不等待先前的请求,所以您的插件可以在jQuery之前加载。结果?JavaScript错误。

加载顺序的问题也很容易在诸如图像之类的东西上发生。对于图像,图像的显示顺序可能与HTML中的实际顺序不同。

2. 排头阻塞(HOL)

使用浏览器流水线时有时会发生的另一种现象是排头阻塞(HOL)。这意味着某个特定的数据包(文件的一部分)使同一文件的另一个数据包无法成功完成。一旦第一个包到浏览器的传送结束,其他数据包就只能继续前进。

由于提到的问题,大多数浏览器默认情况下禁用HTTP。在最新版本的HTTP中,恰当地命名为HTTP / 2,通过使用一种称为多路复用的技术来解决流水线问题,该技术通过单个TCP连接发送多个HTTP请求。如果要使用此技术,请确保服务器和受众的浏览器正确支持 HTTP / 2。

3. 将JavaScript文件移出头部

还有另一种方法可以使您的网站加载速度更快,而不会带来太多麻烦。

将所有必需的CSS和JavaScript放在部分中通常被认为是惯例。但是,此技术的问题在于HTML的其余部分将不会显示,因为这些文件会阻止其呈现。这会使您的访客在空白页面上停留几秒钟。

早在2007年,一项新的最佳做法是建议将所有JavaScript从部分移到页面底部,就在</ body>标记之前。为什么?因为JavaScript会阻止页面的任何进一步呈现,直到它加载了所有文件。通过移动JavaScript,页面的HTML将首先呈现,而不是最后呈现。有时,您可能希望页面的呈现要等到特定的JavaScript文件加载后才能进行。将文件移出HTML的部分时,这将是唯一的例外。

不建议将CSS移到页面底部,因为它会阻止浏览器正确显示和格式化内容。这会影响整体用户体验。没有人想要访问一个文本会在屏幕上跳转的网站,因为样式表直到最后才加载。尽管将JavaScript移至页面底部并不会减少HTTP请求的数量,但确实有助于改善整体体验。

4. 减少文件数量

加快网站访问速度的另一种方法是限制加载的文件数量。这是因为对于您尝试加载的每个文件,浏览器都会向服务器发送一个单独的HTTP请求。文件越少,请求就越少,因此网站速度就越快。

最常见的是,JavaScript,CSS和图像是缓慢加载页面的主要原因。为了解决这个问题,您可以使用一些技巧,即:

5. 合并JavaScript和CSS文件

合并CSS和JavaScript,您不仅可以减少文件的整体大小,而且还可以减少需要加载的文件数量。一个好的经验法则是根据文件各自的功能对文件进行分组。如果您有多个文件可以处理图像,最好将它们合并在一起。

此外,通过限制最初加载的CSS文件的数量,可以减少总的加载时间。初始加载CSS文件后,浏览器会对其进行缓存,因此后续请求不会占用太多时间。您可以想象拥有一个包含所有相关CSS以及缓存的文件可以显着改善整体体验。

如果您有特定于特定页面的CSS,则最好单独加载该文件。因此,您不会不必要地运送HTML中其他地方未使用的特定CSS规则。

6. 优化图像

有些主题严重依赖图片。由于图像本身也是单独的文件,因此它们也成为HTTP限制的牺牲品。为了解决这个问题,可以使用一种称为CSS spriting的技术。此技术使您可以拍摄多张图像(通常大小相似)并将其缩小为一张图像。然后,使用一些CSS技术,只显示特定部分。

7. 延迟加载

确保图像不会使页面变慢的另一种方法是使用“延迟加载”插件。延迟加载是一种技术,其中一些JavaScript会查看访问者的当前视口,并且仅加载(几乎)视图内的图像。延迟加载插件是一个很好的解决方案,它可以延迟图像加载,直到用户开始向下滚动页面为止。

8. 额外提示:使用CDN

最后,这里有个额外提示。内容分发网络(CDN)是遍布全球的优化服务器网络,可确保快速分发静态内容,例如图像,CSS和JavaScript。使用CDN的主要优点是您可以从单独的服务器中检索内容。这克服了HTTP限制之一,该限制限制了一次性向单个服务器发送大量请求。通过克服此限制,您可以缩短加载时间!这些CDN的另一个优点是数据来自最接近您访客地理位置的服务器。与服务器的距离越短,意味着数据检索越快。可以使用多个CDN,这意味着您的浏览器可以同时处理更多 HTTP请求。

如您所见,有很多技术可以减少您网站的加载时间。到目前为止,您可以做的最大改进就是减少了发送到服务器的HTTP请求的数量。

  • 支付宝扫码赞助
  • weinxin
  • 微信扫码赞助
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • 爱笑啦 3

      写的很专业呢,学习了

      • 深圳APP开发 1

        感谢楼主 感谢分享