HTTP/2 和页面速度简介

已发表: 2020-01-03

介绍

1991 年，引入了请求-响应 HTTP (HTTP 0.9) 协议的第一个文档版本。 从那时起，网络急剧扩张，24 年后，最新版本的超文本传输​​协议 (HTTP/2) 于 2015 年发布，如果正确实施，将为网站性能带来许多可能的好处。

本文针对希望将 HTTP/2 作为其页面速度优化计划的一部分的 SEO。

HTTP/2 是一个非常丰富的话题，可以非常详细地讨论。 有大量讨论 HTTP/2 的在线信息，它为最终用户和开发人员带来了更广泛的好处，但在您发现自己沉浸在有关 HTTP/2 的大量信息中之前，请确保您获得了所需的信息。 首先要提出正确的问题：

  1. 这将如何直接影响搜索引擎优化和/或页面速度？
  2. 可以根据洞察力提出建议吗？
  3. 建议能否切实执行？

这些问题可以帮助您问“我所做的事情是否有效且有价值？” 并最终使您能够更好地评估 HTTP/2 如何帮助改进网站。

由于该主题的广泛性，在尝试了解对 SEO 的重要性时，不需要大量关于 HTTP/2 的知识。 HTTP/2 对 SEO 的核心好处是页面速度。

为了帮助您浏览丰富的在线信息，这里是对 HTTP/2 的介绍，描述了从 HTTP 1.1 到 Google 的 HTTP 兼容 Spdy 以及最终到 HTTP/2 的演变。

了解 Web 是如何演变的将有助于突出由于添加 HTTP/2 协议而对其进行的改进。

Google 如何评估 Page Speed？

要了解 Google 如何评估 Page Speed，只需查看Chrome 用户体验报告即可。 这些报告提供用户体验指标，说明用户如何体验网络上的热门目的地。 这是使用关键用户参与度指标（首次绘制、首次内容绘制、首次有意义绘制、交互时间）提供支持，并通过页面速度洞察、公共 Google 大查询项目、灯塔和网页测试等常用工具得到进一步支持。 利用这些指标和工具可以帮助提高页面速度。

HTTP/2 简介

HTTP 1.1

到 2015 年，HTTP 1.1 已经过时。 网页/网站建立/依赖于基本的 HTML、CSS 和 JavaScript 以及大量资源和不同框架的日子已经一去不复返了。 2015 年之前的时代基于这样一种想法，即每个 TCP 连接只能请求一个请求。 这导致 Web 客户端有多个资源排队等待下载，从而导致网络拥塞和页面加载时间变慢。

HTTP/2 旨在针对三个主要改进领域来缓解上述问题：

  • 简单
  • 高性能
  • 鲁棒性

HTTP/2 的 SEO 优势

Page Speed 可能是 SEO 考虑在他们自己或客户的网站上实施 HTTP/2 的主要原因。 页面速度/性能是一组指标，自 2010 年以来一直是桌面查询的排名因素。 由于移动设备使用率的上升，谷歌在 2018 年 7 月正式宣布Page Speed 将成为 Mobile 的排名因素。

HTTP/2 提供了 3 个主要功能，可在优化网站以提高页面速度时使用：

  1. 多路复用
  2. 服务器推送
  3. 流优先级

多路复用

多路复用允许 Web 客户端在一个 TCP 连接中包含多个请求，从而降低服务器负载并减少网络拥塞。

使用较旧的 HTTP 1/1.1 协议的现代 Web 客户端（Chrome、Firefox、Safari 和 Opera）对每个主机名的同时 TCP 连接数有默认限制。 因此，使用 HTTP 1/1.1 的 Web 客户端很容易遇到 TCP 拥塞问题。 使用现代 Web 客户端，可以使用多路复用解决此问题，这可以显着提高页面速度。

下面通过 HTTP/1.1 和 HTTP/2 的比较演示了多路复用的好处，显示了启用和未启用 HTTP/2 多路复用时的典型行为。

（ WebpageTest，HTTP/1.1，未演示多路复用）

