Wix如何通过演变基础架构来改进网站性能

由于利用行业标准，云提供商和CDN功能，结合了我们网站运行时的主要重写，WIX站点的百分比达到了所有核心网站（CWV）度量超过年增长的年份，达到了一年多的年份，这来自CRUX和HTTPARCHIVE的数据。

Wix采用了以绩效为导向的文化，进一步改进将继续向用户推出。当我们专注于性能KPI时，我们希望看到通过CWV阈值的网站数量增长。

性能世界是美妙的复杂性，具有许多变量和复杂性。研究表明，现场速度对企业的转换率和收入有直接影响。近年来，该行业更加重视性能可见性并更快地制作网络。从2021年5月开始，页面体验信号将包含在Google搜索排名中。

Wix的独特挑战是支持数百万个网站的支持，其中一些是多年前建立的，并且从那以后尚未更新。我们有各种工具和文章，以协助我们的用户在他们可以做些什么来分析和改善其网站的表现。

Wix是一个管理的环境，而不是一切都在用户手中。共享普通基础设施对所有这些网站带来了许多挑战，而且还为董事会的主要增强功能开启了机会，即利用规模经济。

在此帖子中，我将专注于在服务初始HTML周围完成的增强功能，该初始HTML启动了页面加载过程。

具有绩效的核心困难之一是找到一个常见的术语，以讨论用户体验的不同方面，同时考虑技术和感知性能。在组织中使用明确的常用语言使我们能够轻松地讨论和分类不同的技术零件和权衡，阐明了我们的绩效报告，并对我们应该重新改进的绩效报告并获得了卓越的帮助。

我们调整了我们的所有监测和内部讨论，包括工业标准度量，如Web Vitals，包括：

它很容易创建一个立即加载的网站，只要您使用HTML非常简单，可以通过CDN服务。

但是，现实是，网站正在越来越复杂，更复杂，更像是应用程序而不是文档，并支持博客，电子商务解决方案，自定义代码等功能等功能。

Wix提供了很多各种模板，使用户能够轻松构建具有许多业务功能的网站。这些附加功能通常具有一些性能成本。

每次加载网页时，它都始终以初始请求启动URL以检索HTML文档。此HTML响应触发所有其他客户端请求和浏览器逻辑运行和呈现您的网站。这是页面加载最重要的部分，因为直到响应开始到达（称为TTFB - 第一个字节的时间）直到没有任何反应。

操作大规模系统时，您始终需要考虑权衡，例如性能，可靠性和成本。最多几年前，Wix使用了客户端渲染（CSR），其中通过客户端（即在浏览器中的JavaScript）生成实际的HTML内容，允许我们支持大规模的站点而不具有巨大的后端运营成本。

CSR使我们能够使用常见的HTML文档，该文档基本上是空的。所有它确实触发了所需的代码和数据，然后用于在客户端设备上生成完整的HTML。

几年前，我们过渡到服务器端渲染（SSR），因为它有利于SEO和性能，提高初始页面可见时间，并确保没有完全支持运行JavaScript的搜索引擎的更好索引。

这种方法改善了可见性体验，特别是在较慢的装置/连接上，并打开门以进行进一步的性能优化。但是，它也意味着对于每个网页请求，飞行中生成了唯一的HTML响应，这远远不到最佳，特别是对于具有大量视图的网站。

它经常改变。每次用户编辑其网站，或在网站数据中进行更改，例如网站商店库存。

它有某些数据和饼干是游客特定的，这意味着访问同一站点的两个人会看到一些不同的HTML。例如，为了支持产品的功能，例如记住访问购物车中的商品，或者聊天访问者之前的聊天更早地开始使用。

并非所有页面都很可缓存。例如，具有自定义用户代码的页面，它显示当前时间作为文档的一部分，不符合缓存。

最初，我们采取了相对安全的方法来缓存HTML，没有访客数据，然后仅针对每个缓存命中的每个访问者的HTML响应的特定部分。

我们通过部署内部解决方案来完成此目的：使用Varnish HTTP缓存进行代理和缓存，用于无效消息的Kafka，以及代理这些HTML响应的Scala / Netty的服务，但突变了HTML并添加了特定于访问者特定的数据Cookie到缓存的响应。

此解决方案使我们能够在更多地理位置和多个云提供商区域部署这些苗条组件，这些组件和多个云提供商区域都在全球范围内传播。 2019年，我们推出了超过15个新地区，并逐步启用了90％的页面浏览量，这些浏览量有资格获得缓存。从其他位置提供服务器站点通过将内容较近网站＆＃39;访客，减少了客户端和服务器响应的服务器之间的网络延迟。

