Web网页设计开发者指南，为HTTP2.0做好准备

超文本传输协议（HTTP）是支配你的服务器和你的网站的访问者的浏览器之间的连接协议。对于自1999年以来的第一次，我们有这个协议的新版本，并承诺给大家远远快的 ​​网站。

在本文中，我们将看看HTTP / 2的基础知识，也适用于网页设计师和开发人员。我会解释一些新协议的关键特性，看浏览器和服务器的兼容性，以及细节你可能需要考虑，因为我们看到更多的采用HTTP / 2的事情。通过阅读这篇文章，你会得到什么考虑您的工作流程不断变化的短期和长期的概述。我还将包括丰富的资源，如果你想进一步深入到所提出的问题。我的目的是给你足够的背景，才能够做出正确的决定，你计划你的移动到HTTP / 2。

简史的HTTP 链接

HTTP是一个古老的协议，在1991年最初定义，与上次主要修订- HTTP / 1.1 -发表在1999年1999年网站被我们今天开发的网站非常不同。在http2解释说，丹尼尔·斯腾伯格指出，现在需要加载的平均网站主页的数据量为1.9 MB，以显示一个页面需要超过100个人的资源-从图像或字体的“资源”是什么到JavaScript或CSS文件。

HTTP / 1.1检索大量，显示现代的网站所需的资源时，不能很好地执行。正如我们将在本文中后面看到，许多性能最佳实践，我们所知道的Web开发人员来自于我们与HTTP / 1.1的局限性应对。

SPDY 链接

2009年，在谷歌两位工程师发布了关于他们一直在努力命名一个研究项目SPDY。该项目解决了一些问题，HTTP / 1.1。SPDY着手：

• 允许在单个TCP连接，被称为并发请求复用 ;
• 允许使对一个页面的显示重要资源可以由服务器首先发送的浏览器的优先次序的资产;
• 压缩和减少HTTP头;
• 实现服务器推送，这样一台服务器可以被要求在他们面前的重要推资源浏览器。

此外，SPDY需要浏览器和服务器之间的加密的（HTTPS）连接。

SPDY不会取代HTTP; 相反，它是一个对协议 ​​隧道，并修改现有的HTTP请求和响应被发送的方式。它要求从服务器和浏览器都支持连接到该服务器。随着NGINX并从谷歌，使在Apache中支持封装支持，但通过SPDY的合理数量。浏览器支持是相当不错的，也与所有主要的浏览器现代版本支持它。

HTTP / 2 链接

我们已经看到了SPDY享受一定的成功，获得采纳既服务器和浏览器。不过，你可能也已经发现，尽管Internet Explorer的11所支持，微软的浏览器边缘已经下降了。这里发生了什么？

对SPDY的支持已在边缘由于对HTTP / 2，HTTP协议的最新版本的Microsoft实现支持被丢弃。而其他浏览器目前仍维持SPDY的支持，Chrome将在2016年删除的支持，和其他浏览器可能会随之而来。在写这篇文章的时候，边缘，火狐，Chrome和Opera支持SPDY 和 HTTP / 2。Safari浏览器，包括iOS上，将在今年晚些时候加入该群，推出Safari浏览器9。

HTTP / 2建立在SPDY的成功，这是作为一个起点，新的协议。因此，大多数的SPDY的目标中的HTTP / 2满足。用于HTTPS连接的要求已被删除。这就是说，所有的浏览器厂商已经决定只实现HTTP / 2 TLS（HTTPS）连接。因此，尽管你可能会使用HTTP / 2明文服务器到服务器的通信，我们的服务HTTP / 2到浏览器的使用情况下，意味着你需要有你的网站上的https运行之前，你甚至可以考虑转移到HTTP / 2 。

在HTTP / 2.0规范于2015年2月完成; 在现代浏览器一年上，浏览器的支持非常出色。与SPDY，HTTP / 2需要在浏览器和服务器级别的支持，而且已经有很多Web服务器的实现。您可以继续在跟踪这些HTTP / 2维基。W3Techs也有从2015年7月后，详细的采用率。该协议的采用正在迅速发生，考虑到这是多么比较新的。

我们必须改变我们的网站？链接

HTTP / 2与HTTP / 1.1向后兼容，所以这将是可以完全忽略它，一切都会像以前一样继续工作。该协议更改是对用户完全透明。这篇文章的许多读者将使用HTTP以外的协议/ 1.1多年来一直。如果你有一个Gmail帐户，并使用Chrome浏览器访问它，你将拥有使用SPDY，然后HTTP / 2一直不知道任何事情。

但是，很多的东西，你所认为的是最佳做法可能不利于在HTTP / 2的性能。随着时间的推移，随着越来越多的服务器更新使用HTTP / 2多的人拥有支持HTTP / 2的浏览器，你的网站，在根据最佳实践以及优化的一次，也开始变得比新的协议优化网站速度较慢。

