Optimizing Performance

[00:00:00]
>> Evgenii Ray: So next bit is the performance optimization. So since we already passed for the workshop and you probably know where we were going to start, so the performance optimization is split into the free section. The first one is the network.
>> Evgenii Ray: The second one is the rendering.
>> Evgenii Ray: And the last one is the JavaScript, so let's start with the network.

[00:00:34]
The first thing that we can do to optimize the network is to migrate to HTTP2. Since it will allow us to fetch 200 SSE in parallel within one TCP connection it will also Utila better utilize the device battery. Because we don't need to create five sockets in parallel compared to a CP1.

[00:01:02]
>> Evgenii Ray: The next thing is, since we have HTTP2, it's a very good idea to split the bundle. So let's split it, so we call it bundle split.
>> Evgenii Ray: And we can actually split our bundle even more and prepare the default, for platform targets so it can be ES5, and it can also be ES.

[00:01:29]
Next, so we're reduce the size of the initial bundle that we're loading on the screen. So the next thing would be to define defer the scripts, so if we have any analytic scripts or any non-critical stuff, we can load this layer once the page is loaded. So it's also a good idea to compress things.

[00:01:57]
So we want to make sure that we're using Gzip or at least broadly, actually it should be in a different order. So we should at least use the Gzip, and then if we have the broadly support, then it's better to use the broadly, because Gzip will provide around 85% compression.

[00:02:22]
They broadly provides around 91% of compression. Okay, so also one thing you want to make sure that all your assets are served not from the directly from the API server but from CDN. And this is also it's a very common means from the web infrastructure perspective.
>> Evgenii Ray: When it comes to your image to the images assets, so let's create a section, assets for the images you want to use the opt, optimized format.

[00:03:02]
So make sure that you use WebP, or you can also provide a full back for JPEG if this doesn't work out. Also use the font loading, so if you have some custom fonts, to use font loading attribute to make sure that you don't wait three seconds until until the custom folder is loaded.

[00:03:35]
So what else we can do with the our with the network? So one thing that's, if you have such budget in your, in your organization, you may consider implementing the optimization service. So usually there is some kind of the API that takes an image as an input, and then outputs the compressed version for the specific viewport.

[00:04:09]
So it ensures that you don't load the image which is too large for the screen. So I think we're done with the networking for now, let's do the rendering. And when it comes to rendering, the first thing that you want to make sure that you implement is the DOM optimization.

[00:04:36]
So first thing, you need to maintain the constant number of nodes because if you maintain a constant number of NOS, then your device use the same the same amount of memory all the time. And it increases the responsiveness of the app and to do that, you can consider to use the virtualisation which we already used for the infinite list loading.

[00:05:06]
Also make sure that your CSS lectures are flattened, if you have hundreds of CSS questions.
>> Speaker 2: Yeah, there is a question. Some performance optimizations might add a lot of complexity or time to the project, how do you know when it's worth it when designing?
>> Evgenii Ray: So follow the guidelines for web vitals, if you see that your web vitals are not perfect, like in a yellow zone, and your first screen loading performance is around four seconds.

[00:05:44]
And I guess it's a pretty bad experience for the user, so you don't need to be 99% best at the web vitals, but as long as your website is loading pretty fast for the users, then you provide this optimization. So you do the optimization when you actually need them, if your website loads fast, you don't need to overcomplicate the design.

[00:06:11]
Here we just list the possibilities of what we can do on the system design tree. Okay, so first, you want to flat in the selectors.
>> Evgenii Ray: And if you have hundreds of complex selects on the app, it can add around 50 or 100 milliseconds in total to the first screen rendering.

[00:06:36]
So make sure that you use some naming methodology that helps to simplify such selectors. Also we want to make sure that we do not trigger the reflow and the way we do not trigger the reflow is we by utilizing the properties that trigger only limited pipeline which is GPU based.

[00:07:01]
So as a follow up, we need to make sure that we use CSS transformation for the animations.
>> Evgenii Ray: So it's also good practice to use some when we just load our application, we may want to consider to include some loading icons in the initial index HTML response. So we give the good feedback to the user, so we'll call it loading placeholders.

[00:07:41]
>> Evgenii Ray: Okay, and what else can be done on the rendering side?
>> Evgenii Ray: Okay, I think we can now finish this section and jump to the CSS, so the rule of thumb for Creep is we shouldn't block the UI thread. So make sure that you do stuff as asynchronous as possible, so if you have the heavy job, go to the web worker or your API.

[00:08:20]
And if you can't use both, one way we can do the asynchronous job is to schedule the Idle callback. So the Idle callback will instruct the browser to find the time frame to execute a piece of job into the free space of time while the browser is not doing any rendering.

[00:08:42]
So we can provide the idle callback.
>> Evgenii Ray: Okay, so we also want to make sure that we use asynchronous storages, such as IndexDB. And it's also a good thing to implement the service worker, the service worker is a very simple type of background workers that caches your assets.

[00:09:17]
So between your server, and the client, the service worker interrupts the requests and it can put them into the Index DB. And next time you load your asset, it will be served from the Index DB so you don't do additional network trip.
>> Evgenii Ray: So one thing about the JavaScript is you need to make sure that you reduce the downloadable code, we already talked about this in network section.

[00:09:56]
But the less the browser needs to parse the better for initial loading because when you initiate the script, the browser has to compile this and provide the optimized runtime for that. So make sure that you reduce the GS payload. I know it's pretty hard, especially with the libraries, but you can reduce that by optimizing the network section where we split the bundle and also prepare the ES5 and ES next bundles.

[00:10:33]
So for the JavaScript, I think we are done. So, this is the performance optimization section and basically this is the end of the our system design interview now, and this should provide the good overview of the points that we mentioned before. So we wanted to design first the efficient rendering of the list, so we provided an explanation with the virtualization then we also provide an explanation how we store the data efficiently.

[00:11:09]
And one thing that we may also mention is we can also utilize our Index DB to store the state data. So we can out source the data from runtime to the hard drive and we also provided the performance optimization points that we can apply to our application. So this is basically what you can do in 35 minutes time frame and yeah this is Is it for the system design?

[00:11:40]
>> Speaker 2: So one of the non functional requirements you talked about was offline usage, could you just speak a little bit to like, which parts of this whole everything you discussed fits into that?
>> Evgenii Ray: So when we register the service worker, so it basically registers on inside a browser, it says, very small.

[00:11:58]
Script that basically caches the resources in IndexDB, so you can instruct the service worker to put the HTML CSS images assets in the index DB. And when you load your application next time, so it will interrupt the request to the server and serve your asset from the image DB so you can open your application even offline.

[00:12:22]
>> Speaker 2: Is it worth getting into how to invalidate the cache data from index DB?
>> Evgenii Ray: Yeah, it's a pretty good problem. If you have time you can discuss that but I would if you actually have the time left, one thing that is cover is the accessibility and accessibility with the virtualization is a pretty complex topic.

[00:12:43]
If you have time to speak about accessibility that would be probably the better way to how to organize your time.
>> Speaker 2: What's your TLDR on accessibility and virtualization? [LAUGH] Too much, okay.
>> Evgenii Ray: It cannot be TLDR but the way how for instance, the three there manages the accessibility.

[00:13:05]
So when you move elements around the browser the screen reader loses access loses understanding of ways in which order elements are rendered. Even if you apply the index property to tell the browser, okay, this is the second and the third element, when you move them through CSS transformation, browser will not reread this.

[00:13:27]
So your screen reader will not be able to understand that you move elements around. And one way how can you handle that is how the Twitter does that. So they basically, they render, fully re-rendered the list. So when you move elements around, so they do not have the full virtualization, they instead limit the number of rendered elements to some 10 or 20 elements and they re-render them fully.

[00:13:55]
>> Speaker 2: Okay, so you don't get peer reflow benefits, but you're still having less stuff.
>> Evgenii Ray: Yeah, and so if you want to manage this using the ECS when we just move elements around and reduce the reflow, then you would need to manually set up the event handlers that will track the.

[00:14:18]
The keyboard events, and we'll go through the list manually. And they will also focus the element that you are currently selecting, and kind of try to force the browser to read this one.