拥有一个快速的网站,网上商店或博客是现在必须的。一个快速的网站不仅能给你的访问者一个更好的体验,还能帮助你的网站排名。向服务器发送更少的HTTP请求可以提高网站的加载时间。但为什么呢?
什么是HTTP请求?
HTTP请求是每当有人访问您的网站时发送到服务器的请求。这些请求可以包含各种信息,供服务器处理和执行。此类请求最重要的部分是URL。基于此信息,服务器将尝试返回一个有效的响应,比如一个文件。HTTP的第一个稳定实现是HTTP/1.0,它是串行执行这些请求的。这意味着需要在发送下一组请求之前完成一组请求。显然,这意味着有很多外部文件的页面将会遭受更长的加载时间,使你的网站变慢。
加速初始加载时间
如前一节所述,一个接一个地加载大量文件将导致加载时间更长。现在你可能想知道“我如何加快这个过程?”幸运的是,浏览器技术中的一些技术和进步可以帮助您解决这个问题。
浏览器流水线
自从引入HTTP/1.1以来,就有可能使用一种称为“浏览器管道”的特性。这个特性允许浏览器快速连续地获取多个文件,而不需要等待之前的请求完成。这意味着浏览器不必等待那么长的时间来发送下一个请求。
从理论上讲,默认启用这个特性会非常方便。遗憾的是,在实践中,这一体系仍有一些缺陷。由于它的异步特性,可能会以错误的顺序加载文件。
让我们以一个自定义的jQuery插件为例,来说明浏览器管道是如何弊大于利的。由于您的自定义插件依赖于jQuery,所以在插件能够正常运行之前,需要完全加载jQuery库。你可能已经看到这可能出错的地方了;因为浏览器流水不等待以前的请求,你的插件可以在jQuery之前加载。结果呢?JavaScript错误。
加载顺序的这个问题也很容易出现在像图像这样的东西上。对于图像,图像显示的顺序可能与HTML中的实际顺序不同。
假日阻塞
在使用浏览器管道时,有时会发生的另一种现象是行头阻塞(HOL阻塞)。这意味着一个特定的包(文件的一部分)会阻止相同文件的另一个包成功完成。其他包只能在第一个包交付到浏览器后继续前进。
由于上述问题,大多数浏览器在默认情况下禁用HTTP管道。在HTTP的最新版本(恰当地命名为HTTP/2)中,通过使用一种称为多路复用的技术解决了管道问题,该技术通过一个TCP连接发送多个HTTP请求。如果您想使用此技术,请确保您的服务器和用户的浏览器正确地支持HTTP/2。
将JavaScript文件移出标题部分
还有另一种方法可以让你的网站加载得更快,而且不需要太多额外的麻烦。但首先是一节简短的历史课!
在部分中放置所有必需的CSS和JavaScript通常被认为是一种常见做法。但是,这种技术的问题是HTML的其余部分将无法显示,因为这些文件阻碍了其呈现。这会导致访问者在几秒钟内看到一个空白页面。
早在2007年,就出现了一种新的最佳实践。这个最佳实践建议将所有JavaScript从部分移到页面底部,就在标签之前。为什么?因为JavaScript在加载了页面的所有文件之前会阻止页面的进一步呈现。通过移动JavaScript,页面的HTML首先呈现而不是最后呈现。有时,您可能希望页面的呈现等到一个特定的JavaScript文件加载之后。当将文件移出HTML的部分时,这将是唯一的例外。
不建议将CSS移到页面底部,因为这会使浏览器无法正确显示和格式化内容。这会影响整个用户体验。没有人愿意访问一个文本在屏幕上跳跃的网站,因为样式表直到最后才加载。尽管将JavaScript移到页面底部不会减少HTTP请求的数量,但它确实有助于改善整体体验。
减少文件的数量
另一种加快网站速度的方法是限制加载的文件数量。这是因为对于尝试加载的每个文件,浏览器都会向服务器发送一个单独的HTTP请求。更少的文件意味着更少的请求,因此一个更快的网站。