什么是我们需要改变拥抱HTTP / 2 连接

在本文的其余部分，我们将着眼于一些将在共同的最佳实践成为反模式为HTTP / 2被采用。正如我们看到的，过渡将是一个缓慢的许多网站。要移动到HTTP / 2，你的服务器软件需要进行更新，以支持该协议-这可能很容易或几乎不可能这取决于你如何被托管。

更改您的网站专门针对HTTP / 2之前，你还需要考虑你的访问者是否往往有支持它的浏览器。网站吸引了大量的使用非常先进的最新的浏览器将能够使该交换机比业主的日志显示在旧的浏览器大多数用户越早人业主。为了反映这一点，我也会给你如何在这个过渡时期的工作提出了一些建议。

转用TLS 链接

对于很多网站有关移动最难的事是HTTP / 2可能不是HTTP / 2可言，而是要求运行网站通过安全连接。如果你正在开发一个新的网站或更新旧的第一步应该是，以确保您启动或尽快移动到https越好。这是重要的不只是HTTP / 2，谷歌使用安全连接作为一个排名的信号，并且浏览器也开始标志非HTTPS网站为“不安全”。在未来，你会发现，一些强大的HTML5功能，例如地理位置，是没有一个安全的连接unavilable。

如果你有一个网站，是目前HTTP才把我的建议是，首先优先考虑转会到HTTPS，然后在你的HTTP / 2的战略决定。

打开多个图像文件进入精灵链接

在HTTP 1.1，检索一个大图像是浏览器不是让很多关于小的请求，更有效。这是因为，多个请求排队后面彼此。要解决这个问题，我们已被告知把我们的小图标放到一个精灵的文件。

所得精灵返回一个HTTP请求，从而防止正在排队的多个请求的问题。然而，即使访问者是一个页面，仅显示那些图标之一上，他们仍然需要下载一个更大的文件比需要的，以便看到一个图像。

用HTTP / 2的复用能力，这个排队的资源不再是一个问题。服务于小图像分别将在许多情况下，较好; 你只需要满足哪些是必需的访问者是页面。创建一个精灵仍然会在某些情况下被担保; HTTP请求的性能只是一个方面。在精灵某些图像结合在一起可能达到更好的压缩，因此，更小的下载大小整体，特别是如果所有这些图像在页面上的用于被装载。然而，这将不再是一个子画面总是最好的选择的情况下。

内联图像使用数据URI 链接

多个HTTP请求的HTTP / 1.1的问题，另一个解决办法是内联使用数据URI在CSS中的图像。以这种方式嵌入的图像将样式表大得多。如果您已经联合这与串联资产其他的优化技术，那么访问者将有可能下载所有这些代码，即使他们从来没有拜访过那里正在使用的图片的页面。

随着HTTP请求正在HTTP / 2非常便宜，这种“最佳实践”将阻碍而不是帮助的性能。

级联CSS和JAVASCRIPT 链接

正如我们在构建过程的最后一步，我们很多人将连接所有我们网站上使用的小CSS和JavaScript文件。我们常常希望保留这些在开发，使其更容易管理这些资源的分离 – 但我们知道，提供一个文件浏览器是性能比提供五个高效。再一次，我们正试图限制HTTP请求。

如果你这样做，那么谁在您的主页土地访问者可以下载所有为您的网站所需要的CSS和JavaScript的，即使他们从来没有使用大部分。作为一个开发者，你可以通过仔细选择和包括具体的文件在构建过程中的网站的每个区域解决这个问题，但可以是一个相当大量的工作。

与串联一个附加的问题是，一切将需要从高速缓存立刻清除。你不能放弃，同时给予代码库经常更换部件更短的时间，从来没有改变长期以来到期日的一些文件。这一切都如果连一行CSS的，在一个页面上使用，更改为到期。

我想你看这是怎么回事！HTTP请求是在HTTP / 2世界便宜。据上，他们将被用来将是更好的网页开发过程中组织您的资产。然后，您可以为最多只有访问者所需要的代码。下载了很多微小的样式表都不会有问题。您也可以组织根据事情如何变化频繁;与长寿的资产然后可以照顾更长的时间。

主机之间的分割资源：分片链接

与HTTP / 1.1，则仅限于打开的连接的数量。如果加载大量的资源是不可避免的，一种方法来解决这个限制是从多个域检索。这是被称为域分片。这样可以达到更好的加载时间，但可以引起问题本身，更何况这个准备为您的网站的发展开销。

HTTP / 2移除此需要分片域，因为你需要，你可以要求尽可能多的资源。事实上，这种技术可能会损害性能，因为它造成了额外的TCP连接，并从优先资源阻碍HTTP / 2。

如何准备HTTP / 2现在链接

