Netflix 网站性能优化案例学习-阿里云开发者社区

开发者社区> 初商> 正文

Netflix 网站性能优化案例学习

简介: 本文主要给大家分享Netflix.com 桌面版是如何提升交互时间的,欢迎阅读。
+关注继续查看

image.png

原文作者:Addy Osmani

译者:UC 国际研发 Jothy


太长不看版:没有实现 Web 性能的万能武器。 简单的静态页面由于使用最小的 JavaScript 进行服务端渲染而快速展示。 在谨慎使用情况下,库可以为复杂页面提供巨大的价值。

本文主要给大家分享Netflix.com 桌面版是如何提升交互时间的,欢迎阅读。

Netflix 是最受欢迎的视频流服务之一。 自 2016 年在全球推出以来,该公司发现许多新用户不仅在移动端注册,而且还用了不太理想的网络连接。

通过改进 Netflix.com 注册过程的 JavaScript 和使用预获取(prefetch)技术,开发团队为移动和桌面用户提供了更好的用户体验以及多项改进。

加载和交互时间减少了 50%(对于 Netflix.com 上已注销的桌面主页)

由于从 React 和其他客户端库切换到原生 JavaScript,JavaScript 包大小减少了 200kB。 React 仍在服务器端使用。

预获取 HTML,CSS 和 JavaScript(React)将未来导航可交互时间缩短了 30%。

通过少传输 JS 来缩短交互时间

Netflix 开发者进行了性能优化的区域是注销后的主页,用户可以在该页上注册或登录该站点。

image.png

Netflix.com主页,适用于新用户和未登录的用户

该页面最初包含 300kB 的 JavaScript,其中一些是 React 和其他客户端代码(如 Lodash 等工具库),还有一些是保存 React 状态所需的上下文数据。

所有 Netflix 的网页都由 React 实现服务端渲染,生成 HTML,然后服务客户端应用,因此保持最新优化的主页结构就像保持一致的开发体验一样,都非常重要。

image.png

主页选项卡是最早使用 React 编写的组件示例

使用 Chrome 的 DevTools 和 Lighthouse 模拟在 3G 网络上加载的已退出(未登录)的主页,页面显示需要 7 秒才能加载出来,这对于一个简单的登录页面来说太长了,因此这部分的提升潜力得到了关注。 通过一些性能审计,Netflix 发现他们的客户端 JS 成本很高。

image.png

通过关闭浏览器中的 JavaScript 并观察网站的哪些元素仍然可以运行,开发团队可以确定已退出(未登录)主页是否真的需要 React 才能运行。

由于页面上的大多数元素都是基本 HTML,因此可以使用纯 JavaScript 替换 JavaScript 点击处理和类添加等其余元素。最初使用 React 构建的页面语言切换器被换成了不到 300 行的原生 JavaScript 代码重构。

移植到原生 JavaScript 的完整组件列表如下:

  • 基本互动(主页中间的标签)
  • 语言切换器
  • Cookie 横幅(适用于非美国访问者)
  • 用于分析的客户端日志
  • 性能测量和日志
  • 广告归因像素引导代码(出于安全原因而在 iFrame 中沙箱化)

image.png

尽管 React 的初始占用空间仅为 45kB,但删除了 React、客户端的几个库和相应的应用代码后,JavaScript 的总大小减少了超过 200kB,最终使 Netflix 已退出(未登录)主页的交互时间缩短了 50% 以上。

image.png

在实验室环境中,我们可以验证用户已能使用 Lighthouse(trace) 快速与 Netflix 主页进行交互。 桌面 TTI < 3.5s。

image.png

来自该领域的指标又是怎么样? 使用 Chrome 用户体验报告,我们可以看到首次输入延迟 - 从用户首次与网站互动到浏览器实际响应该互动的时间 - 对 97% 的桌面版 Netflix 用户来说很快。 这太棒了。

image.png

预取后续页面的 React

为了进一步提升用户浏览已退出(未登录)主页时的性能,Netflix 利用了用户在登录页上花费的时间来预获取用户可能进入的下一页的资源。

这是通过使用两种技术实现的 - 内置的 浏览器 API 和 XHR 预获取。

内置浏览器 API 包含页面头标记中的简单链接标记。 它向浏览器建议可以预取资源(例如 HTML,JS,CSS,图片),但它不能保证浏览器能实际获取到该资源,并且它缺乏其他浏览器的完全支持。

image.png

预取技术的比较

另一方面,XHR 预获取多年来一直是浏览器标准,当 Netflix 团队促使浏览器缓存资源时,其成功率达到 95%。 由于 XHR 预获取不能用于预获取 HTML 文档,因此 Netflix 使用它来预获取后续页面的 JavaScript 和 CSS。

注意:Netflix 的 HTTP 响应头配置阻止了使用 XHR 的 HTML 缓存(它们在第二页的 HTML 上没有缓存)。 Link Prefetch 正按预期工作,因为即使在某个点上没有缓存,它也可以在 HTML 上工作。

