Using HTTP/2 Responsibly: Adapting for Users

编辑器的一个注释:本文是探索新HTTP / 2协议的两部分系列的一部分,并负责任使用它。务必阅读第二部分,考虑我们如何使用http / 2

With HTTP/2 ticking up steadily in use, it’s clear that there’s something to this long overdue update to the protocol. Implementing it, however, not only changes how websites are delivered to the user, it demands that we think critically about how we migrate existing sites to the protocol. More importantly, it demands that we consider our users’ capabilities.

文章继续下面

Whether you’ve already migrated your site to HTTP/2 or you’re bracing yourself to take the plunge, there are challenges when it comes to tuning your site’s front end architecture to be the most performant it can possibly be for all your users. Perhaps you’ve read about让您的网站准备好http / 2需要什么。Perhaps you haven’t. If the latter describes you best, it’s not worth getting into the weeds here. The gist of it is that HTTP/2 optimization patterns are the opposite of those for HTTP/1. Your site will perform better on HTTP/2 if you avoid practices thatcombinefiles, because caching for those resources will be more efficient when they change.

为了应对老化HTTP / 1协议的局限性,我们愿意牺牲一定程度的缓存效率,以便加快网站的初始装载。因此,具有脚本和CSS级联,图像精灵和内联资产等技巧。然而,在一个蔓延到HTTP / 2的世界中,我们被告知要放弃这些实践 - 以及最重要的是。

The reality of the situation can be more complex than we initially thought. While HTTP/2 support on both the server and client side is steadily increasing, browsers that can’t understand the new protocol will linger on for some time yet—and that doesn’t just mean Internet Explorer. It also includes browsers like Safari on older versions of OS X, UC Browser, older versions of Android Browser, and Opera Mini.

Sometimes we hurt the ones we love#section2.

HTTP/2 support is not a one-sided affair. In order for it to work, the server must not only implement it, but the browser must also be capable of understanding the new protocol. When a browser that understands HTTP/2 begins requesting content from an HTTP/2 server, the exchange will predictably occur in, well, HTTP/2. In the case of an older browser like Internet Explorer on Windows 7 (or even a current browser such as Opera Mini), the conversation proceeds in HTTP/1.潜在的机制that drives this behavior is nuanced, but it can be considered progressive enhancement in that we’re not breaking the experience for users on platforms that can’t use HTTP/2. They’re merely getting a less optimal experience.

Whether you’ve made the jump and optimized your site for HTTP/2 already, considering the jump from HTTP/1, or somewhere in between, it can pay (sometimes quite literally) to understand how these optimizations can impact your site’s users. Depending on your audience’s能力, a site optimized for HTTP/2 may well be detrimental for a segment of your audience.

HTTP/2 enjoys broad support among users in the global sense. According to the popular feature support index sitecaniuse.com.,http / 2目前享有支持大约78%所有目前正在使用的浏览器中。一些边缘浏览器,如IE 11下窗10下方,并且在EL Capitan下面的OS X上的Safari混淆了图片。您可以依靠全球至少72%的用户来支持HTTP / 2(至少在本写作时)。

当然,这只是大局,这不是什么指标your特定观众看起来像。您需要考虑访问者的来源以及他们倾向于使用的浏览器。您还需要考虑您的用户居住在世界的位置。

在我从Caniuse.com编写的基本统计中,我发现发展中国家的用户倾向于使用浏览器don’t比发达国家更频繁地支持HTTP / 2。跟随统计数据Akamai的第三季度的互联网现状报告,发展中国家一般质量较低y of internet infrastructure than developed nations. I won’t get into the data here (though you can have a look for yourself),但如果你好奇,您可以查看我在主题上完成的这次简短的写作to get some context.

The confluence of these two truths creates a challenge in how we optimize sites for our visitors.

  • 即使您设置了使用HTTP / 2的Web服务器,也有一段您的受众不会收到优势,因为它们与服务器的连接将在HTTP / 1上。
  • 更糟糕的是,如果您在HTTP / 2上优化了您的网站,您可能会提供您的网站slowerfor users with older browsers.

“噢,地狱!他们应该升级他们的浏览器!“虽然我们中的一些人在解决一个具有挑战性的问题的情况下一次或另一个挫败挫败感,但这是一个可怕的情绪。它假定用户有的话能力to upgrade their browser, but they’re just too damn lazy to get around to it.

The more likely problem is that users in developing nations are reliant on antiquated infrastructure or bound to a restricted data plan that makes this impractical. We need to be empathetic to this reality. It behooves you to know how many of your users are running HTTP2-capable browsers, and how many aren’t. All you need to determine this is a Google Analytics account and caniuse.

caniuse is able to comb through your site’s visitor data, then give you the status of support for a particular browser feature in the context of your site’s visitors, rather than for a particular country. Perfect for determining browser support for HTTP/2 in your audience! By opening the settings panel in the site and then clicking the “Import” button under the “From Google Analytics” header, you’ll be prompted to allow caniuse to access your analytics.