如果你开始你希望有一定的寿命，但无法启动HTTP / 2或许是由于服务器支持的一个项目，这将是值得考虑的，你怎么能对HTTP / 2做准备。你可以添加一些东西到您的构建过程，现在，这将使开关更方便以后。

除了 ​​精灵和数据URI创建单个资产链接

如果您正在创建的精灵，添加到您处理这些个人资产的创造和优化为好，或更小的特定页面，精灵，如果你觉得表现会受这些是最好增强。这将使你更容易从大的精灵到达你的网站的临界点时，切换到小（或没有）精灵。

这同样适用于数据URI真。如果你目前在你的CSS使用这些，有自己的设计准备好当您切换从这种技术离开。

将资产通过网站部分链接

使用CSS和JavaScript串联，还有是因为这些文件都将得到无论如何挤在一起，易于开发，以优化诱惑。当你切换到HTTP / 2，你会通过谨慎管理资源，获得最佳的性能，因此只有通过一定的网页所需要的东西传递到该页面。因此，开始组织开发以这种方式现在将还清。现在，你可能还是串联，并在达到临界点的时候，你可以停止你的构建过程的一部分并单独服务的资源。

管理域拆分链接

对于HTTP / 1.1目前最好的做法是分片限制在两个主机名。有一种方式来获得HTTP / 2凝聚的连接，如果TLS证书有效期为主机和主机解析到同一个IP。由于浏览器的实现者需要HTTP / 2在运行通过HTTPS，这是必要的，以获得TLS证书运行在HTTP / 2。查看更多的幻灯片26从速度会议伊利亚Grigorik的slidedeck的。

更多的惊喜链接

最终，我们会得到的最佳做法HTTP / 2整体转换。为了获得最佳性能，此协议将手中大量的控制回到你身边，这意味着你需要为每个项目做出决定。我没有在本文中介绍如何利用HTTP / 2的新功能，如服务器推送的优势。这种技术可以让你决定哪些资源是一个优先事项，并指示服务器分发这些之前不太重要的事情。

何时转？链接

对于设计师和没有对他们部署到服务器的完全控制谁开发，决定可能要等到他们所使用的服务器更新。有托管公司ofering HTTP / 2已经 – 甚至是共享主机 – 因此部署到支持服务器的东西，你可以推荐给客户，如果你知道他们会受益。

一旦你的网站托管，支持HTTP / 2，是否继续优化HTTP / 1.1或优化HTTP / 2的决定将回落到一个服务器上受到了广大用户的支持的协议。请记住，HTTP / 2是向后兼容的-你不需要做任何具体的。你需要做的决定是时候优化它。

你需要根据您的分析数据来决定。如果有更多的访问者使用HTTP / 2支持的浏览器不是，那么我建议这对为这些用户优化合理的临界点。我们很多人将已经达到这一点。你应该从网站使用数据，比如我可以使用随从自己的分析和您可能观众知识收集的数据。例如，许多的HTTP / 2的好处将是最强烈地由HTTP / 2支持移动设备的用户的感觉。如果你有移动流量的比例很高，可能是一个迹象转移到HTTP / 2越快。但是，如果你从用户移动流量的高比例使用Opera Mini谁浏览那么这将是一个理由，推迟迁移到HTTP / 2，它目前虽然有一些大量的用户不具备支持世界的部分。

如果你现在正在建设一个全新的网站，我建议保持HTTP / 2的优化考虑整个的构建。如果在启动时，你觉得你需要为HTTP / 1.1，由于浏览器或服务器支持的让步，很多可以在构建过程来完成，让您只要你觉得切换到HTTP / 2版本时间是正确的。

您的HTTP / 2行动计划链接

1. 有一个安全的连接发射或转用TLS现在
   这应该是你优先考虑。
2. 准备在构建过程中的HTTP / 2。
   你现在建立的任何网站可能会从HTTP / 2在其生命周期不断优化中获益。使用上面的提示，以创建可支持两种协议进行优化构建过程。
3. 检查你的统计数据。
   通过与您的网站上比较浏览器使用上，我可以使用支持表，可以看到有多少百分比的游客将来自HTTP / 2优化中受益。
4. 检查您的主机。
   当你到达时，你会从受益的切换点，你需要确保你的服务器支持HTTP / 2。跟你的托管服务提供商或服务器管理员，以了解他们的迁移计划。
5. 推出HTTP / 2的优化。
   一旦你的服务器支持HTTP / 2，剩下的给你。停止使用旧的最佳做法，并切换到新的。这将意味着用户不支持HTTP浏览器/ 2会较慢体验，这就是为什么你的变化背后的驱动程序应该是当大部分将受益的引爆点。

当你移动到HTTP / 2，这将是有趣的基准速度增加，看看哪些技术已经对你的网站最大的不同。我期待着看到现实世界的情况下，信息是人们迁移的网站。该信息将帮助我们开发了全新一代的最佳实践。