什么是快速,免费JANK-,并有您需要为您的家庭?Wayfair的移动网站,这就是!
Android的屏幕截图,WFDC
这个漂亮的Android体验的背后,后面所有的方式进入Wayfair,我们提供给我们的客户,有一些新的技术升级和我们的节目和产品文化的演变,同时更加注重网络性能。

一段时间以来,我们使用RUM、合成和服务器端执行指标来判断我们的速度有多快或有多慢。我们最近开始采用过去几年出现的一组最佳实践,希望能观察到我们的数字发生的巨大变化。我们对复杂的配置和验证感到有点惊讶。这些技术已经有一段时间了,但很多代理,监视和测量工具,web服务器,并支持库要么不支持他们,支持他们,但在版本,只有最近被流行的Linux发行版包装,或必须仔细按摩到非默认状态为他们工作。我们的指南是关于web性能行业领导者Ilya Grigorik、Patrick Meenan和Steve Souders的博客文章、书籍和Velocity谈话。我们认为从一个像我们这样的大网站实际操作的方法可能对人们有用。我们将着重于如何确保这些东西是工作的,而不是在基本思想之外的配置机制上,因为不同网站和CDN平台的细节会因网站而异。

我们对网络性能计划的目标很简单:通过更快的感知性能更好的用户体验。作为代理对于有些模糊的目标,我们专注于体验就绪类型的测量,使用性能定时RUM数据事件,那是在像WebPageTest和Phantomas合成工具提供的各种指标。我们发现谷歌的铁路模型要的参考优异帧。我们已经与修修补补我们使用的指标,并TTFB(时间到第一个字节),第一油漆,上面的倍渲染时间,DOM就绪,“互动就绪,”文档完整,速度指数在我们的思想中有不同的观点。我们的路线图中有很多策略和技术,但我们决定首先关注早期的刷新,以及http/2或' h2 ',就像它在一些工具中出现的那样。我们的分析告诉我们,它们会有很大的影响。我们还觉得,如果我们不先做它们,或者至少不早做,我们就会在更小的优化上乱作一团,如果没有这两件事,它们可能不会以完全相同的方式工作,所以我们只能重新做它们。

在我们进入的细节,这里是对某种工作的内部理由一快的想法:我们真的不买网络性能业界简单的销售数学的电子商务网站。标准的说法是这样的:谁的游客体验到更快的页面访问量转化为更高的利率。移动较慢的人群更快,速度大家起来倒锤的经历缓慢的长尾巴,他们会以同样的速度为快的人转换。我认为,基于这样的说法有很多速度的工具已经售出。要是!我们不是买家。如果谁正在以高速率转换为理由某种组合的人只是往往有快速的电脑?不幸的是速度上的投资回报率不只是一个简单的微积分的问题,在这里你提高了速度曲线的最丰厚的部分,坐下来数钱。这是一个深刻的问题,一个值得深思的前要把太多的生命能量为表现的努力,特别是如果与其他产品的关注离婚。但是,这并不意味着没有真金白银的股权,它肯定不值得的住所,当你努力工作的,因为我们一直在做,给你的客户快速和优秀的体验。

让我们分解一下早期冲洗和h2的技术。

如果你不熟悉早期潮红,这是一个简单的想法就明白了:早在合理可能在建立HTML流的过程中,发送或刷新的第一部分,包括下载如CSS和Javascript关键资产的指令。有一些细微的选择,使。你可以将内联最关键的CSS,JS甚至图像?你可以得到一些有意义的事情了在14K以下,所以它适合在第一个TCP拥塞窗口?此外,通常有一些障碍。如果冲洗首批字节,其中包括HTTP代码200后/ OK,你遇到以前会引发超过200以外的代码中的错误,你会怎么做?在你的堆栈* *任何缓冲流?在我们的情况下,这意味着PHP(足够容易更改代码和配置文件),Nginx的(proxy_buffering指令),两个中间设备,我们已经在我们的数据中心,而我们的CDN做各种事情。所有的事情都是平等的,作为一般规则,缓冲是你的朋友,我们也许可以通过减少缓冲区的大小已经得到了这一切工作。然而,让事情简单的和切割的追逐精神,我们只是删除了家电和他们在做什么,转身在所有其他地方缓冲掉另有安排,仅观察到服务器的负载非常轻微的增加, went with that.

H2是个大话题。简而言之,它是一种基于谷歌的SPDY的新协议,旨在减少网络开销、往返行程和有效负载。在实际应用中,它仅适用于TLS/HTTPS,并且它允许您为多个下载重用单个连接。我们认为北美和欧洲的网站都支持它,我们看到的浏览器中有一半以上都支持它。对于另外的40% +%,您需要优雅地降级到http 1.1,但是有很好的方法可以做到这一点。要看它在谷歌Chrome的行动,添加这个扩展:http2-spdy

这可以在这里找到:https://chrome.google.com/webstore/detail/http2-and-spdy-indicator/mpbpobfflnpcgagjijhmgnchggcjblin。它显示h2以蓝色迅雷的形式在站点上工作,而h2和QUIC(一个不同日子的主题,似乎是google的——只是现在)则以红色的形式工作,而一个空白的灰色图标并不代表上面的任何一个。这里是wayfair.com网站:http2-SPDY-ON-wayfair

点击霹雳,你会看到下面的屏幕。它显示了所有浏览器已经去了H2会议。我已经打开了谷歌,Facebook和Twitter,这是填充这个标签对于很多人三个站点。那些穿插其中,你可以看到域wayfair.com,wayfair.co.uk,我们用我们的CDN服务静态资产的独立域。http2-wayfair域

资产这两个领域是一个HTTP / 1.1优雅降级黑客,在那里你解决两个不同的域到同一个IP地址。H2是聪明足以让一个连接到IP,但HTTP / 1.1将把它作为两个,所以浏览器的连接限制加倍。通过这种方式,你会得到域分片的好处HTTP / 1.1客户端和连接复用为H2的好处。Domain sharding is the best of the optimizations from the older set of best practices that we’re replacing, so even as we abandon some of the other techniques, we want to continue to take advantage of this one for the legacy-client population, which is still quite large.

你怎么知道早期的冲洗和H2是工作?打开Chrome的开发者工具,并期待在时间轴视图。让我们看一下早期冲洗第一。
wayfaircouk-timeline

注意紫色的CSS和黄色的Javascript下载是如何在蓝色html中间开始的。另外,看看我们是如何在两帧之后显示完整的页面之前,先画出顶部的nav。如果你在慢速连接的情况下输入主页,但你真的想去网站的其他地方,你可以使用它来导航。所以它对一些用户很有用,而且尽早启动所有的下载会加速所有的一切。这是一个早期冲洗和控制的网页视频:

请注意,您越早看到感兴趣的东西,整体时间2.6秒VS 3.5。这些都是合成的测试条件下:差异比在现实生活中,平均更具戏剧性,和原始数字也不同。但它完美地说明了你在寻找什么,以及什么人正在遭受的网站上现在的想法。

对于H2,早在Chrome开发者工具,转到网络选项卡,右键单击列标题,使“议定书”。一个新列将“状态”和而不是“HTTP / 1.1”“域”你要寻找的值“H2”之间出现。然后火起来webpagetest.org,运行测试,并期待在细节选项卡。瀑布视图显示大量的请求给我们的CDN网址之一。
WPT细节瀑

但是连接视图显示许多请求通过到静态资产url的连接进行多路复用。
WPT-细节连接2

网页测试是讲这个故事很好,但我们仍然看到比我们应该更多的连接,根据这一理论。因此,这一理论并不由Akamai或快速度和谷歌Chrome正确实施?或者是网页测试误导我们吗?我们启动Wireshark的,并找出。而且......一切都进行加密,所以我们无法看到它。我们去看看克里斯协议向导(戴着他的帽子精灵今天!),谁使用Wireshark比我的精明。
chris-the-protocol-wizard

一个快速,友好的中间人攻击我们自己的TLS基础设施,Wireshark显示了这一点(点击放大,注意HTTP2是魔术!)

wireshark-http2-arrows

然后,我们看到一个TCP流,以我们的资产的URL后面的IP地址。

one-tcp-stream

胜利!WPT正显示出更多的“关系”比实际上有TCP流,但如果它工作的权利,只能有一个流到该地址,这就是我们所看到的。

很显然,我们在这里失去了服务的机会事事休一个域,以进一步减少连接握手的数量和充分利用服务器推送的。该域名必须是www.wayfair.co.uk我们的英国网站,从例子。我们可能更进取关于在未来,但这需要更多的重构,我们很高兴现在,用浏览器能够从一个地方抢他们所有的资产,但不域分片或其他的技巧。

底线,我们从H2得到了在我们关心的指标15-20%的下降,从早期的冲洗,5%-10%。上面的例子是台式机,因为它更容易看到到底发生了什么比上与移动。但是,这些技术为移动工作太,当然在网络往返的减少是多大的好处的更多的手机比它是对速度快的网络桌面。早期冲洗的工作方式相同。像很多的电子商务网站,我们使用自适应交付超过响应式设计,虽然我们正在做的更后者比我们习惯了。我们提供一个更小的有效载荷手机。无论字节数就可以刷新,如果它的跨平台不变,将总的更大的比例,因此页面的有意义的部分较多,就比在桌面移动。

一对夫妇的配置说明。您的CDN的经验可能与我们不同。正如nginx的,把代理缓存关闭可能不是默认配置。我们在CDN终止TLS,所以他们对HTTP / 2的支持是对我们非常重要。如果你这样做你自己,一个非常先进的Ubuntu,截至记者发稿,是唯一的主流服务器操作系统,有一个默认的OpenSSL包先进够HTTP / 2的工作。我们在测试过程中设置了:Ubuntu的+ OpenSSL的+的nginx +与proxy_buffering和关闭H2和一切工作。如果您使用的是CDN,即使你加密你的起源端点,你实际上并没有在原点,使H2。只要边缘节点做的事情H2正确,从边缘长途交通原点可以使用HTTP / 1.1没有一个巨大的机会成本。这可能是对你有所帮助,如果您有现有的代理,测试脚本等,从某种程度上一个易于使用的基于文本的协议(HTTP / 1.1),或者说还不支持H2有好处。

对于度量和监视,有许多可用的工具和平台。您可以使用很棒的云资源,但在内部运行并不总是非常实用,而且它们提供的真实设备的仿真没有正确的芯片,无法让您了解正在发生的事情。我们在一定程度上使用它们,如果我们没有更准确的选择,我们就会更多地使用它们。为了得到更准确的解读,我们在办公室里设置了一个实验室,有一种非常“帕特·米南(Pat Meenan) 10年前的地下室”的感觉。下面是我们性能工程团队的Sam介绍我们安装的Intel NUCs、手机和平板电脑:

SAM-在最实验室

通过这种方式,我们得到的芯片就像在现实世界中,我们使用流量整形软件来控制的事实,我们在办公室里快速网络。

机会主义路线图一个字(不与它邪恶的双胞胎,范围蠕变相混淆)。当我们开始这项工作,我们的主要重点是早期潮红,现在我们的指标的改善已经证明,这的确是最重要的,到目前为止,我们已经尝试过的事情。但是,中途的项目,由一个纯粹的愉快的巧合,开始注意到SEO界,谷歌终于清理了301重定向处罚的问题,这已经挫败了自己的努力让每个人都去所有TLS所有的时间。我们本来想做到这一点对我们最大的网站了一段时间,但在失去了自然搜索流量的15%是阻止我们。这是令人难以置信的好运气,这个障碍是在它的时间取出,而我们是在一个协调一致的努力来改善堆中间,与所有相关回合的思考,编码,探测和测试,所有一字排开。当我们看到,我们决定真正推动对H2路线图项目,以让他们在假期前今年完成。奖励,如果该技术制定出来的,打算申请不只是我们的小网站,已经全部TLS,但我们最大的网站,wayfair.com。我们得到了所有的完成,我们非常满意的结果。

随着这些作品的地方,我们都吓坏我们的路线图前进。我们可以开始真正的编码HTTP / 2,这将是伟大的桌面浏览器,单页的应用程序的移动网络,以及两者之间的一切。其他的事情很快都刚出来,即将或计划:资源的提示,预渲染,DNS预取,HSTS和OCSP装订。越到后来所有,如果有一些有趣的份额,我们将分享。现在回想起来,我会形容网络性能优化之前,我们所做的所有这些变化,我们一直在做,作为一个艰苦的努力手绑背着我们。在这个现代化的堆栈,我们期待着能够使用所有最新的手段高明给我们的客户提供真正真棒经验。与此同时,在内部,我们已经落实到位以及社会化的KPI,我们对所有这些技术的开发,以及更好的工具训练比我们之前曾与建筑的网络性能稳健原则为我们的产品和工程文化的目标,和成的一切,我们建立。举一个例子(我们不是第一个做到这一点),我们提出基于八米南的JavaScript函数的书签,计算速度指数,这是他opensourced这里,我们所有的开发者的Chrome浏览器的工具栏现在。