Return to site

针对SEO的HTTP / 2简介

· seo优化

在90年代中期,有一个着名的事件,一位美国大学的电子邮件管理员接到一位教授的电话,该教授抱怨他的部门只能发送500英里的电子邮件。教授解释说,每当他们试图向更远的人发送电子邮件时,他们的电子邮件都会失败 - 这听起来像是胡说八道,但结果却发生了。要了解原因,您需要意识到光速实际上对您的互联网工作方式的影响比您想象的要大。在电子邮件的情况下,连接超时设置为大约6毫秒 - 如果你做的数学大约是光线行进500英里所需的时间。

网络连接跨越一段距离打开所需的时间称为延迟,事实证明,延迟有很多可以回答的问题。延迟是影响网络速度的主要问题之一,也是谷歌开始发明HTTP / 2的主要原因之一(在它成为网络标准之前,它最初被称为SPDY) 。

HTTP / 2现在已经成为一种既定的标准,并且在网络上看到了很多用途,但仍然没有像大多数网站那样广泛使用。这是一个提高网站速度的简单机会,但尝试理解它可能会相当令人生畏。

在这篇文章中,我希望提供一个可访问的HTTP / 2顶级介绍,专门针对SEO。我确实刷过技术细节的某些部分并没有涵盖HTTP / 2的所有功能,但我的目的不是为了给你一个详尽的理解,而是帮助你理解最容易理解的重要部分方式可能。

HTTP 1.1 - 当前规范
目前,当请求网页或其他资源(例如图像,脚本,CSS文件等)时,您的浏览器会向服务器说出HTTP以进行通信。当前版本是HTTP / 1.1,它是过去20年的标准,没有任何变化。

请求的剖析
在本文中,我们不会过多地深入研究HTTP的深层技术细节,但我们将快速了解请求的内容。请求有几位:

这里的第一行是说这是什么类型的请求(GET是正常的请求类型,POST是人们知道的另一个主要的),以及请求的URL(在本例中为/ anchorman /),最后是哪个我们正在使用的HTTP版本。

第二行是强制性的“主机”标头,它是所有HTTP 1.1请求的一部分,并且涵盖了通常单个网络服务器可能托管多个网站并且需要知道您正在寻找哪些网站的情况。

最后会有各种其他标题,我们不打算进入。在这种情况下,我显示了用户代理标头,指示您用于连接到网站的设备和软件(浏览器)。

HTTP =卡车!
为了帮助解释和理解HTTP和一些问题,我将在HTTP和...卡车之间进行类比!我们假设从您的浏览器发送的HTTP请求是卡车,必须从您的浏览器驱动到服务器:

在这个类比中,我们可以想象道路本身就是从您的计算机到服务器的网络连接(TCP / IP,如果您需要):

道路是一个网络连接 - 我们的HTTP卡车的传输层

然后请求由卡车代表,其中载有请求:

HTTP Trucks从浏览器向服务器发送请求

响应是卡车回来时带有响应,在这种情况下是我们的HTML:

HTTP Trucks将响应从服务器传回浏览器

“那么问题是什么?!这听起来很棒,汤姆!“ - 我听到你们都说。问题是,在这个模型中,任何人都可以盯着卡车拖车看看他们正在拖运什么。如果HTTP请求包含信用卡详细信息,个人电子邮件或其他任何敏感的人都可以看到您的信息。

HTTP卡车并不安全 - 人们可以偷看他们,看看他们携带的是什么

HTTPS
HTTPS旨在解决人们能够窥视我们的卡车并看到他们携带的东西的问题。

重要的是,HTTPS基本上与HTTP相同 - 卡车和它们以相同的方式运输的请求/响应。响应代码和标题都是相同的。

差异都发生在运输(网络)层,我们可以把它想象成我们的道路:

在HTTPS中,请求和响应与HTTP相同。这条路很安全。

在本文的其余部分,我会想象我们的道路上有一条隧道,但不会显示它 - 如果我们看不到我们的卡车那就太无聊了!

延迟的影响
所以这个模型的主要问题与我们卡车的最高速度有关。在500英里的电子邮件介绍故事中,我们看到光速可以对互联网的运作产生非常实际的影响。

HTTP卡车的速度不能超过光速。

HTTP请求和许多HTTP响应往往很小。然而,我们的卡车只能以光速行驶,因此即使这些小的请求也需要时间来回从用户到网站。很有可能认为这不会对网站性能产生明显影响,但实际上这是一个真正的问题......

HTTP卡车以恒定速度行驶,因此较长的道路意味着响应较慢。

用户浏览器和Web服务器之间的网络连接距离越远(我们的“道路”的长度),请求和响应必须越远,这意味着它们需要更长的时间。

现在考虑一个典型的网站不是一个单一的请求和响应,而是一系列的请求和响应。通常,响应意味着需要更多请求 - 例如,HTML文件可能引用图像,CSS文件和JavaScript文件:

其中一些文件可能具有进一步的依赖性,依此类推。通常,网站可能有50-100个单独的请求:

如果我们查看具有CSS文件和大量图像的简单页面的页面(此示例为此HTTP / 2站点)的瀑布图,您可以看到此操作:

在上图中,橙色和紫色段可以被认为是我们的流辊,在那里建立新的连接。您最初可以看到只有一个连接打开(第1行),另一个连接被打开。然后,第2行重新使用第一个连接,第3行是第二个连接的第一个请求。当完整的第4和第5行是接下来的两个图像时。

此时,浏览器意识到它将需要更多连接,因此打开了另外四个连接,然后我们可以看到请求分批进行6次,与6条道路或打开的网络连接相对应。

延迟与带宽

在上面的瀑布图中,这些图像中的每一个都可能很小,但每个图像都需要卡车才能拿到它。这意味着许多往返旅行,并且鉴于我们一次只能同时运行6次,因此等待请求的时间很长。

有时很难理解带宽和延迟之间的差异。带宽可以被认为是我们的卡车的负载能力,每辆卡车可以携带更多。这通常对网页时间没有帮助,因为每个请求和响应都不能与另一个请求共享卡车。这就是为什么已经表明增加带宽对页面的加载时间的影响有限。Mike Belshe在Google上进行的研究表明了这一点,Googler Ilya Grigorik 在本文对此进行了讨论:

事实很清楚,为了提高网络的性能,需要解决延迟问题。上面的研究是导致Google开发SPDY协议的原因,该协议后来转变为HTTP / 2。

改善延迟的影响
为了改善延迟对网站加载时间的影响,已经采用了各种策略。其中之一是“精灵地图”,它会拍摄大量小图像并将它们拼凑成单个文件:

精灵映射的优点是它们都可以放入一个卡车(请求/响应),因为它们只是一个文件。然后巧妙地使用CSS可以仅显示与所需图像对应的图像部分。一个文件意味着只需要一个请求并且需要响应来获取它们,这减少了所需的往返次数。

另一个有助于减少延迟的事情是使用CDN平台(例如CloudFlare或Fastly)来托管全球服务器上的静态资产(图像,CSS文件等 - 非动态且对每个访问者都相同的东西) 。这意味着用户的往返行程可以沿着更短的道路(网络连接),因为附近的服务器可以为他们提供他们需要的东西。

CDN还提供了许多其他好处,但延迟减少是一个标题功能。

HTTP / 2 - 新世界
所以希望您现在已经意识到HTTP / 2可以帮助减少延迟并显着提高页面性能。怎么样呢!

引入多路复用 - 更多卡车救援!
使用HTTP / 2,我们允许多路复用,这实际上意味着我们可以在每条道路上拥有多辆卡车:

我们可以立即看到瀑布图上的行为变化 - 将其与上面的变化相比较(不是规模的变化 - 这要快得多):

您可能获得的确切速度优势取决于许多其他因素,但通过消除线头阻塞(卡车必须等待)的问题,我们可以立即获得很多好处,几乎没有任何成本。

相同的旧卡车
使用HTTP / 2,我们的卡车及其内容基本保持不变,我们可以想象我们有一个新的交通管理系统。

实现HTTP / 2
好的 - 听起来不错,对吗?现在你应该想知道如何打开它!

最重要的是要理解,因为请求和响应与以往一样,所以您根本不需要更新站点上的代码。您需要更新服务器以使用HTTP / 2 - 然后它将为您执行新的“流量管理”。

如果这看起来很难(或者如果您已经有),则可以使用CDN来帮助您将HTTP / 2部署到您的用户。像CloudFlare或Fastly(我最喜欢的CDN - 它需要更高级的知识来设置但是非常灵活)之类的东西会放在你的网络服务器前面并向你的用户说HTTP / 2:

因为CDN将缓存您的静态资产,如图像,CSS文件,Javascript文件和字体,即使您的服务器仍在单个卡车世界中,您仍然可以获得HTTP / 2的好处。

HTTP / 2不是另一个迁移!
重要的是要意识到要获得HTTP / 2,您需要已经拥有HTTPS,因为所有主流浏览器在使用安全连接时都只会说HTTP / 2

但是,设置HTTP / 2不需要像HTTPS那样进行迁移。使用HTTPS,您的网址从http://example.com更改为https://example.com,您需要301重定向,新的Google Search Console帐户和一周的冥想撤退才能从压力中恢复过来。

使用HTTP / 2,您的网址不会更改,并且您不需要重定向或类似的任何内容。对于可以说HTTP / 2的浏览器和设备,他们会这样做(实际上是压路机中传达该部分的人 - 但这是一个完整的故事..!),其他设备将回归说话HTTP / 1.1这很好。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly