1. Improving Performance of Wix Websites
Today I want to tell you about how we improve the performance of millions of Wix websites. We heavily invested in performance and implemented one big project that created massive improvement. Core Web Vitals is a metric that Google developed to measure the user experience of websites, and we can use it to measure our web applications. The project I'm about to present was one of the biggest influencers for this improvement.
Hey, everybody. Thanks for joining. My name is Gil. I'm a software engineer at Wix, and today I want to tell you about how we improve the performance of millions of Wix websites.
For those of you who don't know, Wix is a platform for creating websites and web applications, and since Wix websites can be very complex with a lot of different features and components, performance has always been one of our biggest challenges. In the last few years, we heavily invested in performance. We implemented actually many solutions for optimizing websites, but today I want to focus on one big project that created massive improvement in performance.
You can see the impact of performance here. This is a graph based on Core Web Vitals metrics. I'm sure that many of you already know what it is, for those of you who don't. Core Web Vitals is a metric that Google developed to measure the user experience of websites on the internet, and we can use Core Web Vitals to measure our web applications, the applications that render Wix websites. You can see Wix on the orange graph, it's compared to other web platforms or competitors, and you can see how much we improved, from having very low Core Web Vitals results just a few years ago, to having one of the best Core Web Vitals results, relatively in a short period of time, and of course those results reflect user experience in our websites. So although many things happen during this time, the project that I'm about to present to you was one of the biggest influencers for this improvement.
2. Improving Performance of Wix Websites (Part 2)
Okay. So in the beginning, my name is Gil. I'm a software engineer at Wix, and in Wix I'm a part of the viewer team. In the viewer team we develop the application that renders Wix websites. So whenever a user goes to a Wix website, our application runs and renders the website.
So in the last two years I'm leading the performance team where we try to find and also, of course, solve performance issues in Wix websites. Going back to this graph, today I want to talk about the journey that we went through. Before I dive into the project and the solutions of how we actually improve the performance of Wix websites, I want to begin by explaining the problems that caused us to have such low results and, of course, user experience, and then also, of course, explain the solution that fixed those problems.
3. Implementing Feature with Saved Data
Let's take a look at how someone would implement this feature. We save the data from the panel into a database and pass it to a button component. The component renders different HTML based on whether a link is added or not. This differentiation is important for SEO purposes. This is a simple React component that implements the feature we just presented.
And let's think about how someone would implement this feature. Of course, you would have to save the data from the panel, right? I mean, the developer probably took all the data from the panel, saved it into a database. Let's take a look at the saved data again.
Simple example of the data that was saved based on the panel. So we have the pattern data. Of course it has an ID and a type but also inside the data property you can see the link object. The link object includes the type of the link that the user chose. In this case it was a link, a page link. Means you want to navigate to a different page. And also the page ID of this link, of the page the user chose. So for example, in this example, just another page in our application, in our website. So this is the saved data from this panel.
And then of course, the saved data needs to be passed to the button component to create the link itself. So when the user click it, we will do the navigation. So again, I want to show you how a simple react component would look like implementing this exact logic. So a very simple react component taking the props. Of course the props includes the data that we just saw. You can see the link object. You can see the function calculate link in this code. We will dive into it just in a second. But you can see, it returns an href, and then we take the href and put it in the anchor tag. So whenever the user click the button, it will do the navigation. You can see there's another case in case the user did not add a link because you don't have to add a link. Not all buttons have links. We just render different HTML and just use and button, and maybe in more complicated cases we will add an onClick function. This is very important to differentiate between those tags. For SEO it's very important if you have a href to put an anchor tag, and if you have a regular button, not add it. It's very important for SEO reasons. This is a simple React component that implements the feature that we just presented. This is just an overall architecture of our solution from the panel.
We save the data on our servers and send it to the client side to create the HTML for the website. The calculate link function has many options from the panel, resulting in a lot of unused code. This is the first problem: many options cause components to download unused code. The second problem is resolving the code that takes the saved data and creates the HTML.
So it's a very simple feature, but let's talk a little bit about some issues that we see with this code. The biggest issue is actually in the calculate link function. Now let's dive into this function, the calculate link function.
So this is how the calculate link function looks like. Get some parameters, but then you can see all those cases that, remember, we saw from the panel. We signed the panel, those cases, and now we can see all those cases in our code. So if it's a link page, I need to calculate the link to the page. It could be an external link. I'll probably have this in the data as well. Could be any other cases. If I want to open a popup, I'll probably need more information here. So you can see this function has many, many options from the panel. So let's go over the issues that we see here.
5. Calculating HTML from Saved Data
In our case, it's basically this calculate link function. Now in our case, simple example, it's just one line of code. But in more complex cases, it's actually more code that we actually have to run. We have to execute this code. So it even takes more time.
So, let's talk about the solution. So, how do we solve not downloading a lot of unused code? We actually rewrite our components into small feature-specific components. So, instead of having this big button component that could have also a link button but also regular button in different cases, web address buttons and many different buttons, you know, just trying to implement whatever the user wanted, we actually cut those components into small feature-specific components. So, instead of having this big button component, we rewrote it into small feature-specific components. This is the first step, but you can see the href already passed from the props here, so how did we calculate the href? It actually passed, the href is actually now passed from the server. So the second step of the solution is calculating the view data, which in our case is the href, we calculated it in a server, but not in the same server as the save data came from. We actually created a frontend server, which is something between the backend server and our client application. So all this function has moved entirely into the backend, into our frontend server, because it has nothing to do with the browser. All the data that is using this function is basically take save data and calculate view data. So, and of course in this case we have the XML-based URL and of course we can send it to this frontend server.
6. Improving Performance through Server-side Logic