（网页测试，HTTP/2，多路复用演示）

在上面的图像中，基于性能的瀑布用于演示网页的用户（请求资源）和服务器（响应哪些资源）之间的资源加载。 通常，页面资源包括 HTML、JavaScript、CSS 和图像。 基于性能的瀑布演示了在客户端中调用、下载和呈现特定资源的确切时间点，这对于发现、评估和分析站点上的页面速度问题至关重要。 如上图“HTTP/2”所示，所有资源都开始同时下载，而没有任何资源在不同的点开始加载。 由于 HTTP/2 利用多路复用，不再依赖于通过单个 TCP 连接仅发送 1 个请求，因此可以同时下载多个资源，如上所示。 相反，如图“HTTP/1.1”所示，资源不会同时下载，因为它们无法利用多路复用功能。 HTTP/1.1 下的现代浏览器平均能够同时拥有 6 个连接，但实现 HTTP/2 的好处是不需要每个请求都需要 TCP 握手，而无论有多少连接可以与 HTTP/1.1 并发运行初始每次都必须完成连接过程。 因此，它们开始在不同的点下载，从而导致用户的页面加载时间更长。

（ Upwork HTTP/1.1 vs HTTP/2 图）

Google 和 Bing 等搜索爬虫不会直接从 HTTP/2 实施中受益。 如上所述，这些优化的主要好处可能是页面速度。 因此，尽管 HTTP/2 实施可能不会直接影响搜索爬虫，但它会影响页面速度，这是自 2010 年以来谷歌桌面查询和自 2018 年 7 月以来移动查询的直接排名因素。因此，网站不交付至关重要给用户带来缓慢的体验，因为 Google 可能会通过影响排名来抑制性能，或者最近向用户标记您的网站可能运行缓慢。

服务器推送

服务器推送允许特定服务器或边缘网络在客户端未请求资源时将资源发送到 Web 客户端。 要了解服务器推送的功能，首先要了解网站遵循的请求-响应模式。 用户从网站请求页面，服务器以请求的内容/资源进行响应。

假设地，考虑一个站点，它的所有样式都定义在一个名为 styles.css 的外部样式表中。 当用户请求页面的 HTML 骨架时（假设在本例中为 index.html），服务器推送可以在开始向 index.html 发送响应后立即将 CSS“推送”给用户。

（ S糖化杂志，服务器推送）

在了解服务器推送如何帮助提高页面速度之前，了解浏览器如何处理不同资源（例如图像、CSS 和 JavaScript）以显示在浏览器中非常重要。 您会看到，浏览器会发送有关如何下载图像、CSS 和 JavaScript 资源的说明。 首次访问网站时，您通常会发出 GET 请求，即 .html 文件。 一旦收到这个 .html 文件，浏览器就会扫描它以理解它，然后可能会根据 HTML 文件中包含的内容发出额外的 GET 请求。

服务器推送如何帮助提高页面速度？

通过使用服务器推送，减少了浏览器（往返）所需的 GET 请求数量，并避免了导致页面加载时间增加的渲染延迟。 这可以极大地帮助改善 Web 客户端的呈现时间，从而帮助用户更快地显示网页，从而为他们提供更好的体验。

虽然服务器推送不会直接影响 Googlebot 如何抓取您的网站或其他抓取工具，但 SEO 的好处是通过改进以用户为中心的因素（例如 First Paint 和 First Meaningful Content）而获得的。

利用网页测试、Lighthouse、Page Speed Insights 和 Chrome 用户体验报告，您可以确定网站/页面与同行业竞争对手相比的表现。 下面是两张图片，展示了没有（图 1）和使用服务器推送（图 2）的实现。

（网页测试，无服务器推送）

(WebpageTest, HTTP/1.1, With Server Push)

使用服务器推送，可以对服务器进行配置，使其在被要求通过包含它们的 .html 文件发送时始终发送任何其他页面组件（例如 CSS 文件、JavaScript 和图像）。

在上面的瀑布图中，我们可以看到 push.php 使用了四个 CSS 文件。

