下载我们的免费电子书43 A / B检测案例研究,从世界领先的公司寻找考试创意和灵感。 现在下载

优化博客

构建您的实验计划的提示和技巧



在这方面 由客户发布 凯尔匆忙, 在Casper和前副首席技术官的工程副总裁与美国竞选活动中的希拉里,我们可以先看他的团队如何大大改善Casper.com的网站性能。 使用最佳的新推荐 通过优化的网络鼓励客户更灵活的实施方案,Rush和他的团队通过加快负载时间来呈指数级提高客户体验。 本文的早期版本已发布 在媒体上。


我们最近部署了CASPER.COM从我们自己的服务器而不是他们的服务器加载的CASPER.COM。此更改脱掉了1.7秒的开始渲染时间: 

在桌面Chrome W / 3G网络连接上采取的测量

我们使用优化的客户端JavaScript来对Casper.com进行A / B测试。下载并执行JavaScript文件后,它会将文档更改为我们网站访问者的50%,以衡量它们对变更的反应。确保尽可能小 闪烁的未售出含量 (FOUC)我们以阻止方式在其他任何内容之前加载。

正如预期的那样,以这种方式加载JavaScript片段对我们网站的网络性能产生负面影响。这是一个权衡,我们很长一段时间挣扎。我们应该遵循Web性能最佳实践并异步加载优化的JavaScript,或者跟随传统上被认为是实验的最佳实践,并将其阻塞为第一资产?这两种方法都有他们的利弊。

在我们的网络性能审计对话之一中,我们决定尝试解决性能问题的技巧。我们的第一个想法是优化的<head>和/或将Async属性放在上面<script>标记使其不会阻止呈现并异步加载。我们的产品管理团队指出所产生的 闪烁的未售出含量 (FOUC)效应将是一个糟糕的客户体验。我们的数据和分析团队指出,如果在此过程中稍后加载JavaScript,我们可能会遭受数据完整性的损失。

我们可以想到的下一个最好的事情是自主主办的优化片段。优化实际上有一个 知识库文章 这鼓励这一点。通常,软件公司可以优化为您提供JavaScript文件的URL(其主机)。问题是,这导致新的DNS查找和带有供应商服务器的新型HTTP连接和SSL握手。以这种方式加载它的另一种成本是您错过了与资产服务的机会 http2多路复用,为浏览器和服务器进行通信的更有效的方法。正如您在下面的屏幕截图中看到的,从我们的性能测试之一,这导致DNS查找的延迟39ms,延迟的54ms来建立服务器连接,以及SSL握手的延迟135ms。此外,在等待第一个字节上有175毫秒的延迟,如果我们可以利用HTTP2多路复用,则会消除这将被淘汰。

自主主机文件的最后一个好处是我们将更多地控制边缘(CDN)和客户端(浏览器)缓存。我们无法控制优化的边缘缓存,但我们能够控制客户端缓存。有一个设置允许您配置缓存控制值,为我们设置为2分钟。当文件托管通过优化时,这是我们的理想设置。

为了测试我们的理论,即自托管更好,我们手动复制了优化的JavaScript文件的内容,在我们的服务器上保存了一个版本,并替换了暂存中的参考点,指向我们的自托管版本的文件。结果没有壮观。他们非常强大的是,我们的数据分析师之一表示,刮掉200ms的开始渲染时间并不值得努力。我们同意了!

我们继续推动,因为我们相信我们的舞台环境不是一个测试这种性能变化的好地方。我们的暂存环境缺少很多第三方JavaScript,只能在生产中运行。因此,我们设计了一种生产测试,其中数据分析师不会在我们部署静态,自托管版本的优化时进行3天的更改。

跌落是在生产中的自托管版本的自托管版本(在Chrome桌面上测量,电缆网络连接时 - 在我们在3G网络速度上测量性能,这就是为什么这就是为什么在开始时的图形本文的效果更大,但现在3G是我们标准的测量标准网络速度)