image.png

通过使用内置的浏览器 API 和 XHR 预取 HTML,CSS 和 JS,交互时间减少了 30%。 此实现不需要重写 JavaScript,也不会对已退出(未登录)主页的性能产生负面影响,因此它提供了一种有价值的工具,可以在极低风险的情况下提升页面性能。

image.png

实现预获取后,Netflix 开发人员通过分析页面上交互时间指标的减少,以及使用 Chrome 的开发者工具直接测量资源的缓存命中率来观察到了提升。

Netflix 已退出(未登录)主页 - 优化摘要

通过在 Netflix 已退出(未登录)主页上预获取资源以及优化客户端代码,Netflix 极大的提升了其注册过程中的交互时间指标。通过使用内置浏览器 API 和 XHR 预获取技术来预获取未来页面,Netflix 将交互时间缩短了 30%。这是对于二次加载而言,其中包含单页面应用注册流程的引导代码。

Netflix 团队进行的代码优化表明,虽然 React 是一个有用的库,但它可能无法为每个问题提供充分的解决方案。通过从第一个登录页面上的客户端代码中删除用于注册的 React 代码,交互时间的改进率提高了 50% 以上。减少客户端的交互时间也能使用户以更高的速率点击注册按钮,这表明代码优化可以带来更好的用户体验。

虽然 Netflix 没有在主页上使用 React,但他们为后续页面预获取了它。这使他们能够在单页面应用注册过程的其余部分中利用客户端 React。

有关这些优化的更多详细信息,请参阅 Tony Edwards 的 A+ 演讲:

https://www.youtube.com/watch?time_continue=1&v=V8oTJ8OZ5S0

结论

Netflix 通过密切关注 JavaScript 的成本,发现了改善交互时间的机会。 要了解你的网站是否有改进机会,请问问你的性能工具。

Netflix 做出的权衡是使用 React 对登录页面进行服务端渲染,同时也在其上预获取 React/其余注册流程的代码。 这样不仅可以优化首次加载性能,还可以优化其余注册流的加载时间,因为它是一个单页面应用,因此需要下载更大的 JS 包。

考虑是否利用原生 JavaScript 是网站中流量的选项。 如果你必须需要使用库,那么请尝试仅下载用户所需的代码。 预获取等技术有助于缩短未来页面导航的页面加载时间。

额外的提醒

Netflix 考虑使用 Preact,但对于交互性低的简单页面流而言,使用原生 JavaScript 对于它们的堆栈来说是一个更简单的选择。

Netflix 尝试使用 Service Workers 进行静态资源缓存。 当时,Safari 不支持该API(现在支持了),但他们正在再次探索。 Netflix 注册流程相比会员体验,需要对更多旧版浏览器支持。许多用户都会在较旧的浏览器上注册,但会在其原生移动应用或电视设备上观看 Netflix。

Netflix 登录页面非常动态化。 这是他们注册流程中最严格的 A/B 测试页面,它使用机器学习模型,根据位置,设备类型和许多其他因素来自定义消息和图像。 在近 200 个国家的支持下,每种衍生产品都存在不同的本地化,法律和价值信息传递挑战。 有关 A/B 测试的更多信息,请参阅 Ryan Burgess 的「 Testing Into A Better User Experience」。

感谢 Netflix UI 工程师,Tony Edwards,Ryan Burgess,Brian Holt,Jem Young,Kristofer Baxter(Google),Nicole Sullivan(Chrome)和 Houssein Djirdeh(Chrome)的评论和贡献。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ASP.NET性能优化之文件同步
Microsoft同步工具SyncToy http://www.cnblogs.com/daizhj/archive/2009/11/03/1595395.html http://www.cnblogs.
619 0
大型网站压力测试及优化方案
性能测试在大型网站系统的设计和开发中非常重要,通常会和容量预估等工作结合在一起,穿插在系统开发的不同方案。性能测试可以帮助我们及时发现系统的性能短板,评估系统的能力,在这个基础在上再进行针对性的性能优化。
7584 0
学习c#.net
为了和大众接轨,不至于死在vb.net的孤岛上,今天开始学习c#.net了。有点郁闷,也有点兴奋!
380 0
asp.net学习网站收集
http://www.dotneteye.net/index.aspx
497 0
Netflix开源面向稀疏数据优化的轻量级神经网络库Vectorflow
在Netflix公司,我们的机器学习科学家在多个不同的领域处理着各种各样的问题:从根据你的爱好来定制电视和推荐电影,到优化编码算法。我们有一小部分问题涉及到处理极其稀疏的数据;手头问题的总维度数很容易就能达到数千万个特征,即使每次要看的可能只是少数的非零项。
4242 0
+关注
770
文章
584
问答
来源圈子
更多
由UC国际研发团队负责运营,我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章,不限于原创与翻译.
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载