如果没有服务器推送，浏览器需要接收 push.php 文件，解析 HTML，然后对每个附加的 CSS 文件发出特定请求。 只有在收到所有 CSS 文件后，它才能开始在渲染过程中使用它们。

启用服务器推送后，对 push.php 的请求会自动触发服务器发送四个 CSS 文件。 浏览器接收它们并且可以更早地在渲染过程中开始使用它们。 这意味着浏览器可以更快地开始呈现页面内容，从而获得更好的页面速度指标。

HTTP/2 优先级

HTTP/2 优先级将资源加载顺序的控制权交还给站点所有者。 如果做得好，优先级通过以优化的顺序提供页面资源，从而有利于用户体验和页面/站点速度，从而创造“快速”的用户体验。

如果我们看一下 HTTP/2 的前身 HTTP/1.1，Web 客户端控制了资源加载的顺序。 如上所述，这是因为每个 TCP 连接一次只能支持一个资源。 由浏览器通过决定选择哪些资源以及并行打开多少连接来安排请求。

在了解它是如何完成的之前，重要的是要了解我们为什么要对我们的资源使用优先级。

如果我们在页面顶部有一个图像，在页面底部有一个图像，从逻辑上讲，我们希望确保顶部的图像在底部的图像之前加载。 这个概念有助于展示 HTTP/2 优先级可以带来的重要性和影响。 HTTP/2 优先级允许我们指定哪些资源应该首先交付并在其他资源之前加载（无论是 JavaScript、CSS 还是图像），从而确保页面的最快加载时间。

虽然浏览器现在可以使用多路复用通过单个 TCP 连接同时请求多个资源，但它现在还可以为每个请求指定优先级信息，以帮助确定何时/如何交付资源。 如果服务器和浏览器都支持 HTTP/2 优先级，则浏览器应定义利用全带宽的优先级规则，而不会使资源相互竞争。 为了更好地理解优先级流程的运作方式，讨论对 HTTP/2 优先级很重要的三个参数很重要：

流：这是已建立连接中的双向字节流，可以携带一个或多个消息。

父流：这是资源所依赖的流

子流：这是父流的依赖流。 它们共享相同的父级，因此被称为子流

权重：这是一个分配在 1 到 256 之间的数字，用于标识在多个流共享连接时分配给流的带宽。 带宽是相对于所有其他活动流的权重分配的。

独占位：这是一个标志，指示应该在不与任何其他流共享带宽的情况下下载流。

Headers Frame：这是流所属帧的标识

二进制框架层：这是 HTTP 消息在客户端和服务器之间封装和传输的方式

下面的示例演示了上述示例：

（谷歌开发者 HTTP/2 流优先级）

为了执行 HTTP/2 优先级，您需要在位于新 HTTP/2 二进制帧层内的标头帧中添加优先级信息。 父流和对其他子流的依赖/非依赖将确定优先级/权重，从而确定资源到 Web 客户端的传递。

尽管现在许多平台都支持 HTTP/2 优先级，但许多 CDN 和托管服务提供商不支持 HTTP/2 优先级。 因此，如果您希望使用此优化技术，请务必使用支持 HTTP/2 优先级的 CDN/托管服务提供商。 下表描述了哪些 CDN/主机/服务器能够和不能支持 HTTP/2 优先级。

HTTP/2 优先级 - 通用服务器/主机/CDN 兼容性

此比较在2020年 2 月 1 日是正确的，但在您决定选择哪个之前，值得检查潜在服务提供商是否提高了兼容性。

批判性地查看特定浏览器也很重要，因为不幸的是，并非所有浏览器都支持 HTTP/2 优先级，并且由于 Web 客户端不同，优先级也不同。 下表描述了哪些 Web 客户端能够支持 HTTP/2 优先级。

HTTP/2 优先级 Web 客户端兼容性

HTTP/2 优先级可以显着提高用户对页面/站点速度的感知，并将对 Chrome 用户体验报告中积累的数据产生积极影响。 虽然这种优化对 Googlebot 等搜索爬虫没有影响，但Lighthouse和Page Speed Insights等工具将帮助您从用户的角度评估 HTTP/2 优先级对页面速度性能的影响。