在上图中,您可以从我们自主托管的时间段的时间内看到开始渲染时间的下降,这是优化赛段的静态版本。通过自托管,开始渲染时间基本上丢弃,因为我们消除了DNS查找,优化服务器连接,SSL握手,第一个字节的时间,并启用了H2多路复用。

我们并没有完全准备好永久地使这种变化。优化的方式是,如果对实验进行了更改,则在优化服务器上​​更新JavaScript代码段。该更改可能是启动/暂停实验,改变实验等。所做的任何更改都会生成新版本的JavaScript文件。由于我们只是加载了我们手动复制的生产中的JavaScript文件的静态副本,因此我们无法将其保持在那里,因为我们永远无法开始/暂停实验。每次改变时,我们的软件工程师都会为我们的软件工程师手动复制新文件也是过多的。因此,现在我们看到了这种方法的好处,我们必须弄清楚如何从我们自己的服务器动态加载最新版本的优化片段。

为此,我们创建了一次每60秒运行的AWS Lambda。运行时,它会向JavaScript文件发送对OptimIzeLy.com的请求。它创建文件的哈希值并检查S3以查看哈希是否更改(我们将哈希存储在S3上的文件中的最后一次执行中)。如果哈希更改,则将新的JavaScript文件保存到Filename中的哈希部分的S3(示例:Snippet-C36D504BC3C26479F1181E6119617A64.js)。接下来,Lambda将哈希发送到速度边缘服务器上的字典。这是魔法进入的地方。我们配置了我们的边缘服务器,组合 边缘侧包括 (ESI)和 边缘词典 要动态地将最新的优化JavaScript文件名插入到边缘服务器的每个页面的HTML中。这允许我们在边缘更新到优化文件,而不是每次文件更改时都必须重新部署网站。

以下是来自WebPageTest的屏幕截图测量Casper托管的新优化文件的性能:

这里是在自托管之前收集的数据的并侧比较,并且通过WebPageSt之后:

理想情况下,我们会介绍第95百分位数 真实的用户监控 (rum)这些值的数据,但我们还没有为casper.com完全实现这一点。与任何性能测量一样,我们观察到数据的方差,因此我们检查了不同百分位数的数字以了解分发。

这是一个瀑布,在Casper.com和优化文件上显示HTTP2多路复用。请注意,前5个资产的内容下载如何在所有这些资源中从它们的所有时间开始。

最后,如前所述,自主主机使我们更加控制缓存。我们配置了我们的边缘服务器,以将文件保存在边缘和浏览器缓存中整整一年。我们能够这样做,因为文件名对内容唯一(我们将文件的哈希部分添加到文件名),并在更改时替换对文件名的引用。这样,如果我们没有对优化片段进行任何更改,则重复访问者的浏览器甚至不会向Casper.com提出文件。它将直接从用户文件系统上的缓存中提取文件。超级快!

在这里,您可以看到从浏览器缓存服务的文件的好处:

这种方法的缺点是当我们经常修改优化片段时,网站访问者不会经历最佳缓存。随着我们的业务增长,我们的数据分析师可能会运行更多的A / B测试,需要频繁更改文件。这可能导致网站访问者需要在访问Casper.com期间下载多个文件版本。每次在自定义DataDog仪表板中更改JavaScript文件时,我们都会跟踪:

在此图表中,我们可以看到周四有3小时的时间,片段改变了大约25次的23日。它不太可能在这个改变频率下下载多个版本的片段,因为我们的平均访问持续时间不是很长。总的来说,我们认为自主托管有更多的利益而不是缺点。

该项目大约是我们的软件工程师,产品经理,站点可靠性工程师和数据分析师的一个月内工作。这是一个在Casper Tech团队中识别一个问题,找到优雅的解决方案,为生产提供了优雅的解决方案,为客户提供了巨大影响。


如果你’d想了解更多关于自主托管优化代码段,为一些最受欢迎的CDN看看这些指南:

如果你’d想了解有关现场性能的优化最佳实践的更多信息,请务必查看我们的 知识库 确保您正在利用我们的建议。

优化X.