我们还通过使用相同的解决方案开始缓存某些只读API响应，并使缓存失效到站点内容的任何更改。例如，当发布/修改后，站点上的博客文章列表缓存并无效。

实现高速缓存改进的性能，大多数在TTFB和FCP阶段，并通过从更靠近最终用户的位置服务的内容来提高我们的可靠性。

但是，需要修改每个响应的HTML引入了不必要的复杂性，即如果删除，则提出了进一步的性能改进的机会。

HTML请求直接从浏览器缓存服务，保存了很多带宽并减少了重复视图的加载时间

下一步是实际上完全从HTML中删除此访问者特定的数据，并在HTML到达后，从客户端调用的单独端点检索它。

我们仔细迁移了此数据和cookie到一个新的端点，该终端将在每个页面上调用，但返回Slim JSON，仅需要用于保湿过程，以实现完整页面交互性。

这使我们能够启用HTML的浏览器缓存，这意味着浏览器现在可以保存重复访问的HTML响应，并且仅调用服务器以验证内容Hasn＆＃39; t更改。这是使用HTTP ETAG完成的，这基本上是分配给特定版本的HTML资源的标识符。如果内容仍然是相同的，则我们的服务器向客户端发送304号修改响应，而无需身体。

此外，此更改意味着我们的HTML不再特定于访问者，不包含cookie。换句话说，它基本上可以在任何地方缓存，打开门以使用CDN提供商，这些提供商在全球数百个地点拥有更好的地理位置。

通过缓存启用，减少等待时间，初始连接的其他重要部分变得更加重要。增强我们的网络基础架构和监控使我们能够改进我们的DNS，Connection和SSL时间。

为所有用户域启用了HTTP / 2，减少了每个新连接所需的连接量和开销。这是部署相对容易的改变，同时利用HTTP / 2的性能和恢复效益。

传统上，我们的所有文件都使用Gzip压缩压缩，这是Web上最普遍的HTML压缩选项。这种压缩协议最初在近30年前实施！

较新的Brotli压缩引入了压缩改进，几乎没有权衡，并且慢慢变得更受欢迎，如年度Web Almanac压缩章节所述。它已被所有主要浏览器支持一段时间。

对于所有支持它的所有客户端，我们支持Brotli支持我们的Nginx代理。

搬到使用Brotli压缩减少了21％至25％的中位文件传输大小，导致带宽使用率降低和改进的加载时间。

在WIX，我们始终使用CDN来服务于用户网站上的所有JavaScript代码和图像。

最近，我们与我们的DNS提供商的解决方案集成，根据客户端和原点自动选择最佳表演CDN。这使我们能够从每个访问者的最佳位置服务静态文件，并避免某个CDN上的可用性问题。

拼图的最后一部分是通过CDN：来自用户域的HTML服务的最后一个和最关键的部分。

如上所述，我们创建了自己的内部解决方案来缓存并提供特定于站点的HTML和API结果。在这么多新地区维护此解决方案也具有其运营成本，并添加新位置成为我们需要管理和不断优化的过程。

我们目前与各种CDN提供商集成，以支持直接从CDN位置服务的整个WIX站点，以改善全球服务器的分发，从而进一步改善响应时间。这是由于我们服务的大量域，这是一个挑战，这需要在边缘处的SSL终止。

与CDNS集成，将WIX网站比以往更近为客户，并更具改进，加载体验，包括在我们方面没有增加努力的最新技术，如HTTP / 3。

如果您运行WIX网站，则您可能会想知道这意味着如何转化为您的WIX网站绩效结果，以及我们如何与其他网站平台进行比较。

在过去的一年里，上面的大部分工作都已部署，有些人仍在推出。

Web almanac通过HttParchive最近发布了2020年版，其中包括关于CMS用户体验的一篇优秀章节。请记住，本文中描述的许多数字是从2020年中旬开始。

我们期待看到2021年的更新报告，并积极监控我们网站以及我们的内部性能指标的CRUX报告。

我们致力于不断改进装载时间，并为我们的用户提供一个平台，他们可以在他们想象的情况下构建网站，而不会妥协。

Debugbear最近发布了一个非常有趣的网站建设者绩效审查，它触及上面提到的一些区域，并检查了在每个平台上建立的非常简单的网站的性能。本网站近两年前建于，而不是修改，但该平台不断改进，并且可以通过在过去的一年中查看其数据来寻求现场性能，并且可以通过在过去的一年中查看其数据来见证。

我们希望我们的经验激励您在您的组织中采取绩效导向的文化，上面的细节有用，适用于您的平台或网站。

选择一系列指标，您可以始终如一地使用行业认可的工具。 我们推荐核心网络威力。 感谢您学习我们的故事，我们邀请您提出问题，在Twitter和Github上分享想法，并加入您喜欢的频道上的Web性能对话。