通过使用支持 HTTP/2 的 CDN/主机正确配置服务器和客户端的流权重，您将能够显着提高客户端的页面速度指标。

HTTP/2 的先决条件是什么

在您能够利用 HTTP/2 的速度优势之前，请确保您能够利用它。 有几个先决条件需要考虑：

  1. 确保启用 HTTPS 很重要。
  2. 使用来自认证机构的 TLS 证书并激活和安装证书。
  3. 确保您的 Web 服务器软件（例如 Nginx、Apache 和 IIS）支持 HTTP/2。 可以在http://ayi.ma/browsershttp2找到完整的认证支持列表，其中将显示浏览器对 HTTP/2 的支持。 如果您正在寻找对 CDN/Hosting 的 HTTP/2 支持，请参阅http://ayi.ma/serverhosting 。

常见的陷阱/随着 HTTP/2 的引入必须改变的事情

由于早期 HTTP 1.0 和 HTTP 1.1 协议的限制，开发人员和 SEO 一直在努力寻找解决这些限制为页面速度性能和安全性带来的众多问题的方法。

最终，他们能够找到“黑客”来避开其中的一些限制，但其中许多方法导致开发人员付出了更多的工作。 您可能会问这些黑客有哪些？ 以下是您将在网站上看到的一些最常见的黑客攻击，这些黑客攻击可以通过正确实施 HTTP/2 来解决。

避免域分片

令人惊讶的是，尽管已经正确实现了 HTTP/2，但仍有许多网站使用这种 hack。 启用 HTTP/2 后，避免使用域分片非常重要。 域分片是一种跨不同主机名拆分资源的技术，从而允许同时提供更多资源。

多亏了更新的 HTTP/2 协议，不再需要域分片，事实上，导致的问题多于解决的问题。 如果为您的站点正确配置和启用了 HTTP/2，并且您还使用了域分片，那么您实际上抵消了 HTTP/2 的一些好处，因为浏览器将无法从跨多个主机名的多路复用和下载中受益。

此外，通过域分片，您实际上打破了流优先级，您的资源将无法加载以充分利用页面速度。

正确使用服务器推送

服务器推送有一些你应该注意的缺点。 服务器推送实际上可能被过度使用，您在选择何时使用它时应该有所选择。 您不一定要推送太多资源，因为这可能导致 Web 客户端不仅下载 HTML，而且下载它“推送”的所有内容。 这意味着页面实际上可能需要更长的时间来加载和呈现（增加 Google 关注的以用户为中心的指标，例如交互时间）。

服务器推送的第二个常见陷阱是弄清楚如何不推送 Web 客户端已经拥有的资源。 这可以通过多种方法来控制。 一种方法是选择不向返回用户推送资源，从而允许返回用户使用他们的缓存资产。 这是迄今为止最简单的实现。 这可以通过检查资源的缓存标头来简单地完成，确保标头不与服务器推送实现重叠。

HTTP/2 下的实际测试

理论知识对于为理解 HTTP/2 及其好处奠定基础总是很重要的。 一旦掌握并理解了这些概念，测试这些理论以衡量 HTTP/2 对 Page Speed 的影响很重要。

本 Page Speed 系列HTTP/2 在现实生活中的第 2 部分 - 使用网站测试和分析将讨论 HTTP/2 在页面速度和 SEO 价值方面的真正好处，所以不要错过！

HTTP/3 呢？

尽管 HTTP/3 显示出作为 HTTP/2 后继协议的明显潜力，但它不会也不应该标志着整个网络的 SEO 的 HTTP/2 结束。 与全球网络的每一个新的重大发展一样，它将经历一个正常的推出阶段，并且网站可能需要一段时间才能采用新协议，并且在它成为 SEO 行业的事实标准之前。 HTTP/2 实施仍然是一个有益而简单的收获，如果实施得当，它可以帮助提高您网站的性能。