这是一个真正的世界场景,我已经使用这个工具来确定受众的http / 2支持:我的朋友在每月搭配关于吉他和吉他配件的合理热门博客,每月收到大约30,000页的吉他配件。当我将网站的Google Analytics数据融入Caniuse时,它显示该网站在最近30天的观众大约有91%的HTTP / 2支持(图。1)。


两个方程的视觉比较:所有网站数据(78.47%+ 12.27%= 90.74%)和全球(70.13%+ 5.95%= 76.08%)
Fig. 1: caniuse.com’s support threshold for HTTP/2 for a specific site, labeled “All Web Site Data.”

91%seems就像HTTP / 2的高水平支持 - 它是!尽管如此,您必须考虑从HTTP / 1获取资源的浏览器的PageViews的原始数量,因为它们不支持HTTP / 2。

一些基本数学表明,此段每月代表2,700页。此外,引用的91%的支持包括浏览器部分地点支持http / 2。在这个具体的例子中,我们只能绝对确定这个网站的约78%的访客支持HTTP / 2。这意味着可以在HTTP / 1上提供2,700到6,600页面视图的任何位置。实际数字是在介于之间的某个地方,即使这是少数用户,它仍然是一个重要的PageViews,它可能太大,让您只需忽略。

调整您的用户的限制#第3部分

到目前为止,我们知道三件事:

  1. HTTP / 2服务器在响应HTTP / 2 - 不兼容的浏览器时将降级为HTTP / 1。
  2. 通常是HTTP / 2特定的前端架构优化有害的对HTTP / 2-T-T-T TROMISE的浏览器上的用户。
  3. 发展中国家的用户往往对HTTP / 2等较新浏览器功能的支持较低,往往具有较慢的互联网连接速度。

The only thing wedon’t知道此时是如何微调我们的内容交付,以便对每个人都有益。在我们真正考虑修改对用户的内容的修改之前,我们应该先考虑一些事情。

Is HTTP/2 right for you?#第4部分

Assuming you haven’t already migrated to HTTP/2, there are a few things to take into account before you invest time and resources into making the switch:

  1. 虽然HTTP / 2规范未明确要求SSL,但它是浏览器需要它的事实上标准。如果在服务器上实现HTTP / 2并无法安装有效的SSL证书,则连接将始终降级为HTTP / 1。对于预算意识,证书范围从合理的价格100%免费通过让我们加密。即使使用免费证书,实现SSL仍然代表您组织的成本。以QA测试的形式需要时间和精力,以确保现有网站在迁移中没有被打破。
  2. 如果您的网站的占用空间非常小,HTTP请求很少,并且升级到SSL并不实用,您可能已经通过HTTP / 1提供了良好的服务。如果您已经实现了HTTP / 1特定的优化,则尤其如此,并且将在HTTP / 2优化中降低其成本显着的开发人员时间。This doesn’t mean that you shouldn’t upgrade to SSL, though
  3. 如果您的大多数网站的受众使用只能支持HTTP / 1的浏览器,您的网站对于它而优化,您可能已经在HTTP / 1提供了很好的服务。但再次:无论如何考虑SSL。

Let me be totally clear: HTTP/2 is an excellent performance enhancement for large, complex sites with lots of assets that would otherwise perform poorly on HTTP/1. We just need to talk about how you might be able to mitigate some of the pain for users with less capable browsers, and that begins with identifying those users when they visit.

检查HTTP / 2并适应用户需求#第5部分

您如何根据给定用户的HTTP协议版本提供内容取决于您在主机上提供的技术。您通常会使用像PHP等后端语言修改您发送给客户端的标记。无论您使用的技术如何,您都有两个条件:

  1. 如果用户在http / 2上:You’ll serve more and smaller assets. You’ll avoid stuff like image sprites, inlined CSS and scripts, and concatenated style sheets and scripts.
  2. 如果用户在http / 1上:你会做对面的。您将捆绑文件,使用映像精灵和内联的小资产。

您检测HTTP / 2支持的特定机制将取决于您使用的后端语言。在PHP中,我们可以通过检查来确定给定连接的协议版本$_SERVER["SERVER_PROTOCOL"]environment variable. Below is a one-liner that stores the HTTP/2 connection status in a variable named$ ISHTTP2.:

$ ISHTTP2 = Stristr($ _服务器[“server_protocol”],“http / 2”)?真假;

Using the斯特里斯特功能,函数$_SERVER["SERVER_PROTOCOL"]检查环境变量是否存在子字符串“http / 2”。如果存在子字符串,$ ISHTTP2.is set totrue。如果没有,它设置为错误的。从这里来,由您将此逻辑应用于您的网站,但让我们看看你的几件事可以do. For instance, you could add a class ofhttp1.到了标签:

使用此类,您可以使CSS适应HTTP / 1用户的图像精灵,以及HTTP / 2用户的单个图像。或者可以使用使用内联资产的单独的CSS文件服务data URI scheme。Speaking of serving different files, you could change your markup based on the user’s protocol version to change how you serve assets to the client:

<??php if($ ishttp2 === true){